Paystack

The Paystack Developer Hub

Welcome to the Paystack developer hub. You'll find comprehensive guides and documentation to help you start working with Paystack as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Discussion

Paystack Inline

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: 'customer@email.com',
      amount: 10000,
      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
      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: 'customer@email.com',
      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="customer@email.com"
    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 pubic Key from Paystack. Use test key for test mode and live key for live mode

ref

Unique case sensitive transaction reference. Only -,., = and alphanumeric characters allowed.

email*

The customer's email address.

amount* (ignored if a plan is provided)

Amount in kobo. 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

plan* (amount not required if present)

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

quantity

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

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.

channels

Send us 'card' or 'bank' or 'card','bank' as an array to specify what options to show the user paying.

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. 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.

Paystack Inline