Migrating from InlineJS V1 to V2

What's New

Popup V2 is packed with features that help developers securely customize and gain more control of payments on their frontend applications. Some shining new features available on Popup V2 are:

• Support for arrow functions
• Initiate a transaction from the API and complete it with Popup
• Reduced transaction abandonment rate
• Access to transaction status
• Programmatically close Popup
• And more...

Updating dependency

You can install Popup V2 based on your workflow and preference:

1<script src="https://js.paystack.co/v2/inline.js">

If you used NPM or Yarn, kindly ensure you import the library:

1import PaystackPop from '@paystack/inline-js';

Updating methods

There are subtle differences when initializing a transaction on Popup V1 and V2. In order to ensure a smooth transition, we'll highlight the differences and show you how to update the necessary methods and params.

Initialization

With Popup V1, transactions are initialized with the PaystackPop.setup() method. Popup is then triggered by calling the openIframe() method:

1let paystack = PaystackPop.setup({
2  key: 'pk_domain_xxxxxxxxxx',
3  email: 'example@email.com',
4  amount: 10000
5});
6
7paystack.openIframe();

Dang! That's so old school. In V2, we dropped the openIframe() method. A transaction can be initialized like this:

1const paystack = new PaystackPop();
2paystack.newTransaction({
3    key: 'pk_domain_xxxxxxxxxx',
4    email: 'example@email.com',
5    amount: 10000
6});

Callbacks

Callbacks are used to get the state of payment. New callbacks are introduce in V2:

1let paystack = PaystackPop.setup({
2  // other params
3  ...
4  callback: function(transaction){
5    // Payment complete! Reference: ' + response.reference;
6  },
7  onClose: function(){
8    // user closed popup
9  }
10});
11
12paystack.openIframe();

1const paystack = new PaystackPop();
2paystack.newTransaction({
3  // other params
4  ...
5  
6  onSuccess: (transaction) => { 
7    // Payment complete! Reference: transaction.reference 
8  },
9  onCancel: () => {
10    // user closed popup
11  }
12});

The callback() method which indicates a successful transaction has now been replaced with the onSuccess() callback. The onClose() method, which lets you know when a user closed Popup, has now been replaced with onCancel().

Also notice that V2 allows you make use of arrow functions. Heck! Keep the extra key strokes for something else.

Let's go live! Test your integration to ensure it works as expected. If you experience any issue, kindly shoot a mail to support@paystack.com