Configuring Google Pay
Learn how to configure Google Pay for DigitalRiver.js with Elements.
If you're using DigitalRiver.js with Elements, you can create a Google Pay payment method for your app or website in two easy steps:
After setting up your library per the DigitalRiver.js reference guide, create a Google Pay element with any customizations you would like to apply.
var paymentRequestData = digitalriver.paymentRequest({
country: "US",
currency: "USD",
total: {
label: "Order Total",
amount: 100
},
displayItems: lineItems,
shippingOptions: shippingOptions,
style: {
buttonType: "plain",
buttonColor: "dark",
buttonLanguage: "en"
},
"sessionId": "9f180964-9da4-43ac-b8e0-ae54d832b03c"
});
var googlepay = digitalriver.createElement('googlepay', paymentRequestData);
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 of updated details to present to the Shopper. This system expects the response to be in the format of a Payment Request Details Update object.
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';
}
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');
});
The source event will surface a Source plus other details provided from Google Pay like the shopper's billing address, shipping address, and contact information in the response.
The
address object must contain postal code and state/province data that adheres to a standardized format.Source example
{
"clientId": "gc",
"channelId": "drdod15",
"liveMode": false,
"id": "a8bc045d-5aa0-44e0-9082-63244af3685c",
"clientSecret": "9864191e-7c43-4b6a-808d-312f049adfbb_addd191e-7c43-4b6a-808d-312f049adfbb",
"type": "googlePay",
"reusable": false,
"owner": {
"firstName": "John",
"lastName": "Doe",
"email": "[email protected]",
"address": {
"line1": "10380 Bren Road W",
"line2": "",
"city": "Minnetonka",
"state": "MN",
"country": "US",
"postalCode": "55343"
}
},
"state": "chargeable",
"creationIp": "67.216.237.4",
"createdTime": "2019-04-26T16:28:55.763Z",
"updatedTime": "2019-04-26T16:28:55.763Z",
"flow": "standard",
"googlePay": {
"expirationMonth": 2,
"expirationYear": 2022,
"lastFourDigits": "1111",
"paymentIdentifier": "13159976250000000000000500658103",
"brand": "Visa"
}
}
Response example
{
"error": null,
"source": {
"clientId": "gc",
"channelId": "drdod15",
"liveMode": false,
"id": "9864191e-7c43-4b6a-808d-312f049adfbb",
"clientSecret": "9864191e-7c43-4b6a-808d-312f049adfbb_addd191e-7c43-4b6a-808d-312f049adfbb",
"type": "googlePay",
"reusable": false,
"owner": {
"firstName": "John",
"lastName": "Doe",
"email": "[email protected]",
"phoneNumber": "000-000-0000",
"address": {
"line1": "10380 Bren Road W",
"line2": "",
"city": "Minnetonka",
"state": "MN",
"country": "US",
"postalCode": "55343"
}
},
"state": "chargeable",
"creationIp": "209.87.174.4",
"createdTime": "2019-05-22T03:40:32.779Z",
"updatedTime": "2019-05-22T03:40:32.779Z",
"flow": "standard",
"googlePay": {
"expirationMonth": 2,
"expirationYear": 2022,
"paymentIdentifier": "13159976250000000000000500658103",
"brand": "Visa",
"lastFourDigits": "1111"
}
},
"billingAddress": {
"address": {
"line1": "10380 Bren Road W",
"line2": "",
"city": "Minnetonka",
"postalCode": "55343",
"state": "MN",
"country": "US"
},
"name": "John Doe",
"firstName": "John",
"lastName": "Doe",
"phone": "+16519895326",
"email": "[email protected]"
},
"shippingAddress": {
"name": "John Doe",
"firstName": "John",
"lastName": "Doe",
"phone": "+16519895326",
"email": "[email protected]",
"address": {
"line1": "10380 Bren Road W",
"line2": "",
"city": "Minnetonka",
"state": "MN",
"country": "US",
"postalCode": "55343"
}
},
"contactInformation": {
"name": "John Doe",
"phone": "+16519895326",
"email": "[email protected]"
},
"elementType": "googlepay"
}
Once authorized, you can use the source by either attaching it to a checkout or attaching it to a customer for multiple uses.
POST /checkouts/{id}
{
"customerId": "5774321008",
"sourceId": "src_a78cfeae-f7ae-4719-8e1c-d05ec04e4d37"
}
POST /customers/{id}/sources/{sourcesId}
{
"id": "5774321008",
"sourceId": "src_a78cfeae-f7ae-4719-8e1c-d05ec04e4d37"
}
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.
HTML
<script src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
<div id="googlepay-element"></div>
var digitalriver = new DigitalRiver('YOUR_API_KEY');
var googlePrData = getBasePrData();
var googlePayRequestData = digitalriver.paymentRequest(googlePrData);
var googlepay = digitalriver.createElement("googlepay", googlePayRequestData);
if (googlepay.canMakePayment()) {
googlepay.mount("googlepay-element");
document.getElementById('googlepay-element').style.display = 'block';
}
googlepay.on('source', function(event) {
console.log("Received Event", event);
console.log("GOT GOOGLE PAY SOURCE");
event.complete('success');
var source = event.source;
console.log(source);
});
googlepay.on('shippingaddresschange', function(event) {
console.log("Received Shipping Address Change Event", event);
var shippingAddress = event.shippingAddress;
console.log("Shipping Address", shippingAddress);
var newDetails = getPrUpdateObject();
console.log('Updating PR With', newDetails);
event.updateWith(newDetails);
});
googlepay.on('shippingoptionchange', function(event) {
console.log("Received Shipping Option Change Event", event);
var shippingOption = event.shippingOption;
console.log("Shipping Option", shippingOption);
var newDetails = getPrUpdateObject();
console.log('Updating PR With', newDetails);
event.updateWith(newDetails);
});
googlepay.on('click', function(event) {
console.log("Received Event", event);
});
function getBasePrData() {
return {
country: "US",
currency: "USD",
total: {
label: "Demo Total",
amount: 300
},
displayItems: [{
amount: 100,
label: "Item"
}, {
amount: 200,
label: "Better Item"
}],
requestShipping: true,
shippingOptions: [{
id: "free-shipping",
label: "Free Shipping",
detail: "Arrives in 5 to 7 days",
amount: 0
}, {
id: "overnight-shipping",
label: "Overnight Shipping",
detail: "Arrives in 5 to 7 days",
amount: 1000
}],
style: {
buttonType: "plain",
buttonColor: "light-outline",
buttonLanguage: "en"
},
waitOnClick: false
};
}
function getPrUpdateObject() {
return {
"status": "success",
"total": {
"label": "New Total",
"amount": 1020.10
},
"displayItems": [{
"amount": 1000,
"label": "Big Screen TV",
},
{
"amount": 20.10,
"label": "Shipping and Handling"
}
],
"shippingOptions": [{
id: "free-shipping",
label: "Free Shipping",
detail: "Arrives in 5 to 7 days",
amount: 0,
selected: true
}, {
id: "overnight-shipping",
label: "Overnight Shipping",
detail: "Arrives in 5 to 7 days",
amount: 1000
}]
}
}
Last modified 9mo ago