Google Pay

Search…
Google Pay
The Google Pay payment method allows a merchant to request any credit or debit card stored in their customer’s Google account.
This payment method adds another layer of ease-of-purchase for consumers to quickly complete transactions from their Google Wallet. All currencies are available in supported countries.
This guide describes how to create and customize a Google Pay element for your shoppers.
You can find an example of integration here.
Configuring Google Pay for DigitalRiver.js
Create a Google Pay payment method for your app or website in two easy steps:
​Step 1: Create a Google Pay source using DigitalRiver.js​
​Step 2: Use the authorized source​
Step 1: Create a Google Pay source using Digital River.js
To create a Google Pay payment source, please follow the DigitalRiver.js reference guide.
Create a Google Pay element
After setting up your library per the DigitalRiver.js reference guide, create a Google Pay element with any customizations you would like to apply.
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
        "sessionId": "9f180964-9da4-43ac-b8e0-ae54d832b03c"
16
    });
17
   
18
   
19
var googlepay = digitalriver.createElement('googlepay', paymentRequestData);
Copied!
Configure the Google Pay element to handle events
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
​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 associated data.
Note: To use Google Pay, you must listen to, at minimum, the Source event.
1
googlepay.on('source', function(event) {
2
    var source = result.source;
3
  
4
    //pass the source to your back end for further processing. 
5
 
6
 
7
    //once verified that the source is created successfully, complete the Google Pay session by answering with a success message
8
    event.complete('success');
9
});
10
 
11
 
12
googlepay.on('shippingaddresschange', function(event) {
13
    var shippingAddress = event.shippingAddress;
14
   
15
   
16
    //create a Payment Request Details Update Object
17
    var newDetails = createPaymentRequestDetailsUpdateObject();
18
       
19
    event.updateWith(newDetails);
20
});
Copied!
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.
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.
1
if (googlepay.canMakePayment()) {
2
    googlepay.mount("googlepay-element");
3
    document.getElementById('googlepay-element').style.display = 'block';
4
}
Copied!
Receive the source event and use the source
1
googlepay.on('source', function(event) {
2
    var source = result.source;
3
  
4
    //pass the source to your back end for further processing. 
5
 
6
 
7
    //once verified that the source is created successfully, complete the Google Pay session by answering with a success message
8
    event.complete('success');
9
});
Copied!
Google Pay example
The source event will surface a Source plus other details provided from Google Pay like the shopper's billing address, shipping address, and the contact information in the response.
Source example
1
{
2
    "clientId": "gc",
3
    "channelId": "drdod15",
4
    "liveMode": false,
5
    "id": "a8bc045d-5aa0-44e0-9082-63244af3685c",
6
    "clientSecret": "9864191e-7c43-4b6a-808d-312f049adfbb_addd191e-7c43-4b6a-808d-312f049adfbb",
7
    "type": "googlePay",
8
    "reusable": false,
9
    "owner": {
10
        "firstName": "John",
11
        "lastName": "Doe",
12
        "email": "[email protected]",
13
        "address": {
14
            "line1": "10380 Bren Road W",
15
            "line2": "",
16
            "city": "Minnetonka",
17
            "state": "MN",
18
            "country": "US",
19
            "postalCode": "55343"
20
        }
21
    },
22
    "state": "chargeable",
23
    "creationIp": "67.216.237.4",
24
    "createdTime": "2019-04-26T16:28:55.763Z",
25
    "updatedTime": "2019-04-26T16:28:55.763Z",
26
    "flow": "standard",
27
    "googlePay": {
28
        "expirationMonth": 2,
29
        "expirationYear": 2022,
30
        "lastFourDigits": "1111",
31
        "paymentIdentifier": "13159976250000000000000500658103",
32
        "brand": "Visa"
33
    }
34
}
Copied!
Response example
1
{
2
    "error": null,
3
    "source": {
4
        "clientId": "gc",
5
        "channelId": "drdod15",
6
        "liveMode": false,
7
        "id": "9864191e-7c43-4b6a-808d-312f049adfbb",
8
    "clientSecret": "9864191e-7c43-4b6a-808d-312f049adfbb_addd191e-7c43-4b6a-808d-312f049adfbb",          
9
        "type": "googlePay",
10
        "reusable": false,
11
        "owner": {
12
            "firstName": "John",
13
            "lastName": "Doe",
14
            "email": "[email protected]",
15
            "phoneNumber": "000-000-0000",
16
            "address": {
17
                "line1": "10380 Bren Road W",
18
                "line2": "",
19
                "city": "Minnetonka",
20
                "state": "MN",
21
                "country": "US",
22
                "postalCode": "55343"
23
            }
24
        },
25
        "state": "chargeable",
26
        "creationIp": "209.87.174.4",
27
        "createdTime": "2019-05-22T03:40:32.779Z",
28
        "updatedTime": "2019-05-22T03:40:32.779Z",
29
        "flow": "standard",
30
        "googlePay": {
31
            "expirationMonth": 2,
32
            "expirationYear": 2022,
33
            "paymentIdentifier": "13159976250000000000000500658103",
34
            "brand": "Visa",
35
            "lastFourDigits": "1111"
36
        }
37
    },
38
    "billingAddress": {
39
        "address": {
40
            "line1": "10380 Bren Road W",
41
            "line2": "",
42
            "city": "Minnetonka",
43
            "postalCode": "55343",
44
            "state": "MN",
45
            "country": "US"
46
        },
47
        "name": "John Doe",
48
        "firstName": "John",
49
        "lastName": "Doe",
50
        "phone": "+16519895326",
51
        "email": "[email protected]"
52
    },
53
    "shippingAddress": {
54
        "name": "John Doe",
55
        "firstName": "John",
56
        "lastName": "Doe",
57
        "phone": "+16519895326",
58
        "email": "[email protected]",
59
        "address": {
60
            "line1": "10380 Bren Road W",
61
            "line2": "",
62
            "city": "Minnetonka",
63
            "state": "MN",
64
            "country": "US",
65
            "postalCode": "55343"
66
        }
67
    },
68
    "contactInformation": {
69
        "name": "John Doe",
70
        "phone": "+16519895326",
71
        "email": "[email protected]"
72
    },
73
    "elementType": "googlepay"
74
}
Copied!
Step 2: Use the authorized source
Once authorized, you can use the source by attaching it to a cart or attaching it to a shopper.
Option 1. Attach the source to a cart
POST /v1/shoppers/me/carts/active/apply-payment-method
1
{
2
  "paymentMethod": {
3
    "sourceId": "e7ba0595-059c-460c-bad8-2812123b9313"
4
  }
5
}
Copied!
Option 2. Attach the source to a shopper
POST /v1/shoppers/me/payment-options
1
{
2
  "paymentOption": {
3
    "nickName": "My Token",
4
    "isDefault": "true",
5
    "sourceId": "61033d62-c0f4-4a7e-b844-07daf26ba84e"
6
  }
7
}
Copied!
Google Pay example
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
1
<script src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
2
<div id="googlepay-element"></div>
Copied!
1
var digitalriver = new DigitalRiver('YOUR_API_KEY');
2
 
