Overview

This solution integrates the Apple Pay payment method button into your own payment page using Web SDK.

Payment Flow

1. The flow begins when the customer presses the “Checkout” (or “Go to Payment” or a similar) button on your own payment page.
2. The system displays the payment method gallery for the customer to choose from.
3. When Apple Pay is selected, the system handles the rest of payment flow automatically.

1. Include the Library

Include the Nuvei “CDN” library by adding this script tag to your page.
This is a light JavaScript wrapper over the Apple API provided by Nuvei, which is used to verify identity with Nuvei servers.

<script src="https://cdn.safecharge.com/safecharge_resources/v1/websdk/safecharge.js"></script> 

2. Authentication

Perform the steps in the Initiate a Session topic which authenticates and sets up an order in the Nuvei system, by sending an /openOrder request, and returns a sessionToken.

3. Create a Button Handler

Include this JavaScript in your page.

The example below has the following steps:

1. Verify that you have an Apple Pay device.
2. Initialize the button handler by adding an HTML button to your page.
3. Display Apple Pay buttons in your page.
   Some parameters are taken from input fields such as merchantId
4. Initialize the Web SDK.

Example of Creating a Button Handler

// Verify that you have an Apple Pay device

// Initialize the button handler by adding this HTML button to your page.
if(window.ApplePaySession) {
    var merchantIdentifier = 'example.com.store';
    var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
    // Display Apple Pay Button
    promise.then(function(canMakePayments) {
        if(canMakePayments) {<button id="apple-pay-button">Pay</button>} // Display Apple Pay Button here…
        });
    });
}
// Initialize the Web SDK
var sfc = SafeCharge({
    sessionToken: document.getElementById('session').value,  // returned from the openOrder
    merchantId: document.getElementById('merchantId').value,     // provided by Nuvei
    merchantSiteId: document.getElementById('merchantSiteId').value,  // provided by Nuvei
    env: 'int', // Nuvei API environment - 'int' (integration) or 'prod' (production - default if omitted)
});

4. Create a Result Handler

When the button is pressed, the overlay appears.
It displays data according to your business requirements and allows the customer to enter data.
For example, it displays: currency, amount, line items, billing address, shipping address, etc.

The button handler also calls a function defined in safeCharge.js, which handles the session and collects the decrypted data from the device.

It then sends the payment request, handles the response, and displays the result to the customer.

Example of Creating a Result Handler

/* define a button handler on click*/
document.getElementById('apple-pay-button').addEventListener('click', function() {
    sfc.createApplePayPayment({
        sessionToken: "<sessiontoken>", // received from openOrder API
        merchantId: "<your merchantId>", // as assigned by Nuvei
        merchantSiteId: "<your merchantSiteId>", // as assigned by Nuvei
        clientUniqueId: "<unique transaction ID in merchant system>", // optional
        env: 'int', // Nuvei API environment - 'int' (integration) or 'prod' (production - default if omitted)
        countryCode: 'GB',
        currencyCode: 'GBP',
        applePay3Dflow: "disable", // disable (default), enable
        collectUserDetails: false,
        billingAddress: {
          firstName: 'John',
          lastName: 'Smith',
          country: 'US',
          email: '[email protected]'
        },
        userDetails: {
          firstName: 'John',
          lastName: 'Smith',
          country: 'US',
          email: '[email protected]'
        }
        shippingAddress: {
          firstName: 'John',
          lastName: 'Smith',
          address: '22 Main Street',
          city: 'Boston',
          zip: '02460',
          state: 'MA',
          country: 'US'
        },
        total: {
          label: 'Your Company',
          amount: '19.99'
        }
    }, function(res) {
        console.log(res);
    })
});

Congratulations! You have successfully completed the integration steps!
You can now test your Apple Pay implementation in the Apple Pay Sandbox environment using the test card details provided.
For details, see the Apple Pay Integration Testing topic.