Configuring Apple Pay
Learn how to configure Apple Pay for DigitalRiver.js with Elements.
If you're using DigitalRiver.js with Elements, you can create an Apple Pay payment method for your app or website in three easy steps:
- 1.
- 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 theapple-developer-merchantid-domain-association
file over HTTPS. - 3.Contact your Digital River representative with the list of domains you want to register.
After setting up your library per the DigitalRiver.js reference guide, create an Apple 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 applepay = digitalriver.createElement('applepay', paymentRequestData);
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 |
---|---|
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 Apple Pay, you must listen to, at minimum, the Shipping Address Changed and Source events.
applepay.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 Apple Pay session by answering with a success message
event.complete('success');
});
​
​
applepay.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 the Apple Pay example.
if (applepay.canMakePayment()) {
applepay.mount("applepay-element");
document.getElementById('applepay-element').style.display = 'block';
}
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.
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": "ee1c11e4-b947-45a2-b9d7-429a1154cfff",
"clientSecret": "ee1c11e4-b947-45a2-b9d7-429a1154cfff_b99c11e4-b947-45a2-b9d7-429a1154cfff",
"type": "applePay",
"reusable": false,
"owner": {
"firstName": "John",
"lastName": "Doe",
"email": "[email protected]",
"address": {
"line1": "10380 Bren Rd W",
"line2": "",
"city": "Hopkins",
"state": "MN",
"country": "US",
"postalCode": "55343"
}
},
"currency": "USD",
"state": "chargeable",
"creationIp": "67.216.233.5",
"createdTime": "2019-04-26T16:30:33.984Z",
"updatedTime": "2019-04-26T16:30:33.984Z",
"flow": "standard",
"applePay": {}
}
Response example
{
"error": null,
"source": {
"clientId": "gc",
"channelId": "drdod15",
"liveMode": false,
"id": "ee1c11e4-b947-45a2-b9d7-429a1154cfff",
"clientSecret": "ee1c11e4-b947-45a2-b9d7-429a1154cfff_b99c11e4-b947-45a2-b9d7-429a1154cfff",
"type": "applePay",
"reusable": false,
"owner": {
"firstName": "John",
"lastName": "Doe",
"email": "[email protected]",
"address": {
"line1": "10380 Bren Rd W",
"line2": "",
"city": "Hopkins",
"state": "MN",
"country": "US",
"postalCode": "55343"
}
},
"currency": "USD",
"state": "chargeable",
"creationIp": "67.216.233.5",
"createdTime": "2019-04-26T16:30:33.984Z",
"updatedTime": "2019-04-26T16:30:33.984Z",
"flow": "standard",
"applePay": {}
},
"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": "applePay"
}‌
POST /checkouts/{id}
{
"customerId": "5774321008",
"sourceId"
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
<script src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
<div id="applepay-element"></div>
Apple Pay example
var digitalriver = new DigitalRiver('YOUR_API_KEY');
​
​
var applePrData = getBasePrData();
var applePayRequestData = digitalriver.paymentRequest(applePrData);
​
var applepay = digitalriver.createElement("applepay", applePayRequestData);
if (applepay.canMakePayment()) {
applepay.mount("applepay-element");
document.getElementById('applepay-element').style.display = 'block';
}
​
applepay.on('source', function(event) {
console.log("Received Event", event);
console.log("GOT APPLE PAY SOURCE ID");
​
event.complete('success');
​
var source = event.source;
console.log(source);
});
​
applepay.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);
});
​
applepay.on('cancel', function(event) {
console.log("Received Event", event);
console.log(event);
});