Sample Code

Sample Request

{  
   "merchantId":"UATMERCHANT",
   "transactionId":"TX123456789",
   "merchantUserId":"U123456789",
   "amount":100,
   "merchantOrderId":"OD1234",
   "mobileNumber":"9xxxxxxxxx",
   "message":"payment for order placed OD1234",
   "subMerchant":"DemoMerchant",
   "paymentScope": "MSITE_INTENT",
   "email":"amit***[email protected]",
   "shortName":"Amit"
}

Sample Response

{
  "code": "SUCCESS",
  "message": "Your request has been successfully completed.",
  "data": {
   "redirectType": "MSITE_INTENT",
   "redirectURL": "upi://[email protected]&pn=AbcdFirm&am=424.00&mam=424.00&tid=YBLc6f12c2333b2495fbfd024b12ad43dc7&tr=T2002061921587731419308&tn=Payment%20for%20TX117785240954814000&mc=5311&mode=04&purpose=00"
  }
}

Sample Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#4CAF50">
  <title>Phonepe mIntent Flow</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="contents">
    <h1>Phonepe mIntent</h1>
    <p>This merchant accepts Phonepe only.</p>
    <!-- Some Merchant code to select/enter product details -->
    <p><button style="font-weight: bolder;" onclick="onCheckoutClick()">PhonePe Pay</button></p>
  </div>
  <pre id="msg"></pre>
  <script src="pr.js"></script>
</body>
</html>
let request;

/**
 * Initializes the payment request object.
 * @return {PaymentRequest} The payment request object.
 */
