Apple Pay

Search…
Apple Pay
Apple Pay provides a fast and secure shopping experience where the consumer can quickly and seamlessly checkout with their Apple Touch authentication without login details or credentials.
Digital River will support Apple Pay as a payment method on the payment service and DigitalRiver.js. Apple Pay is currently available to consumers in 21 countries and currently is supported only on IOS devices (iPhones, Macs, and so on).‌
You can find an example of integration here (only viewable on Apple devices).
Configuring Apple Pay for DigitalRiver.js
Create an Apple Pay payment method for your app or website in three easy steps:‌
​Step 1: Submit domain for Apple validation​
​Step 2: Create an Apple Pay source using DigitalRiver.js​
​Step 3: ​Use the authorized source​
Step 1: Submit domain for Apple validation
To offer Apple Pay on your website, you need to validate your domain with Apple before you can accept transactions. To complete the validation:
1.
​Click to Download the apple-developer-merchantid-domain-association file.
2.
Save the file to the following location on the domain where you want to offer Apple Pay:

/.well-known/apple-developer-merchantid-domain-association

Repeat this step for each additional domain where you want to offer Apple Pay. For example:

https://buy.mydomain.com/.well-known/apple-developer-merchantid-domain-association 
https://shop.mydomain.com/.well-known/apple-developer-merchantid-domain-association 
https://www.mydomain.com/.well-known/apple-developer-merchantid-domain-association

Note: You must serve the apple-developer-merchantid-domain-association file over HTTPS.
3.
Contact your Digital River representative with the list of domains you want to register.
Step 2: Create an Apple Pay source using Digital River.js
‌To create an Apple Pay payment source, please follow the DigitalRiver.js reference guide.‌
Create an Apple Pay element
After setting up your library per the DigitalRiver.js reference guide, create an Apple 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 applepay = digitalriver.createElement('applepay', paymentRequestData);
Copied!
Configure the Apple Pay element to handle events
The Apple Pay element will surface events, which will give you more information to facilitate what is happening within the Apple 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 Apple Pay, you must listen to, at minimum, the Shipping Address Changed and Source events.
1
applepay.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 Apple Pay session by answering with a success message
8
    event.complete('success');
9
});
10
 
11
 
12
applepay.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 the Apple Pay example.
1
if (applepay.canMakePayment()) {
2
    applepay.mount("applepay-element");
3
    document.getElementById('applepay-element').style.display = 'block';
4
}
Copied!
Apple Pay source and response examples
The source event will surface a Source plus other details provided by Apple Pay, like the billing address, shipping address, and contact information of the shopper.
Source example
1
{
2
    "clientId": "gc",
3
    "channelId": "drdod15",
4
    "liveMode": false,
5
    "id": "ee1c11e4-b947-45a2-b9d7-429a1154cfff",
6
    "clientSecret": "ee1c11e4-b947-45a2-b9d7-429a1154cfff_b99c11e4-b947-45a2-b9d7-429a1154cfff",
7
    "type": "applePay",
8
    "reusable": false,
9
    "owner": {
10
        "firstName": "John",
11
        "lastName": "Doe",
12
        "email": "[email protected]",
13
        "address": {
14
            "line1": "10380 Bren Rd W",
15
            "line2": "",
16
            "city": "Hopkins",
17
            "state": "MN",
18
            "country": "US",
19
            "postalCode": "55343"
20
        }
21
    },
22
    "currency": "USD",
23
    "state": "chargeable",
24
    "creationIp": "67.216.233.5",
25
    "createdTime": "2019-04-26T16:30:33.984Z",
26
    "updatedTime": "2019-04-26T16:30:33.984Z",
27
    "flow": "standard",
28
    "applePay": {}
29
}
Copied!
Response example
1
{
2
    "error": null,
3
    "source": {
4
        "clientId": "gc",
5
        "channelId": "drdod15",
6
        "liveMode": false,
7
        "id": "ee1c11e4-b947-45a2-b9d7-429a1154cfff",
8
        "clientSecret": "ee1c11e4-b947-45a2-b9d7-429a1154cfff_b99c11e4-b947-45a2-b9d7-429a1154cfff",
9
        "type": "applePay",
10
        "reusable": false,
11
        "owner": {
12
            "firstName": "John",
13
            "lastName": "Doe",
14
            "email": "[email protected]",
15
            "address": {
16
                "line1": "10380 Bren Rd W",
17
                "line2": "",
18
                "city": "Hopkins",
19
                "state": "MN",
20
                "country": "US",
21
                "postalCode": "55343"
22
            }
23
        },
24
        "currency": "USD",
25
        "state": "chargeable",
26
        "creationIp": "67.216.233.5",
27
        "createdTime": "2019-04-26T16:30:33.984Z",
28
        "updatedTime": "2019-04-26T16:30:33.984Z",
29
        "flow": "standard",
30
        "applePay": {}
31
    },
32
    "billingAddress": {
33
        "address": {
34
            "line1": "10380 Bren Road W",
35
            "line2": "",
36
            "city": "Minnetonka",
37
            "postalCode": "55343",
38
            "state": "MN",
39
            "country": "US"
40
        },
41
        "name": "John Doe",
42
        "firstName": "John",
43
        "lastName": "Doe",
44
        "phone": "+15559895326",
45
        "email": "[email protected]"
46
    },
47
    "shippingAddress": {
48
        "name": "John Doe",
49
        "firstName": "John",
50
        "lastName": "Doe",
51
        "phone": "+15559895326",
52
        "email": "[email protected]",
53
        "address": {
54
            "line1": "10380 Bren Road W",
55
            "line2": "",
56
            "city": "Minnetonka",
57
            "state": "MN",
58
            "country": "US",
59
            "postalCode": "55343"
60
        }
61
    },
62
    "contactInformation": {
63
        "name": "John Doe",
64
        "phone": "+15559895326",
65
        "email": "[email protected]"
66
    },
67
    "elementType": "applePay"
68
}
Copied!
Step 3: Use the authorized source
Once authorized, you can use the source by attaching it 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!
Apple Pay example
The following example shows how to place an Apple Pay element on your page. Use this in conjunction with the DigitalRiver.js reference guide to build your solution.HTML
HTML
1
<script src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
2
<div id="applepay-element"></div>
Copied!
Apple Pay example
1
var digitalriver = new DigitalRiver('YOUR_API_KEY');
2
 
