Skip to content

Apple Pay integration instructions for web

Integrating Apple Pay into a website can be done either through:

Redirect and embedded methods require integration only with Flitt's API or SDK and thus less coding and complexity.

Integrating Apple Pay with Apple Pay API directly requires additional Apple certificates management and encryption/decryption procedures coding.

Direct method also involves different approaches depending on tokenized Primary Account Number (DPAN) or an encrypted payment container is used during payment flow processing.

Apple Pay with redirect to Flitt checkout page

Refer to create order to create order on your backend or frontend and redirect payer to the checkout page. Apple Pay button will automatically appear at checkout page. The payment is processed on Flitt’s secure platform, reducing complex coding and the risk of handling sensitive data.

Apple Pay button, embedded to merchant website

Embedded method provides a seamless checkout experience without leaving the merchant website, which can increase conversion rate.

Embedded Apple Pay button can be placed in a way to fit the look and feel of the website, providing a more cohesive brand experience.

This type of integration also gives greater control over the checkout process and design.

Meanwhile, this method is more complex than redirect method to implement, requiring more development resources and expertise.

Example Apple Pay button:

See the Pen Flitt - Apple, Google Pay buttons by Flitt.com (@flitt) on CodePen.

Verify your domain in Apple Pay developer account

  • To embedd Apple Pay button from Flitt, you must register all of your web domains where button will be displayed. This relates to top-level domains (for example, site.com) and subdomains (for example, shop.site.com, www.site.com), both production and development sites.

  • Request Flitt support for apple-developer-merchantid-domain-association.txt file.

  • When received, place that file at https://example.com/.well-known/apple-developer-merchantid-domain-association where example.com is your domain or subdomain.

  • Tell Flitt to activate your domain with Apple.

Direct integration with Apple Pay API with decrypted card token

1 Configur Your Apple Pay Environment

        1.1 Configure Merchant ID and Certificates

        1.2 Register and Verify Your Domain

2 Integrate Apple Payment Request API

        2.1 Show Apple Pay Buttons on you site. See Apple reference

        2.2 Construct a PaymentRequest with parameters:

configuration example

const applePayMethod = {
  supportedMethods: "https://apple.com/apple-pay",
  data: {
      version: 3,
      merchantIdentifier: "merchant.com.example",
      merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"],
      supportedNetworks: ["masterCard", "visa"],
      countryCode: "GE",
  },
};

        where merchant.com.example is your Apple Merchant ID from step 1.1

3 Acquire a payment session from Apple with merchant validation process. This should be done on your backend as oposit to all other steps, done on frontend.

4 Handle Payment Authorization

5 Obtain PaymentResponse and related ApplePayPayment dictionary

6 Extract token from ApplePayPayment

7 Decrypt paymentData

After decryption the result format should be as follows:

{
  "applicationPrimaryAccountNumber": "",
  "applicationExpirationDate": "",
  "currencyCode": "",
  "transactionAmount": ,
  "deviceManufacturerIdentifier": "",
  "paymentDataType": "",
  "paymentData": {
    "onlinePaymentCryptogram": ""
  }
}

8 Send parameters to Flitt Payment (direct) request

Apple Pay parameter applicationPrimaryAccountNumber as Flitt card_number

Apple Pay parameter applicationExpirationDate as Flitt expiry_date

Apple Pay parameter onlinePaymentCryptogram as Flitt cavv

and additionally Flitt parameter wallet = applepay

Example Apple Pay request to Flitt

{
  "request": {
    "order_id": "Order_id123",
    "merchant_id": 1549901,
    "order_desc": "Apple Pay Payment with card token",
    "amount": 1000,
    "currency": "GEL",
    "client_ip": "2.2.2.2",
    "server_callback_url": "https://server.com/callback",
    "preauth": "Y",
    "version": "1.0.1",
    "card_number": "4444555566661111",
    "expiry_date": "0527",
    "cavv": "AEBBjhMvE4xRAg97n9DpAoABFA==",
    "wallet": "applepay"
    "signature": "64d565cdf9bfb2ad556eac54bd57706e5dc6c412",
  }
}