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.

Apple Pay can be embedded in two methods.

Method with vue.js

Simple: embedded with Vue.js. This is the easiest way which require less code development.

Example vue.js Apple Pay button:

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

Method with JavaScript

Refer to advanced embedded with JavaScript document to get instruction on how to implement it. This method provide more control on Apple Pay button behavior and is more flexible if you need to implement additional logic during button display and user click.

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",
  }
}