Search…
Google Pay elements
Learn how to use Google Pay elements.
Use DigitalRiver.js to create a Google Pay element and interact with Google Pay.‌

Creating a Google Pay element

Example
1
var paymentRequestData = digitalriver.paymentRequest({
2
country: "US",
3
currency: "USD",
4
total: {
5
label: "Order Total",
6
amount: 100
7
},
8
displayItems: lineItems,
9
shippingOptions: shippingOptions,
10
style: {
11
buttonType: "plain",
12
buttonColor: "dark",
13
buttonLanguage: "en"
14
}
15
});
16
17
18
19
var googlepay = digitalriver.createElement('googlepay', paymentRequestData);
Copied!

Google Pay element styles and customization

Button type

Choose one of the following button types:

Button color

Choose one of the following button colors:

Google Pay element functions

googlepay.canMakePayment();

Example
1
if(googlepay.canMakePayment()) {
2
3
4
}
Copied!

googlepay.mount();

Call this function to place the created Google Pay element on your page.
Example
1
<div id="google-pay"></div>
2
3
4
if(googlepay.canMakePayment()) {
5
googlepay.mount('google-pay');
6
}
Copied!

googlepay.show();

Call this function to show the Google Pay Payment Request interface. This will automatically happen when using the element. If you'd like to trigger using another mechanism, you must call it as part of the user interaction (click handler).
Example
1
googlepay.show();
Copied!

googlepay.unmount();

Call this function to remove the Google Pay element from your page. The element may be re-added to your page by calling mount().
Example
1
googlepay.unmount();
Copied!

googlepay.destroy();

Call this function to remove the Google Pay element from your page as well as remove its functionality. You cannot re-add the destroyed element to your page via mount().
Example
1
googlepay.destroy();
Copied!

googlepay.update();

Call this function to update the Google Pay element's data.
Example
1
var paymentRequest = digitalriver.paymentRequest({
2
country: "US",
3
currency: "USD",
4
total: {
5
label: "Order Total",
6
amount: 100
7
},
8
displayItems: lineItems,
9
shippingOptions: shippingOptions,
10
style: {
11
buttonType: "plain",
12
buttonColor: "dark",
13
buttonLanguage: "en"
14
}
15
});
16
17
18
googlepay.update(paymentRequest);
Copied!

Google Pay element events — googlepay.on('event', handler);

The Google Pay Element can receive the following events by creating an event listener. Use this function to listen to events that can be used to build and enhance your purchase flow.
Event
Triggered When
ready
The created element is loaded and ready to accept an update request.
click
A shopper clicked the element's button.
cancel
The customer has canceled the experience.
shippingoptionchange
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).
shippingaddresschange
The customer has chosen a different address than was previously selected. You should use this data to re-price your order totals (if applicable).
source
The customer has authorized the payment and a source, and DigitalRiver.js returned its associated data.

Source

The Source event emits when the Customer completes their interaction with the Payment Request interface, and they create a Payment Source. The emitted object will be a Payment Request Response object.
Example
1
googlepay.on('source', function(result) {
2
var source = result.source;
3
4
//pass the source to your back end for further processing
5
}
Copied!

Ready

The Ready event emits when the Google Pay Element has loaded and is available to take an update() call.
Example
1
googlepay.on('ready', function(event) {
2
//google pay can accept an update call
3
}
Copied!
Response object
1
{
2
elementType: "googlepay"
3
}
Copied!

Click

The Click event emits when the customer clicks a Google Pay Element.
Example
1
googlepay.on('click', function(event) {
2
//do stuff
3
}
Copied!
Response object
1
{
2
elementType: "googlepay"
3
}
Copied!

Cancel

The Cancel event emits when the customer closes the Google Pay Element Payment Request interface.
Example
1
googlepay.on('shippingoptionchange', function(event) {
2
var shippingOption = event.shippingOption;
3
4
5
//create a Payment Request Details Update Object
6
var newDetails = createPaymentRequestDetailsUpdateObject();
7
event.updateWith(newDetails);
8
9
});
Copied!
Response object
1
{
2
"shippingOption": {
3
"id": "overnight-shipping",
4
"label": "Overnight Shipping",
5
"amount": 100,
6
"detail": "Get this in 1 business day."
7
},
8
"updateWith": function(data) {
9
callback(data);
10
}
11
}
Copied!

Shipping option change

The Shipping Option Change event emits when the Customer selects a different Shipping Option within the Payment Request interface. The event will emit the following object structure.
Key
Type
Description
updateWith
Function
Calling this function with a Payment Request Details Update object merges your updates into the current Payment Request object.
shippingOption
A Payment Request Shipping Option object contains the details of the customer's chosen Shipping Option.
Example
1
googlepay.on('shippingaddresschange', function(event) {
2
var shippingAddress = event.shippingAddress;
3
4
5
//create a Payment Request Details Update Object
6
var newDetails = createPaymentRequestDetailsUpdateObject();
7
8
event.updateWith(newDetails);
9
});
Copied!
Response oject
Response object
1
{
2
shippingAddress: {
3
"name": "John Smith",
4
"firstName": "John",
5
"lastName": "Smith",
6
"phone": "952-111-1111",
7
"email": "[email protected]",
8
"address": {
9
"line1": "10380 Bren Rd W",
10
"line2": "string",
11
"city": "Minnetonka",
12
"postalCode": "55129",
13
"state": "MN",
14
"country": "US"
15
}
16
},
17
"updateWith": function(data) {
18
callback(data);
19
}
20
}
Copied!

Shipping address change

The Shipping Address Change emits when the Customer selects a different Shipping Address within the Payment Request interface. The event will emit the following object structure.
Key
Type
Description
updateWith
Function
Calling this function with a Payment Request Details Update object merges your updates into the current Payment Request object.
shippingAddress
A Shipping Address object contains the details of the customer's chosen Shipping Option.
Example
1
googlepay.on('shippingaddresschange', function(event) {
2
var shippingAddress = event.shippingAddress;
3
4
5
//create a Payment Request Details Update Object
6
var newDetails = createPaymentRequestDetailsUpdateObject();
7
8
event.updateWith(newDetails);
9
});
Copied!
Response object
1
{
2
shippingAddress: {
3
"name": "John Smith",
4
"firstName": "John",
5
"lastName": "Smith",
6
"phone": "952-111-1111",
7
"email": "[email protected]",
8
"address": {
9
"line1": "10380 Bren Rd W",
10
"line2": "string",
11
"city": "Minnetonka",
12
"postalCode": "55129",
13
"state": "MN",
14
"country": "US"
15
}
16
},
17
"updateWith": function(data) {
18
callback(data);
19
}
20
}
Copied!
Last modified 1yr ago