Apple Pay Web Integration

Apple Pay on the Web allows customers to use their Apple Wallet to pay for purchases during checkout in a retail website.

You can integrate Apple Pay Web in your webstore's checkout process by following the process described below.

Prerequisites for Apple Pay Integration

  • The merchant/retailer must have an Apple Developer Account.
  • All webstore pages served to the customer must use HTTPS
  • The domain and all subdomains must have valid SSL certificates and be registered with Apple. (Please see the Merchant Validation section below).
  • The merchant server must support the Transport Layer Security (TLS) 1.2 protocol and one of the cipher suites listed by Apple.

Testing the integration is supported on iOS 10 (and above) and mac OS 10.12 (and above).

Apple Pay Certificate Setup

Before Radial can accept and process Apple Pay payments for your webstore, you must set up a certificate file.

Certificate Setup for Test Environments

For test environments, the Apple Pay certificate setup process is performed in Radial's Payments & Fraud Sandbox (https://dev.radial.com). For detailed instructions, see Apple Pay Configuration in the Sandbox online help.

If you don't have a Sandbox account, you can create one. For details, see Set Up a Sandbox Account in the Sandbox online help.

Certificate Setup for Production Environments

For production environments, the Apple Pay certificate setup process is performed in Radial's Payments & Fraud Portal (https://portal.radial.com). For detailed instructions, see Apple Pay Configuration in the Portal online help.

If you don't have a Portal account, ask your Radial team to create an account for you.

Apple Pay JS API

The Apple Pay JavaScript API lets you accept Apple Pay payments on the web. The Apple Pay JavaScript API is supported on the following platforms:

  • iOS 10. Apple Pay JavaScript is supported on all iOS devices with a Secure Element. It is supported both in Safari and in SFSafariViewController objects.

  • MacOS 10.12. Apple Pay JavaScript is supported in Safari. The user must have an iPhone, Apple Watch, or a MacBook Pro with Touch ID that can authorize the payment.

The following steps are necessary for integrating with Apple Pay JS API:

  1. Show Apple Pay web button

  2. Merchant validation

  3. Display payment sheet

  4. Authorization with encrypted blob

For details of these steps, see the following sections.

Enabling Apple Pay Web Button on the Checkout Flow Payments Page

Step 1: Show Apple Pay Web Button

Step 2: Merchant Validation

Step 3: Display Payment Sheet on Browser and Phone

Step 4: Authorization with the Encrypted Blob

 

Sample Blob

Apple sends a lot of transaction data, but for payment processing purposes, only the paymentData information is relevant. Extract the data and send it to Radial. Radial will decrypt the information and use it to do an Authorization call to the payment gateway. A sample Blob is shown below.

        "paymentData": {
        "version": "EC_v1",
        "data": "cVSiVUsQHFWiJ5jUBKOozrSRw1s1jRnKhjfC5/Lq7zsr7nXCVqYRIdi3RJoOBGz4kNCOoCXs8xWXrLpCppFxw1HOZBdIxlWoJ0BJLlj+jgs775f6MFs6AE7i64R0oRuw03PJxTJ9wOqux39a/JCywvjFiDsRaOK+lY9L76KXUeZ0f7wrTIVJZTrFhz6Iob4vYMFXk+o4ynfLnZyHqO5TRhjGP06DNPVRmRZOGWkSnVRGWYEqqteY2SL3PEqfEkguy4pClTHmqq367qBhhescFHpiDqtFjxeUV3h4WLIKNwWzSmjSoyFAyWR5LLo9cKaaAExABJF+quO9GWqwiyvqPtmrFTYamEtnS/dZPHxeRWC97v2ktIy2jIEGhu4vDy13wYvz/VgKU8pAkHNbtWsattMDG+XGG3EeeZRvFWl1",
        "signature": "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",
        "header": {
        "ephemeralPublicKey": "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEKHACe0d4cHonHQJwjrZB6q/GDpv574RoKkc/xYbgpSP5p/4GqT8k4/y6rHUy75e+qW9yUVPo7kOWr9YZ6wB2sw==",
        "publicKeyHash": "sNALPkRCH7b7dM63odMKQhMx8oCriXbTNxkOdvuqnAA=",
        "transactionId": "d280ae5d54a9c13ab73abcf55a12c24aac32ea240e3e74cc7a15a5d9cc82fda6"
        }
        },
        "paymentMethod": {
        "displayName": "Visa 0492",
        "network": "Visa",
        "type": "debit"
        },
        "transactionIdentifier": "D280AE5D54A9C13AB73ABCF55A12C24AAC32EA240E3E74CC7A15A5D9CC82FDA6"
        } 

Radial Payment API

The merchant must call the Radial payment API when the payment is authorized by the customer.

Use the mapping below to pass the encrypted data in Radial's CreditCardAuthRequest API:

Blob to Radial CreditCard API mapping

Apple Pay Token Attribute

Description

Radial CreditCardAuth Xpath mapping

Version

Version information about the payment token.

The token uses EC_v1 for ECC-encrypted data, and RSA_v1 for RSA-encrypted data.

CreditCardAuthRequest/WalletPaymentInformation/Version

data

Encrypted payment data from Apple Pay

CreditCardAuthRequest/WalletPaymentInformation/Data

Signature

Signature of the payment and header data. The signature includes the signing certificate, its intermediate CA certificate, and information about the signing algorithm.

CreditCardAuthRequest/WalletPaymentInformation/Signature

Header/ephemeralPublicKey

Ephemeral public key bytes.

CreditCardAuthRequest/WalletPaymentInformation/EphemeralPublicKey

Header/transactionId

Transaction Identifier generated on the device

CreditCardAuthRequest/WalletPaymentInformation/ApplePayTransactionId

Header/publicKeyHash

Hash of the X.509 encoded public key bytes of the merchant’s certificate.

CreditCardAuthRequest/WalletPaymentInformationPublicKeyHash

For more information, please refer to the Apple Pay JS API, at https://developer.apple.com/documentation/applepayjs/applepaysession

Test Card/Mock Cards

Card Type FPAN Expiration Date CVV
Visa 4761 1200 1000 0492 11/2022 533
MasterCard 5204 2477 5000 1471 11/2022 111
Discover 6011 0009 9446 2780 11/2022 111
American Express 3499 569590 41362 12/2022 1111

More Mock Cards are available at https://developer.apple.com/support/apple-pay-sandbox/