Paystack Inline

NOT RECOMMENDED IF THERE IS A RISK THAT UNSCRUPULOUS CUSTOMERS WILL TAMPER WITH INITIALIZATION INFORMATION

Paystack Inline offers a simple, secure and convenient payment flow for web and mobile. It can be integrated with a line of code thereby making it the easiest way to start accepting payments. It also makes it possible to start and end the payment flow on the same page, thus combating redirect fatigue.

Working with Paystack Inline

Here is a sample code that calls Paystack and also handles outcome.

📘

Key

Please note that the key to use with inline is the public key and not the secret key

<form >
  <script src="https://js.paystack.co/v1/inline.js"></script>
  <button type="button" onclick="payWithPaystack()"> Pay </button> 
</form>
 
<script>
  function payWithPaystack(){
    var handler = PaystackPop.setup({
      key: 'pk_test_86d32aa1nV4l1da7120ce530f0b221c3cb97cbcc',
      email: '[email protected]',
      amount: 10000,
      currency: "NGN",
      ref: ''+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
      firstname: 'Stephen',
      lastname: 'King',
      // label: "Optional string that replaces customer email"
      metadata: {
         custom_fields: [
            {
                display_name: "Mobile Number",
                variable_name: "mobile_number",
                value: "+2348012345678"
            }
         ]
      },
      callback: function(response){
          alert('success. transaction ref is ' + response.reference);
      },
      onClose: function(){
          alert('window closed');
      }
    });
    handler.openIframe();
  }
</script>
<form >
  <script src="https://js.paystack.co/v1/inline.js"></script>
  <button type="button" onclick="payWithPaystack()"> Pay </button> 
</form>
 
<script>
  function payWithPaystack(){
    var handler = PaystackPop.setup({
      key: 'pk_test_86d32aa1nV4l1da7120ce530f0b221c3cb97cbcc',
      email: '[email protected]',
      plan: "PLN_code",
      ref: "UNIQUE TRANSACTION REFERENCE HERE",
      metadata: {
         custom_fields: [
            {
                display_name: "Mobile Number",
                variable_name: "mobile_number",
                value: "+2348012345678"
            }
         ]
      },
      callback: function(response){
          alert('successfully subscribed. transaction ref is ' + response.reference);
      },
      onClose: function(){
          alert('window closed');
      }
    });
    handler.openIframe();
  }
</script>

A lazy way to load Paystack Inline is to pass the parameters as data attributes in a script tag as shown below:

<form action="/process" method="POST" >
  <script
    src="https://js.paystack.co/v1/inline.js" 
    data-key="pk_test_221221122121"
    data-email="[email protected]"
    data-amount="10000"
    data-ref=<UNIQUE TRANSACTION REFERENCE>
  >
  </script>
</form>

When the user enters their card details, Paystack will validate the card, charge the card, and pass a response object (containing the status of the transaction including reference as reference) to your callback function. If no callback function is set, we will insert a hidden field named paystack-reference on the parent form and submit the form to whatever action you set.

Before you give value to the customer, please make a server-side call to our verification endpoint to confirm the status and properties of the transaction.

Configuration options

'*' indicates required parameters.

Options

Description

key*

Your Public Key from Paystack. Use test public key for test mode and live public key for live mode

ref

Case-sensitive unique transaction reference. Only -,., = and alphanumeric characters allowed.

email*

The customer's email address.

amount*

If the currency is NGN, the amount should be specified in kobo, and pesewas for GHS. Ignored if creating a subscription.

callback

Javascript function that should be called if the payment is successful

onClose

Javascript function that should be called if the customer closes the payment window

currency

Currency charge should be performed in. Default is NGN

For Subscribing

plan

If transaction is to create a subscription to a predefined plan, provide plan code here.

invoice_limit

Number of invoices to raise during the subscription. Overrides invoice_limit set on plan.

quantity

Used to apply a multiple to the amount returned by the plan code above.

channels

Available channels are: ['card', 'bank', 'ussd', 'qr', 'mobile_money']. Send us one like: 'card' or an array ['card', 'bank'] to specify what options to show the user paying.

Lazy only

data-custom-button

ID of custom button if you do not want to use the default Paystack button. To be used only if you are using the latter (lazy) method of loading Paystack using script tags.

For Split Payments

subaccount

( string ) The code for the subaccount that owns the payment. e.g. ACCT_8f4s1eq7ml6rlzj

transaction_charge

( integer, optional ) A flat fee to charge the subaccount for this transaction, in kobo if currency is NGN or pesewas for GHS. This overrides the split percentage set when the subaccount was created. Ideally, you will need to use this if you are splitting in flat rates (since subaccount creation only allows for percentage split). e.g. 7000 for a 70 naira flat fee.

bearer

( string, optional ) Who bears Paystack charges? account or subaccount. Defaults to account.

Related: Verifying Transactions
Events