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


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


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.

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

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

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

  3. Once the payment is completed, You will receive the response on the **handlePaymentResponse()** method.

  4. Once the response is received, You need to check the status with the backend.