The Google Pay element will surface events, which will give you more information to facilitate what is happening within the Google Pay experience.
These events include:
Event
Triggered When
The created element is loaded and ready to accept an update request.
A shopper clicked the element's button.
The customer has canceled the experience.
The customer has chosen a different shipping option than was previously selected. You should use this data to re-price your order totals (if applicable).
The customer has chosen a different address than was previously selected. You should use this data to re-price your order totals (if applicable).
The customer has authorized the payment and a source, and DigitalRiver.js returned associated data.
Note: To use Google Pay, you must listen to, at minimum, the Source event.
googlepay.on('source', function(event) {
var source = result.source;
//pass the source to your back end for further processing.
//once verified that the source is created successfully, complete the Google Pay session by answering with a success message
event.complete('success');
});
googlepay.on('shippingaddresschange', function(event) {
var shippingAddress = event.shippingAddress;
//create a Payment Request Details Update Object
var newDetails = createPaymentRequestDetailsUpdateObject();
event.updateWith(newDetails);
});
Place the elements on the page
The following example shows how to place the elements on the page. For more information on placing elements on a page, see Google Pay example.
if (googlepay.canMakePayment()) {
googlepay.mount("googlepay-element");
document.getElementById('googlepay-element').style.display = 'block';
}
Receive the source event and use the source
googlepay.on('source', function(event) {
var source = result.source;
//pass the source to your back end for further processing.
//once verified that the source is created successfully, complete the Google Pay session by answering with a success message
event.complete('success');
});
Google Pay example
The source event will surface a Source plus other details provided from Google Pay, such as the shopper's billing address, shipping address, and contact information, in the response.
The Shipping Address Changed and Shipping Method Changed events require a response with updated details to present to the Shopper. This system expects the response to be a .
The address object must contain and data that .
Once authorized, you can use the source by or a for multiple uses.
The following example shows how to place a Google Pay element on your page. Use this in conjunction with the to build your solution.