3
 
4
var googlePrData = getBasePrData();
5
var googlePayRequestData = digitalriver.paymentRequest(googlePrData);
6
 
7
var googlepay = digitalriver.createElement("googlepay", googlePayRequestData);
8
if (googlepay.canMakePayment()) {
9
    googlepay.mount("googlepay-element");
10
    document.getElementById('googlepay-element').style.display = 'block';
11
}
12
 
13
googlepay.on('source', function(event) {
14
    console.log("Received Event", event);
15
    console.log("GOT GOOGLE PAY SOURCE");
16
    event.complete('success');
17
 
18
    var source = event.source;
19
    console.log(source);
20
});
21
 
22
googlepay.on('shippingaddresschange', function(event) {
23
    console.log("Received Shipping Address Change Event", event);
24
 
25
    var shippingAddress = event.shippingAddress;
26
    console.log("Shipping Address", shippingAddress);
27
 
28
    var newDetails = getPrUpdateObject();
29
    console.log('Updating PR With', newDetails);
30
 
31
    event.updateWith(newDetails);
32
});
33
 
34
googlepay.on('shippingoptionchange', function(event) {
35
    console.log("Received Shipping Option Change Event", event);
36
 
37
    var shippingOption = event.shippingOption;
38
    console.log("Shipping Option", shippingOption);
39
 
40
    var newDetails = getPrUpdateObject();
41
    console.log('Updating PR With', newDetails);
42
 
43
    event.updateWith(newDetails);
44
});
45
 
46
googlepay.on('click', function(event) {
47
    console.log("Received Event", event);
48
});
49
 
50
function getBasePrData() {
51
    return {
52
        country: "US",
53
        currency: "USD",
54
        total: {
55
            label: "Demo Total",
56
            amount: 300
57
        },
58
        displayItems: [{
59
            amount: 100,
60
            label: "Item"
61
        }, {
62
            amount: 200,
63
            label: "Better Item"
64
        }],
65
        requestShipping: true,
66
        shippingOptions: [{
67
            id: "free-shipping",
68
            label: "Free Shipping",
69
            detail: "Arrives in 5 to 7 days",
70
            amount: 0
71
        }, {
72
            id: "overnight-shipping",
73
            label: "Overnight Shipping",
74
            detail: "Arrives in 5 to 7 days",
75
            amount: 1000
76
        }],
77
        style: {
78
            buttonType: "plain",
79
            buttonColor: "light-outline",
80
            buttonLanguage: "en"
81
        },
82
        waitOnClick: false
83
    };
84
}
85
 
86
function getPrUpdateObject() {
87
    return {
88
        "status": "success",
89
        "total": {
90
            "label": "New Total",
91
            "amount": 1020.10
92
        },
93
        "displayItems": [{
94
                "amount": 1000,
95
                "label": "Big Screen TV",
96
            },
97
            {
98
                "amount": 20.10,
99
                "label": "Shipping and Handling"
100
            }
101
        ],
102
        "shippingOptions": [{
103
            id: "free-shipping",
104
            label: "Free Shipping",
105
            detail: "Arrives in 5 to 7 days",
106
            amount: 0,
107
            selected: true
108
        }, {
109
            id: "overnight-shipping",
110
            label: "Overnight Shipping",
111
            detail: "Arrives in 5 to 7 days",
112
            amount: 1000
113
        }]
114
    }
115
}
Copied!
Supported markets
For information on supported markets and currencies for Drop-in and DigitalRiver.js, go to: 
Payment Method Guide: digitalriver.com/payment-method-guide​
Country Guide: digitalriver.com/country-guide/​
Credit Cards
Klarna
Last modified 1mo ago
Copy link
Contents
Configuring Google Pay for DigitalRiver.js
Step 1: Create a Google Pay source using Digital River.js
Step 2: Use the authorized source
Supported markets