3
 
4
var applePrData = getBasePrData();
5
var applePayRequestData = digitalriver.paymentRequest(applePrData);
6
 
7
var applepay = digitalriver.createElement("applepay", applePayRequestData);
8
if (applepay.canMakePayment()) {
9
    applepay.mount("applepay-element");
10
    document.getElementById('applepay-element').style.display = 'block';
11
}
12
 
13
applepay.on('source', function(event) {
14
    console.log("Received Event", event);
15
    console.log("GOT APPLE PAY SOURCE ID");
16
 
17
    event.complete('success');
18
 
19
    var source = event.source;
20
    console.log(source);
21
});
22
 
23
applepay.on('shippingaddresschange', function(event) {
24
    console.log("Received Shipping Address Change Event", event);
25
    var shippingAddress = event.shippingAddress;
26
    console.log("Shipping Address", shippingAddress);
27
 
28
    var newDetails = getPrUpdateObject();
29
    console.log('Updating PR With', newDetails);
30
    event.updateWith(newDetails);
31
});
32
 
33
applepay.on('cancel', function(event) {
34
    console.log("Received Event", event);
35
    console.log(event);
36
});
37
 
38
applepay.on('shippingoptionchange', function(event) {
39
    console.log("Received Shipping Option Change Event", event);
40
    var shippingOption = event.shippingOption;
41
    console.log("Shipping Option", shippingOption);
42
 
43
    var newDetails = getPrUpdateObject();
44
    console.log('Updating PR With', newDetails);
45
    event.updateWith(newDetails);
46
});
47
 
48
function getBasePrData() {
49
    return {
50
        country: "US",
51
        currency: "USD",
52
        total: {
53
            label: "Demo Total",
54
            amount: 300
55
        },
56
        displayItems: [{
57
            amount: 100,
58
            label: "Item"
59
        }, {
60
            amount: 200,
61
            label: "Better Item"
62
        }],
63
        requestShipping: true,
64
        shippingOptions: [{
65
            id: "free-shipping",
66
            label: "Free Shipping",
67
            detail: "Arrives in 5 to 7 days",
68
            amount: 0
69
        }, {
70
            id: "overnight-shipping",
71
            label: "Overnight Shipping",
72
            detail: "Arrives in 5 to 7 days",
73
            amount: 1000
74
        }],
75
        style: {
76
            buttonType: "plain",
77
            buttonColor: "light-outline",
78
            buttonLanguage: "en"
79
        },
80
        waitOnClick: false
81
    };
82
}
83
 
84
function getPrUpdateObject() {
85
    return {
86
        "status": "success",
87
        "total": {
88
            "label": "New Total",
89
            "amount": 1020.10
90
        },
91
        "displayItems": [{
92
                "amount": 1000,
93
                "label": "Big Screen TV",
94
            },
95
            {
96
                "amount": 20.10,
97
                "label": "Shipping and Handling"
98
            }
99
        ],
100
        "shippingOptions": [{
101
            id: "free-shipping",
102
            label: "Free Shipping",
103
            detail: "Arrives in 5 to 7 days",
104
            amount: 0,
105
            selected: true
106
        }, {
107
            id: "overnight-shipping",
108
            label: "Overnight Shipping",
109
            detail: "Arrives in 5 to 7 days",
110
            amount: 1000
111
        }]
112
    }
113
}
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/​
​
Alipay
bPay
Last modified 1mo ago
Copy link
Contents
Configuring Apple Pay for DigitalRiver.js
Step 1: Submit domain for Apple validation
Step 2: Create an Apple Pay source using Digital River.js
Step 3: Use the authorized source
Apple Pay example
Supported markets