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);
});
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 Payment Request Details Update object.
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 following example shows how to place a Google Pay element on your page. Use this in conjunction with the DigitalRiver.js reference guide to build your solution.
