When you call show() method on a PaymentRequest object, it returns the
payment request response. After the response is received, it must be sent back
to the retailer server. There, the transaction ID is verified against
PSP to ensure the transaction was successful. The UI is then updated for the
user based on the verification status.
To aid in verification, the response from Google Pay contains the fields required by NPCI. For more information, see the NPCI UPI Linking Specification. Additionally, Google Pay provides the flexibility of a customized response. Refer to Google Pay response section for detailed response fields.
The following example shows how the browser response is converted to a JSON string and sent back to the retailer server, then further processed. After receiving the server response, it will complete the payment by logging a message in the console.
/**
* Process the response from browser.
*
* @private
* @param {PaymentResponse} instrument The payment instrument that was authed.
*/
function processResponse(instrument) {
var instrumentString = instrumentToJsonString(instrument);
console.log(instrumentString);
fetch('/buy', {
method: 'POST',
headers: new Headers({'Content-Type': 'application/json'}),
body: instrumentString,
})
.then(function(buyResult) {
if (buyResult.ok) {
return buyResult.json();
}
console.log('Error sending instrument to server.');
})
.then(function(buyResultJson) {
completePayment(instrument, buyResultJson.status, buyResultJson.message);
})
.catch(function(err) {
console.log('Unable to process payment. ' + err);
});
}
/**
* Notify browser that the instrument authorization has completed.
*
* @private
* @param {PaymentResponse} instrument The payment instrument that was authed.
* @param {string} result Whether the auth was successful. Should be either
* 'success' or 'fail'.
* @param {string} msg The message to log in console.
*/
function completePayment(instrument, result, msg) {
instrument.complete(result)
.then(function() {
console.log('Payment succeeds.');
console.log(msg);
})
.catch(function(err) {
console.log(err);
});
}
Utility methods
This section will cover all of the utility methods used in the provided sample codes.
A utility method to show the alert dialog when the user cannot make payment with the Google Pay.
/** Handle Google Pay not ready to pay case. */
function handleNotReadyToPay() {
alert('Google Pay is not ready to pay.');
}
Utility method to convert paymentResponse to JSON string.
* Converts the payment response into a JSON string.
*
* @private
* @param {PaymentResponse} paymentResponse The payment response to convert.
* @return {string} The string representation of the payment response.
*/
function paymentResponseToJsonString(paymentResponse) {
// PaymentResponse is an interface, JSON.stringify works only on dictionaries.
var paymentResponseDictionary = {
methodName:paymentResponse.methodName,
details:paymentResponse.details,
shippingAddress: addressToJsonString(paymentResponse.shippingAddress),
shippingOption: paymentResponse.shippingOption,
payerName: paymentResponse.payerName,
payerPhone: paymentResponse.payerPhone,
payerEmail: paymentResponse.payerEmail,
};
return JSON.stringify(paymentResponseDictionary, undefined, 2);
}