Apple Pay elements

Search…

Apple Pay elements

Learn how to use Apple Pay elements.

‌With DigitalRiver.js, you can create an Apple Pay element and interact with Apple Pay.‌
Creating an Apple Pay element
Example
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
    });
16
 
17
 
18
var applepay = digitalriver.createElement('applepay', paymentRequestData);
Copied!
Apple Pay element styles and customization
Use the following styles and types to create an Apple Pay button that you can more closely integrate into your experience.‌
Button type‌
plain: 
 
buy: 
​
Choose one of the following button types:
Button color‌
Choose one of the following button colors:
​light: 
 
light-outline: 
 
dark: 
 
Apple Pay element functions
applepay.canMakePayment();
Call this function to determine whether or not the Customer's browser supports Apple Pay.
Example
1
if(applepay.canMakePayment()) {
2
    //can make payment with this element
3
}
Copied!
applepay.mount();
Call this function to place the created Apple Pay element on your page.
Example
1
<div id="apple-pay"></div>
2
 
3
if(applepay.canMakePayment()) {
4
    //can make payment with this element
5
    applepay.mount('apple-pay');
6
}
Copied!
applepay.show();
Call this function to show the Apple Pay Payment Request interface. This will automatically happen when using the element. If you'd like to trigger via another mechanism, you must call it as part of the user interaction (click handler).
Example
1
applepay.show();
Copied!
applepay.unmount();
Call this function to remove the Apple Pay element from your page. The element may be re-added to your page by calling mount().
Example
1
applepay.unmount();
Copied!
applepay.destroy();
Call this function to remove the Apple Pay element from your page as well as remove its functionality. You cannot re-add the element to your page via mount().
JavaScript
1
applepay.destroy();
Copied!
applepay.update();
Call this function to update the Apple Pay element's data. Calling this will merge your changes into the already existing Payment Request object.
Example
1
var paymentRequest = 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
    });
16
 
17
 
18
applepay.update(paymentRequest);
Copied!
Apple Pay element events — applepay.on('event', handler);
Call this function to listen to events that can be used to build and enhance your purchase flow.
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.
Source
The Source event emits when the Customer completes their interaction with the Payment Request interface, and they create a Payment Source. The emitted object will be a Payment Request Response object.
Example
1
applepay.on('source', function(event) {
2
    var source = result.source;
3
 
4
 
5
    //pass the source to your back end for further processing.  
6
});
Copied!
Ready
The Ready event emits when the Apple Pay Element has loaded and is available to take an update() call.
Example
1
applepay.on('ready', function(event) {
2
    //apple pay element is ready and can accept an update call
3
});
Copied!
Repsonse object
1
{
2
    elementType: "applepay"
3
}
Copied!
Click
The Click event emits when the customer clicks an Apple Pay Element.
Example
1
applepay.on('click', function(event) {
2
    //do stuff
3
}
Copied!
Response object
1
{
2
    elementType: "applepay"
3
}
Copied!
Cancel
The Cancel event emits when the customer closes the Apple Pay Element Payment Request interface.
Example
1
applepay.on('cancel', function(event) {
2
    //do stuff
3
}
Copied!
Response object
1
{
2
    elementType: "applepay"
3
}
Copied!
Shipping option change
The Shipping Option Change event emits when the Customer selects a different Shipping Option within the Payment Request interface. The event will emit the following object structure.
Key
Type
Description
updateWith
Function
 Calling this function with a Payment Request Details Update object merges your updates into the current Payment Request object.
shippingOption
A Payment Request Details Update object​
A Payment Request Shipping Option object contains the details of the customer's chosen Shipping Option.
Example
1
applepay.on('shippingoptionchange', function(event) {
2
    var shippingOption = event.shippingOption;
3
  
4
  
5
    //create a Payment Request Details Update Object
6
    var newDetails = createPaymentRequestDetailsUpdateObject();
7
    event.updateWith(newDetails);
8
});
Copied!
Response object
1
{
2
    "shippingOption": {
3
        "id": "overnight-shipping",
4
        "label": "Overnight Shipping",
5
        "amount": 100,
6
        "detail": "Get this in 1 business day."
7
    },
8
    "updateWith": function(data) {
9
        callback(data);
10
    }
11
}
Copied!
Shipping address change
The Shipping Address Change emits when the Customer selects a different Shipping Address within the Payment Request interface. The event will emit the following object structure.
Key
Type
Description
updateWith
Function
 Calling this function with a Payment Request Details Update object merges your updates into the current Payment Request object.
shippingAddress
A Payment Request Details Update object​
A Payment Request Shipping Option object contains the details of the customer's chosen Shipping Option.
Example
1
applepay.on('shippingoptionchange', function(event) {
2
    var shippingOption = event.shippingOption;
3
  
4
  
5
    //create a Payment Request Details Update Object
6
    var newDetails = createPaymentRequestDetailsUpdateObject();
7
    event.updateWith(newDetails);
8
});
Copied!
Response object
1
{
2
    "shippingOption": {
3
        "id": "overnight-shipping",
4
        "label": "Overnight Shipping",
5
        "amount": 100,
6
        "detail": "Get this in 1 business day."
7
    },
8
    "updateWith": function(data) {
9
        callback(data);
10
    }
11
}
Copied!
​