Attributes

• METHOD TYPEE-wallet
• PAYMENTS
• PAYOUTS
• REFUNDS
• RECURRING

Introduction

Apple Pay was launched in 2014 as a mobile payment method by Apple. It allows users to make payments in person, in iOS apps, and on the web. It works similarly to other NFC technology-based mobile payments, such as Google Pay or Samsung Pay. In addition, Apple Pay requires two-factor authentication via Touch ID, Face ID, PIN, or passcode.

This guide describes how to perform a non-3D Secure (non-3DS) Apple Pay payment using Nuvei Web SDK 2.0.

Additional Resources

• What’s new in Nuvei Web SDK 2.0 and the advantages of using it as an integration method – Web SDK 2.0
• Other Nuvei Web SDK 2.0 integration guides:
  • Getting Started with Nuvei Web SDK 2.0 – Card payment
  • Google Pay
  • ACH
  • Nuvei Payment Tokens – Payment with an existing payment token
• All Web SDK 2.0 methods

Supported Countries

• Australia
• Austria
• Belarus
• Belgium
• Brazil
• Bulgaria
• Canada
• China
• Croatia
• Cyprus
• Czech Republic
• Denmark
• Estonia
• Faroe Islands
• Finland
• France
• Georgia
• Germany
• Greece
• Greenland
• Guernsey
• Hong Kong
• Hungary
• Iceland
• Ireland
• Isle of Man
• Italy
• Japan
• Jersey
• Kazakhstan
• Latvia
• Liechtenstein
• Lithuania
• Luxembourg
• Macau
• Malta
• Monaco
• Netherlands
• New Zealand
• Norway
• Poland
• Portugal
• Romania
• Russia
• San Marino
• Saudi Arabia
• Singapore
• Slovakia
• Slovenia
• Spain
• Sweden
• Switzerland
• Taiwan
• Ukraine
• United Arab Emirates
• United Kingdom
• United States
• Vatican City

Supported Currencies

Apple Pay supports all currencies supported by Nuvei.

Payment (Deposit) Flow

To integrate Apple Pay into your payment page using Nuvei Web SDK 2.0, follow these steps:

1. 1. Apple Pay Registration.
   2. Server-to-Server Authentication – Before submitting a payment using the client-side Web SDK 2.0, you need to send a server-to-server POST /orders REST API 2.0 request that authenticates your Nuvei merchant credentials and creates a session.
   3. Frontend Web SDK Initialization – Import the websdk2.0.js library and instantiate Web SDK 2.0.
   4. Static Apple Pay Button Creation – Display on your payment page.
   5. Frontend Web SDK Apple Pay Payment Submission – Send a payment() request with its required parameters and the encrypted token you receive from Apple Pay.
   6. Response Verification – Verify the response by sending a GET /entities/{processing-entity-id}/transactions/{transaction-id} REST API 2.0 request or by using webhooks.
   7. Integration Testing – Test your Apple Pay integration in the Apple Pay Sandbox environment.

1. Apple Pay Registration

For details, see Registering with Apple Pay.

2. Server-to-Server Authentication

Before submitting a payment using the client-side Web SDK 2.0, you need to send a server-to-server POST /orders REST API 2.0 request that authenticates your Nuvei merchant credentials and creates a session. For details, press here.

3. Frontend Web SDK 2.0 Initialization

For details, press here.

4. Static Apple Pay Button Creation

a. Create a Button Handler

Include this JavaScript in your payment page.

The example below has the following steps:

1. Verify that the customer have an Apple Pay device.
2. Initialize the button handler by adding an HTML button to your payment page.
3. Display Apple Pay button on your payment page.

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…
      });
  });
}

b. Create a Result Handler

When a customer presses the Apple Pay button, 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, and so on.

The button handler also calls a function defined in websdk2.0.js that handles the session and collects an encrypted Apple Pay token 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() {
  nuveiWebSDK.paymentWithApplePay({
    sessionId: "<sessionId>", // received from POST /orders API
    countryCode: "US",
    currencyCode: "USD",
    merchantTransactionId: "<unique transaction ID in merchant system>",
    collectUserDetails: false, // or true
    buyerDetails: {
      buyerId: "12345",
      firstName: "John",
      lastName: "Smith",
      billingAddress: {
        countryCode: "US",
      }
    },
    total: {
      label: "Your Company",
      amount: "19.99"
    }
  }, function(res) {
    console.log(res);
  });
});

5. Frontend Web SDK Apple Pay Payment Submission

Send the encrypted Apple Pay token as-is in a Web SDK 2.0 payment() request. Nuvei decrypts the token and uses the relevant data extracted from it.

Send a non-3DS payment() request with its mandatory parameters and include:

• paymentOption block with:
  • networkToken block with:
    • provider: “ApplePay“
    • token: “<encrypted Apple Pay token>“ 

Example Apple Pay payment() Request

// call this from your main() in order for it to work with the html sample
function payment() {
  nuveiWebSDK.payment({
    "merchantTransactionId": "<transaction id in the merchant's system>",
    "paymentOption": {
      "store": "none",
      "networkToken": {
        "provider": "ApplePay",
        "token": "<encrypted Apple Pay token>"
      }
    },
    "buyerDetails": {
      "billingAddress": {
        "countryCode": "US"
      },
    }
  });
}

Example Apple Pay payment() Response

{
  "paymentId": "7b77229fa01d478cb369809f26534345",
  "transactionId": "8110000000001701567",
  "amount": 20,
  "currency": "USD",
  "transactionType": "Sale",
  "result": {
    "status": "approved"
  },
  "authCode": "111387",
  "partialApproval": {
    "requestedAmount": 20,
    "requestedCurrency": "USD"
  },
  "paymentOption": {
    "networkToken": {
      "provider": "ApplePay",
      "expirationMonth": "10",
      "expirationYear": "27",
      "bin": "520424",
      "last4Digits": "2826",
      "acquirerId": "19",
      "cardType": "Credit",
      "cardBrand": "MASTERCARD"
    }
  }
}

For more information about the output parameters in the Web SDK 2.0 payment() response, see Web SDK 2.0 Methods.

After receiving the payment() response, notify your server side and you can display a relevant message to the customer.

6. Response Verification

Before storing complete payment information in your system, you need to verify the response.

For details, press here.

7. Integration Testing

After completing the integration steps, test your Apple Pay integration in the Apple Pay Sandbox environment using the provided test cards. See Apple Pay Integration Testing.