JS Checkout

This is a code bundle that handles the pay page’s opening on the merchant’s page. They can either opt for Redirect or ‘IFrame’ mode.

<script src="https://mercury.phonepe.com/web/bundle/checkout.js"></script>

The code bundle will handle the invocation of PayPage either in redirect or iFrame mode, as per the merchant’s choice.

After including this script, the PhonePeCheckout object will be available to merchants, which they can use to invoke PayPage using the ‘transact’ function. They can also use the closePage function to explicitly close the PayPage iFrame if invoked in iFrame mode.

Merchants must ensure to call the appropriate function and pass the necessary parameters to handle the PayPage flow on their checkout page.

Invoke PayPage on Checkout Page

Copied !

To Invoke PayPage on the checkout page, merchants need to include the checkout.js script provided by PhonePe:

<script src="https://mercury.phonepe.com/web/bundle/checkout.js"></script>

This script will append the PhonePeCheckout object in the window object.

PhonePeCheckout object will have the following two functions exposed, which merchants can use as per their use case:

PhonePeCheckout.transact
PhonePeCheckout.closePage

The transact function is used to invoke PayPage either in iFrame or redirect mode, as explained earlier.

The closePage function is used to explicitly close the PayPage iFrame (if invoked in iFrame mode), as explained earlier.

Merchants must use these functions appropriately in their checkout flow to enable PayPage payment processing.

Invoking PayPage in Redirect Mode

Copied !

To invoke PayPage in redirect mode, merchants need to call the transact() function provided by the window.PhonePeCheckout object:

window.PhonePeCheckout.transact({ tokenUrl });

The tokenUrl parameter will contain the PayPage’s URL which merchants will obtain via a server-to-server call. This URL will redirect the user to the PayPage for payment processing.

Once the payment process is completed, PayPage will redirect the user back to the merchant’s website.

Merchants must ensure they have the necessary backend logic to verify the status of the payment completion from the PayPage server and update the user accordingly.

Invoking PayPage in IFrame

Copied !

To invoke PayPage in an iFrame over the merchant’s page, merchants need to call the transact() function provided by the window.PhonePeCheckout object.

window.PhonePeCheckout.transact({ tokenUrl, callback, type: "IFRAME" });

The tokenUrl parameter will contain the PayPage’s URL which merchants will obtain via a server-to-server call.

The callback parameter will be a function that will be triggered after PayPage reaches the terminal stage and the page is closing. Here is a sample function that merchants can refer to:

function callback (response) {
  if (response === 'USER_CANCEL') {
    /* Add merchant's logic if they have any custom thing to trigger on UI after the transaction is cancelled by the user*/
    return;
  } else if (response === 'CONCLUDED') {
    /* Add merchant's logic if they have any custom thing to trigger on UI after the transaction is in terminal state*/
    return;
  }
}

The response parameter in the callback function will contain either USER_CANCEL or CONCLUDED based on whether the transaction was canceled by the user or it has reached a terminal state.

Merchants can add their custom UI logic in the if statements to trigger after the transaction is canceled or completed.

Using the closePage() Function

Copied !

The closePage() function is used to explicitly close the iFrame on the merchant’s logic. This function can be used to close the PayPage only if there are use cases where the merchant wants to close the PayPage on their logic.

Usage

To use the closePage() function, call it from the merchant’s code:

window.PhonePeCheckout.closePage();

This will close the PayPage iFrame.

Note: This function should not be used in normal use cases as the iFrame will be closed anyways after the payment is complete. It should only be used if the merchant has specific use cases where they want to close the PayPage on their logic.

To integrate PhonePe Checkout features into your Flutter web project, follow these steps:

• Add the PhonePe Checkout JavaScript package to your project by adding the following

  <script src="https://mercury-stg.phonepe.com/web/bundle/checkout.js" defer></script>
  

  This will load the PhonePe Checkout package into your project.

• Define a JavaScript function to call the PhonePe Checkout transact function with a callback. The function should take three parameters: tokenUrl, type, and callback. Here’s an example:

  window.checkout = (tokenUrl, type, callback) => {
    if(window && window.PhonePeCheckout && window.PhonePeCheckout.transact) {
       window.PhonePeCheckout.transact({tokenUrl, callback, type});
    }
  }
  
  

  This code defines a checkout function that calls the PhonePeCheckout.transact() function with the provided parameters.

• In your Dart code, define a callback function that will be triggered when a transaction is concluded or canceled. Here’s an example:

  void callback(response) {
     if (response === 'USER_CANCEL') {
       // Add merchant's logic if they have any custom thing to trigger on UI after the transaction is canceled by the user
       return;
     } else if (response === 'CONCLUDED') {
       // Add merchant's logic if they have any custom thing to trigger on UI after the transaction is in terminal state
       return;
     }
  }
  

  This callback function takes a response parameter that represents the status of the transaction. In this example, the function checks if the transaction was canceled by the user or concluded successfully, and then adds any custom UI logic if needed.

• In the function that handles the pay page invocation or redirection, you can check if the checkout function is defined and then call it using the parameters tokenUrl, type, and js.allowInterop(callback). Here’s an example:

  import 'dart:js' as js;
  void handlePayPage() {
     if(js.context.hasProperty('checkout')) {
        // The package is loaded   
        const tokenUrl = "PayPage Generated URL";
        const type = "IFRAME";    
        js.context.callMethod('checkout', [tokenUrl, type, js.allowInterop(callback)]);
     }
  }