Apple Pay

Introduction

Apple Pay can be utilized as a checkout option on a payment page as well as a direct checkout option on the cart page (fast checkout). After configuring your environment, loading the Apple Pay button via Copy & Pay payment widget is just like loading any other brand, i.e. in step 2, APPLEPAY must be specified as a brand. Once the Apple Pay button will be used by the consumer, the Apple Pay payment sheet will appear on the device.

As soon as the consumer starts to interact with the Apple Pay payment sheet, several events will be triggered. All events can be consumed by implementing the Copy & Pay API callback functions. All callback functions offered by the Apple Pay SDK are wrapped into the Copy & Pay API. No interaction with the Apple Pay SDK is required.

For steering the Apple Pay payment sheet or for updating data on the Apple Pay payment sheet after the consumer started to interact with it, several options are available.

Apple Pay on the cart page (fast checkout)

Sometimes you might want to display the Apple Pay button early on the payment workflow where you do not yet have a checkout ID. Usually, the shopper can decide whether to continue with the normal checkout, or to immediately pay with Apple Pay.

It is possible to display the Apple Button first and create a checkout ID later. In step 2:

• Use paymentWidgets.js without a checkout ID

  <script src="https://eu-test.oppwa.com/v1/paymentWidgets.js"></script>

• Define a callback function in wpwlOptions.createCheckout to create a checkout

We will call the callback function once the Apple Pay button is clicked. The function should return a checkout ID, or a promise that will return a checkout ID. Specifically, the returned object can be any thenable object. In particular, both JavaScript Promise and jQuery Promise are supported.

Example:

wpwlOptions.createCheckout = function() {
    // Call your server to create a checkout
    return $.post("https://your.server")
    .then(function(response) {
        // Assume that your server returned the response containing checkoutId
        return response.checkoutId;
    });
};

Note that you can use the callback function to check whether all prerequisites are met (e.g. terms and conditions are accepted) before starting the payment. If some conditions are not met, you can prevent Apple Pay from starting by returning false.

In addition, since the checkout amount and currency are initially unknown, you will need to manually set the Apple Pay parameters total.amount and currencyCode. See Apple Pay Options further configurations.