Payment Flow

On the checkout screen, merchants call the v4/debit API call with merchantId, transactionId, transaction details and the extra property paymentScope: MSITE_INTENT as payload. Please check this for more details
PhonePe returns a redirect URL with transaction id in the response object
Create a paymentRequest object by providing the below objects as arguments in the constructor:

const supportedInstruments = [{
  supportedMethods: "https://mercury-uat.phonepe.com/transact/pay",
  // For PreProd: "https://mercury-uat.phonepe.com/transact/pay",
  // For Prod: "https://mercury-t2.phonepe.com/transact/pay",
  data: {
		//url: redirectUrl //To pass redirect url from v4/debit 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 details = {
  id: id // A unique transaction id/ if not passed browser will generate one...,
  total: {
    label: 'Total',
    amount: {
      // Amount details goes here...
    }
  }
};

Check if hasEnrolledInstrument() method is supported then hasEnrolledInstrument() method and not supported then use canMakePayment() method call, to make sure that phonepe/pay method is supported by the browser and then show the “Pay by Phonepe”. Once a user clicks on the “Pay by Phonepe” button call show() method on PaymentRequest object, this will open the phonepe app where users can use various payment options to complete the transaction. Handle the callback for the show() method, on successful payment response, will be an app status, txnRef id, etc.