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.

Create an Apple Pay payment method for your app or website in two easy steps:

Supported geographies

Apple Pay supports the following geographies and currencies.

Supported Geographies

Austria

Australia

Belgium

Bulgaria

Brazil

Canada

Switzerland

China

Cyprus

Czech Republic

Germany

Denmark

Estonia

Spain

Finland

Faroe Islands

France

United Kingdom

Guernsey

Greenland

Greece

Hong Kong

Croatia

Hungary

Ireland

Isle of Man

Iceland

Italy

Jersey

Japan

Kazakhstan

Liechtenstein

Lithuania

Luxembourg

Latvia

Monaco

Macao

Malta

Netherlands

Norway

New Zealand

Poland

Portugal

Romania

Russia

Saudi Arabia

Sweden

Singapore

Slovenia

Slovakia

San Marino

Taiwan

Ukraine

United States

United Arab Emirates

AED

ARS

AUD

BHD

BRL

CAD

CHF

CLP

CNY

COP

CZK

DKK

EGP

ETB

EUR

GBP

HKD

IDR

ILS

INR

JOD

JPY

KRW

KWD

LBP

MXN

MYR

NOK

NZD

OMR

PHP

PLN

QAR

RUB

SAR

SEK

SGD

THB

TRY

TWD

UAH

USD

ZAR

Step 1. 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.

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"
}
});
var applepay = digitalriver.createElement('applepay', paymentRequestData);

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.

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.

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 Apple Pay example.

if (applepay.canMakePayment()) {
applepay.mount("applepay-element");
document.getElementById('applepay-element').style.display = 'block';
}

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
{
"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": "Fred",
"lastName": "Flintstone",
"email": "test@gmail.com",
"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": "Fred",
"lastName": "Flintstone",
"email": "test@gmail.com",
"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": "Fred Flintstone",
"firstName": "Fred ",
"lastName": "Flintstone",
"phone": "+16519895326",
"email": "test@digitalriver.com"
},
"shippingAddress": {
"name": "Fred Flintstone",
"firstName": "Fred",
"lastName": "Flintstone",
"phone": "+16519895326",
"email": "test@digitalriver.com",
"address": {
"line1": "10380 Bren Road W",
"line2": "",
"city": "Minnetonka",
"state": "MN",
"country": "US",
"postalCode": "55343"
}
},
"contactInformation": {
"name": "Fred Flintstone",
"phone": "+16519895326",
"email": "test@digitalriver.com"
},
"elementType": "applePay"
}

Step 2. Use the authorized source

Once authorized, you can use the source by attaching it to a checkout.

POST /checkouts/{id}
{
"customerId": "5774321008",
"sourceId": "src_a78cfeae-f7ae-4719-8e1c-d05ec04e4d37"
}

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
<script src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
<div id="applepay-element"></div>
Apple Pay Example
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);
});
applepay.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);
});
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
}]
}
}