function buildPaymentRequest() {
    if (!window.PaymentRequest) {
        return null;
    }

    const supportedInstruments = [{
        supportedMethods: "https://mercury-uat.phonepe.com/transact/pay",   //For UAT or PreProd
        data: {
            //url: redirectUrl //To pass redirect url from v4/debit response
            url: "upi://[email protected]&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: "1111-71ca4e9f-748c-4de7-af7b-a84f3da75b4e-temp", //A unique id [optional], if not passed browser will generate one
        total: {
            label: 'Total',
            amount: {
                currency: 'INR',
                value: '100',
            }
        }
    };

    try {
        request = new PaymentRequest(supportedInstruments, details);
        if (typeof request.hasEnrolledInstrument === ‘ function’) {
            request.hasEnrolledInstrument().then(function(result) {
                if (result) {
                    //Show “pay by Phonepe” button in payment options
                }
            }).catch(function(err) {
                handleError(err); //handle error
            });
        } else {
            request.canMakePayment().then(function(result) {
                if (result) {
                    //Show “pay by Phonepe” button in payment options
                }
            }).catch(function(err) {
                handleError(err);
            });
        }

    } catch (e) {
        handleError(e);
    }
}

/**
 * Create payment request object for Phonepe payment.
 */
function onCheckoutClick() {
    buildPaymentRequest();
}


/**
 * Handles the response from PaymentRequest.show().
 */
function handlePaymentResponse(response) {
    //Check if the response.details.result is success
    //get the transaction ref id from the response
    //use transaction refId and merchant Id to fetch the status
    var fetchOptions = {
        method: 'POST',
        credentials: 'include',
        body: JSON.stringify(payloadForFetch)
    };
    var serverPaymentRequest = new Request('secure/payment/endpoint'); //endpoint to fetch the status from server
    fetch(serverPaymentRequest, fetchOptions).then(fetchResponse => {
        if (fetchResponse.status < 400) {
            response.complete("success"); //notifies the user agent that the user interaction is over, and causes any remaining user interface to be closed
        } else {
            response.complete("fail"); //notifies the user agent that the user interaction is over, and causes any remaining user interface to be closed
        };
    }).catch(reason => {
        response.complete("fail"); //notifies the user agent that the user interaction is over, and causes any remaining user interface to be closed
    });
}

/**
 * Click event listener for “pay by Phonepe” button
 * Launch payment request for Phonepe payment.
 */
function onPayByPhonePeClick() {
    if (!window.PaymentRequest || !request) {
        return;
    }
    let paymentTimeout = window.setTimeout(function() {
        window.clearTimeout(paymentTimeout);
        request.abort()
            .then(function() {
                console.log('Payment timed out');
            })
            .catch(function() {
                console.log('Unable to abort the transaction');
            });
    }, 10 * 60 * 1000); /* 10 minutes */
    try {
        request.show()
            .then(function(response) {
                window.clearTimeout(paymentTimeout);
                handlePaymentResponse(response); // Handle response from browser.
            })
            .catch(function(err) {
                handleError(err); //handle error
            });
    } catch (e) {
        handleError(e);
    }
}
let request;

/**
 * Initializes the payment request object.
 * @return {PaymentRequest} The payment request object.
 */
function buildPaymentRequest() {
    if (!window.PaymentRequest) {
        return null;
    }

    const supportedInstruments = [{
        supportedMethods: "https://mercury.phonepe.com/transact/pay",   //For Production
        data: {
            //url: redirectUrl //To pass redirect url from v4/debit response
            url: "upi://[email protected]&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: "1111-71ca4e9f-748c-4de7-af7b-a84f3da75b4e-temp", //A unique id [optional], if not passed browser will generate one
        total: {
            label: 'Total',
            amount: {
                currency: 'INR',
                value: '100',
            }
        }
    };

    try {
        request = new PaymentRequest(supportedInstruments, details);
        if (typeof request.hasEnrolledInstrument === ‘ function’) {
            request.hasEnrolledInstrument().then(function(result) {
                if (result) {
                    //Show “pay by Phonepe” button in payment options
                }
            }).catch(function(err) {
                handleError(err); //handle error
            });
        } else {
            request.canMakePayment().then(function(result) {
                if (result) {
                    //Show “pay by Phonepe” button in payment options
                }
            }).catch(function(err) {
                handleError(err);
            });
        }

    } catch (e) {
        handleError(e);
    }
}

/**
 * Create payment request object for Phonepe payment.
 */
function onCheckoutClick() {
    buildPaymentRequest();
}


/**
 * Handles the response from PaymentRequest.show().
 */
function handlePaymentResponse(response) {
    //Check if the response.details.result is success
    //get the transaction ref id from the response
    //use transaction refId and merchant Id to fetch the status
    var fetchOptions = {
        method: 'POST',
        credentials: 'include',
        body: JSON.stringify(payloadForFetch)
    };
    var serverPaymentRequest = new Request('secure/payment/endpoint'); //endpoint to fetch the status from server
    fetch(serverPaymentRequest, fetchOptions).then(fetchResponse => {
        if (fetchResponse.status < 400) {
            response.complete("success"); //notifies the user agent that the user interaction is over, and causes any remaining user interface to be closed
        } else {
            response.complete("fail"); //notifies the user agent that the user interaction is over, and causes any remaining user interface to be closed
        };
    }).catch(reason => {
        response.complete("fail"); //notifies the user agent that the user interaction is over, and causes any remaining user interface to be closed
    });
}

/**
 * Click event listener for “pay by Phonepe” button
 * Launch payment request for Phonepe payment.
 */
function onPayByPhonePeClick() {
    if (!window.PaymentRequest || !request) {
        return;
    }
    let paymentTimeout = window.setTimeout(function() {
        window.clearTimeout(paymentTimeout);
        request.abort()
            .then(function() {
                console.log('Payment timed out');
            })
            .catch(function() {
                console.log('Unable to abort the transaction');
            });
    }, 10 * 60 * 1000); /* 10 minutes */
    try {
        request.show()
            .then(function(response) {
                window.clearTimeout(paymentTimeout);
                handlePaymentResponse(response); // Handle response from browser.
            })
            .catch(function(err) {
                handleError(err); //handle error
            });
    } catch (e) {
        handleError(e);
    }
}

Sample Response in the Callback function (for show method)

// paymentDetails sample 
{
   requestId: "{{PAYMENT_REQUEST_ID}}",            // Unique id passed in details/generated by browser
   methodName: "{{}}",                             // String MerchantID
   details: {
          txnId: "YBLca62648cd325400a8cc7aef84a7a5b96”,           //transaction id generated by the app
          txnRef: "TX1581683875995",          //transaction ref id, this needs to be used to fetch status
          Status: "Success”,                  //payment status
          responseCode: "00"
     },             
   shippingAddress: null,  // Number - In Paisa
   payerName: null, // String
   payerEmail: null,
   payerPhone: null
}

Some links for reference: