Show payment UI

After creating the PaymentRequest object, the payment can be initiated by calling the show() method.

The following sample code shows how to implement a function used when a user taps the Buy button in the UI. When a user clicks the Buy button, the PaymentRequest object is created and checks for the user’s readiness to make payment.

Based on the parameters defined in create payment request object and check user readiness, the data in the following code snippet is displayed.

In the code snippet, the canMakePaymentPromise() method is used to check for user readiness and displays the result. If the result shows that the Google Pay is a supported payment method, a payment request UI is shown to the user.

/** Launches payment request flow when user taps on buy button. */
function onBuyClicked() {
  if (!window.PaymentRequest) {
    console.log('Web payments are not supported in this browser.');
    return;
  }

  // Create supported payment method.
  const supportedInstruments = [
    {
      supportedMethods: ['https://tez.google.com/pay'],
      data: {
        pa: 'merchant-vpa@xxx',
        pn: 'Merchant Name',
        tr: '1234ABCD',  // Your custom transaction reference ID
        url: 'https://url/of/the/order/in/your/website',
        mc: '1234', //Your merchant category code
        tn: 'Purchase in Merchant',
      },
    }
  ];

  // Create order detail data.
  const details = {
    total: {
      label: 'Total',
      amount: {
        currency: 'INR',
        value: '10.01', // sample amount
      },
    },
    displayItems: [{
      label: 'Original Amount',
      amount: {
        currency: 'INR',
        value: '10.01',
      },
    }],
  };

  // Create payment request object.
  let request = null;
  try {
    request = new PaymentRequest(supportedInstruments, details);
  } catch (e) {
    console.log('Payment Request Error: ' + e.message);
    return;
  }
  if (!request) {
    console.log('Web payments are not supported in this browser.');
    return;
  }

  var canMakePaymentPromise = checkCanMakePayment(request);
  canMakePaymentPromise
      .then((result) => {
        showPaymentUI(request, result);
      })
      .catch((err) => {
        console.log('Error calling checkCanMakePayment: ' + err);
      });
}

Display Google Pay Play Store page

The following code shows how to display a payment request UI and handle the case where the user cannot make payment with Google Pay.


/**
* Show the payment request UI.
*
* @private
* @param {PaymentRequest} request The payment request object.
* @param {Promise} canMakePayment The promise for whether can make payment.
*/
function showPaymentUI(request, canMakePayment) {
 if (!canMakePayment) {
   handleNotReadyToPay();
   return;
 }

 // Set payment timeout.
 let paymentTimeout = window.setTimeout(function() {
   window.clearTimeout(paymentTimeout);
   request.abort()
       .then(function() {
         console.log('Payment timed out after 20 minutes.');
       })
       .catch(function() {
         console.log('Unable to abort, user is in the process of paying.');
       });
 }, 20 * 60 * 1000); /* 20 minutes */

 request.show()
     .then(function(instrument) {

       window.clearTimeout(paymentTimeout);
       processResponse(instrument); // Handle response from browser.
     })
     .catch(function(err) {
       console.log(err);
     });
}