Sample Code

{  
   "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"
}
{
  "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"
  }
}
<!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 PreProd: "https://mercury-uat.phonepe.com/transact/pay",
        // For Prod: "https://mercury-t2.phonepe.com/transact/pay",

        data: {
            url: redirectUrl        //redirect url from v4/debit response
        }
    }];
  
    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;
    }
 
      try {
        request.show()
          .then(handlePaymentResponse)
          .catch(function(err) {
            handleError(err);          //handle error
       });
      } catch (e) {
        handleError(e);
      }
  }
// 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: