Steps to Integrate mSite Intent

UI Flow

1. For PhonePe UPI App, merchants have to identify if the device has the PhonePe app and then display it on the checkout page.

• If PhonePe is selected, then “targetApp” should be passed with the static value “PHONEPE”.

2. For other UPI apps, merchants can display “Other UPI Apps” or “More Apps” and then when the user selects it, the merchant can launch the default android tray and the user can select any of the other available UPI apps to initiate the payment.

• In this case, as the merchant doesn’t have control over which UPI app is selected by the user, the targetApp parameter will be skipped.

Steps to Integrate mSite Intent

1. Create an instance of the paymentRequest object where the intentUrl value should be an “upi://” Intent URI.
2. Using the Step 1 paymentRequest object, Check if we can make the payment using the intent flow using the hasEnrolledInstrument() / canMakePayment() methods.

To identify PhonePe app on user’s device

Add ‘connect-src https://mercury-t2.phonepe.com‘ directive in the Content-Security-Policy of your html page.

Reference Link: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src#syntax

Note

hasEnrolledInstrument() method supports the latest browser whereas in case you are using an older browser then you can consider the canMakePayment() method.

This method will return true/false based on the respective supportedMethods Url passed.

• If true is returned then display the respective UPI App PhonePe option on the checkout page.
• If false is returned then do not display the respective UPI App PhonePe option on the checkout page.

const supportedInstruments = [{
  supportedMethods: "https://mercury-uat.phonepe.com/transact/pay",
  // For PhonePe PreProd: "https://mercury-uat.phonepe.com/transact/pay",
  
  data: {
		//url: intentUrl //To pass intent url from pg/v1/pay API Response
		url: "upi://pay?pa=MERCHANTUAT@ybl&pn=merchant&am=1.00&mam=1.00&tr=7ad44192-69f3-4e38-bebe-8c4944c5bbc6&tn=Payment+for+7ad44192-69f3-4e38-bebe-8c4944c5bbc6&mc=5311&mode=04&purpose=00&utm_campaign=DEBIT&utm_medium=MERCHANTUAT&utm_source=7ad44192-69f3-4e38-bebe-8c4944c5bbc6"
  }
}];

const supportedInstruments = [{
  supportedMethods: "https://mercury-t2.phonepe.com/transact/pay",
  // For PhonePe Prod: "https://mercury-t2.phonepe.com/transact/pay",

  data: {
		//url: intentUrl //To pass intent url from pg/v1/pay API Response
		url: "upi://pay?pa=MERCHANT@ybl&pn=merchant&am=1.00&mam=1.00&tr=7ad44192-69f3-4e38-bebe-8c4944c5bbc6&tn=Payment+for+7ad44192-69f3-4e38-bebe-8c4944c5bbc6&mc=5311&mode=04&purpose=00&utm_campaign=DEBIT&utm_medium=MERCHANTUAT&utm_source=7ad44192-69f3-4e38-bebe-8c4944c5bbc6"
  }
}];

3. Call /pg/v1/pay API with the following properties and get the intent Url in the response.

• deviceContext.deviceOS: ANDROID
• paymentInstrument.type: UPI_INTENT
• paymentInstrument.targetApp: PHONEPE – If PhonePe App is selected by the user

4. Create an instance of the paymentRequest object where you need to pass the actual intent URI from the response of /pg/v1/pay API as the value of the intentUrl.
5. Once a user clicks on the “PhonePe” button, call the show() method on the PaymentRequest object with PhonePe’s URL in supportedMethods, this will open the PhonePe app to complete the transaction.
6. Once the payment is completed, You will receive the response on the handlePaymentResponse() method.
7. Once the response is received, You need to check the status with the backend.