Introduction

Purpose

This guide provides steps to integrate Apple Pay into your payment flow using the Nuvei Simply Connect platform.

After the successful completion of this integration, the Apple Pay button should appear in the Payment Methods Gallery of your website or application, when using an Apple Pay compatible device.

Prerequisites and Notes

This guide assumes you have completed all account setup prerequisites, and are ready to integrate Apple Pay into your payment flow.

You are responsible for the button implementation, according to the Apple Pay UI guidelines.

1. Authentication

Follow the instructions in these steps:

1. Initiate a Session
   This authenticates and sets up an order in the Nuvei system, by sending an /openOrder request, and returns a sessionToken.
2. Create an HTML Placeholder
   This instantiates the Web SDK with the sessionToken received from the server call to /openOrder.

2. Collect the Card Details

The Apple Pay button is used to collect your customer’s card details.

Display the Apple Pay button in the payment methods gallery on the Nuvei Simply Connect page, as follows:

• Send a checkout() request with its mandatory checkout() Input Parameters.
• Any additional optional parameters that you require.
• (Recommended) Include the apmConfig class for various customizations:
  • companyName must be sent for Apple Pay’s equivalent merchantName to appear on the Apple Pay payment page.
    
    This field is mandatory when Simply Connect is used in-app within a WebView for approval at the App Store.

  • If you would like Nuvei to collect the user’s details directly from ApplePay, then you can set collectUserDetails as ‘true‘ in the apmConfig class. Default value is set as ‘false‘. When you set this parameter to true, Nuvei sends Apple Pay (in the token request) both shipping and billing objects to be returned, map them to the relative classes, and send them in the clientPayment request.
  • To customize the Apple Pay button:
    • To customize the Apple Pay button color, include the buttonStyle parameter:
      • Possible values: black (default), white, white-outline
      • For examples, see the Button Styles section.
    • To customize the text on the Apple Pay button, include the buttonType parameter:
      • Possible values: buy (default), plain, book, checkout, order, pay, subscribe, inStore, addMoney, X, contribute, donate, reload, rent, setUp, support, tip, topUp
      • For examples, see the Button Types section.
    • To customize the Apple Pay button location, include the buttonLocation parameter:
      • Possible values: onTop (default), gallery
    • You can change the height and width of the Apple Pay button in the CSS of the container of the button, by adding the width and height to the apple-pay-button-with-text class.
  • Add the 3Dflow parameter to the apmConfig class to determine whether your card transaction is processed as non-3D (disable – default) or if the transaction is processed with 3D-Secure verification using Simply Connect (enable).

Example checkout() Request for Apple Pay

checkout({
  logLevel: 0,
  payButton: "amountButton",
  showResponseMessage: true,
  sessionToken: document.getElementById('session').value,
  env: 'test',
  merchantSiteId: document.getElementById('merchantSiteID').value,
  merchantId: document.getElementById('merchantID').value,
  country: 'US',
  locale: 'en',
  apmConfig: {
    applePay: {
      collectUserDetails: 'true', // false (default), true
      buttonStyle: 'black', // black (default), white, white-outline
      buttonType: 'checkout' // buy (default), plain,
        // book, checkout, order, pay, subscribe, inStore, 
        // addMoney, continue, contribute, donate, reload,
        // rent, setUp, support, tip, topUp
      buttonLocation: ’onTop’// onTop (default), gallery,
      3Dflow: 'disable', // disable (default), enable
      companyName: "<company name>"
    }
  },
  currency: 'USD',
  amount: 135,
  renderTo: '.container_for_checkout',
  onResult: onResult,
  autoOpenPM: true,
  alwaysCollectCvv: false,
  fullName: 'CL-BRW1',
  email: '[email protected]'
})

3. Payment

The Apple Pay button is displayed in the payment methods gallery on the Nuvei Simply Connect page.

1. The customer triggers the Apple Pay payment flow by pressing the Apple Pay button.
   At this point your customer may be asked to log in to their Apple Pay account.

2. Apple Pay displays the cards in the customer’s Wallet, or asks the customer to “Add new credit/debit card” details.
3. After the customer selects one of their Apple Pay payment methods, Apple Pay returns the encrypted token for Nuvei to process the transaction.
4. Nuvei processes the transaction and handles the rest of the payment flow automatically.
5. When the transaction is complete, the system displays the relevant “Approved” / “Declined” transaction message.

Appendix – JSFiddle Example

Editing JSFiddle Examples

You can use the JSFiddle demonstration environment to view, run, and customize the code examples below.

To edit sample code in JSFiddle, press Edit in JSFiddle in the top right corner.
This redirects you to a page where you run and test the code.

Feel free to change your code, including the HTML and CSS.

Simply Connect JSFiddle

You can use the JSFiddle demonstration environment to view the Apple Pay Simply Connect example below.

If you are using an Apple device, then you can also run and customize the Apple Pay Simply Connect example.