Integration Steps for PG mWeb Intent

We have exposed the following two methods, which will be responsible for doing pre-checks and invoking the apps.

• isAppSupported
• requestPayment

isAppSupported

isAppSupported will take merchantConfig as input. merchantConfig will be an array of objects that should have the following data. Name is required, so it should always be passed.

merchantConfig
const merchantConfig = [

  {

    name*, //App Name - required

    methods, // ['MIntent', 'AppIntent']

    mIntentSupportedMethod, //['canMakePayment', 'hasEnrolledInstrument']

    order

  }

]

The response will be in the following format:

merchantConfig Response
[

  {

    appName,

    isSupported,

    method, //'AppIntent' or 'mIntent'

    order

  }

]

requestPayment

requestPayment will take an object containing intentData, transactionAmount, and appName as a required value. This function is responsible for opening the app & allowing users to complete their transactions. It is also responsible for informing if App doesn’t exist (AppIntent), Transaction is completed/Failed(Only MIntent)

requestPayment
{

  intentData*: { intentUrl: "" },

  transactionAmount*,

  appName*

}

Steps for Integration

1. On the checkout page load, import the following script on the HTML:
<script src=”https://mercury.phonepe.com/web/bundle/intent.js”></script>

2. Do call isAppSupported with the appropriate merchantConfig as per the merchant’s requirement. Render only those apps whose isSupported is true.

isAppSupported
window?.PhonePeIntent?.isAppSupported({merchantConfig}).then(response => {

  //Merchant's custom logic to render any app as per response

}).catch(err => {

  //Catch Error

});

3. This function should be called on Pay click and before API call for fetching Intent URL happens.

window?.PhonePeIntent?.initPayment(appName);

4. On click of the user’s pay button, call the requestPayment method with all three required inputs and handle the response with your custom logic.

requestPayment
window?.PhonePeIntent?.requestPayment(paymentData).then(response => {

    response.complete("success").then(completeResponse => {

    		//If it's mIntent then you can consider it as transaction completed successfully

    //For App Intent, Start the Polling of status check for 120 secs on interval of 5 secs. Can be adjusted as per merchant's need

    }).catch(err => {

      if (!err) {

        //App Doesn't exist

        window?.PhonePeIntent?.closePayment(appName); // The window should be closed

      } else {

        //If method is MIntent then it means transaction is failed/canceled

      }

    })

}).catch(err => {

    if (!err) {

        //App Doesn't exist

        window?.PhonePeIntent?.closePayment(appName); // The window should be closed

      } else {

        //If method is MIntent then it means app is crashed while opening app

      }

});

5. This function should be called after the user clicks on the Pay button & if API fails.

window?.PhonePeIntent?.closePayment(appName);

6. Merchants must ensure to call the appropriate function and pass the necessary parameters to enable PhonePe Intent payment processing.