Steps to integrate the flow

  1. Create an instance of the paymentRequest object where the redirectUrl 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 hasEnrolledInstrument() / canMakePayment() methods.

🚧

Note

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

This method will return true/false.

  • If true is returned then display the PhonePe/BHIM UPI option on the checkout page.
  • If false is returned then do not display the PhonePe/BHIM UPI option on the checkout page.
  1. Call A /v4/debit API with extra property paymentScope: MSITE_INTENT and get the redirect Url in the response.

  2. Create an instance of the paymentRequest object where you need to pass the actual intent URI from the response of /v4/debit API as the value of the redirectUrl.

  3. Now call the .show() method using the Step 4 paymentRequest object. Here the PhonePe app will open and the user can complete the payment.

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

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