Create an embedded Apple Pay and Google Pay buttons with JavaScript SDK¶

You can place Apple Pay and Google Pay buttons on your website as a regular HTML + JS code.

We developed pre-designed example (HTML/JavaScript) which you can try to use on your site:

Basic example with both Apple Pay and Google Pay¶

Instead of

<script src='https://cdn.jsdelivr.net/npm/@flittpayments/js-sdk/dist/umd/checkout.js'></script>
<div class='payment-button-container'></div>

you can use

npm i @flittpayments/js-sdk
import $checkout from "@flittpayments/js-sdk";

Step 1

Create endpoint on your backend which will be called by your frontend application to obtain payment token.

Endpoint should be integrated as described in instructions at Merchant embedded checkout page with payment token

This is mean, that backend will send parameters with POST method to https://pay.flitt.com/api/checkout/token endpoint and obtain token in response.

{
    "response": {
        "token": "07288bca0faaf2dc1870153d31bb7fc0c9f4cc4e",
        "response_status": "success"
    }
}

Step 2

Obtain payment token from your backend.

Step 3

Place your merchant_id and token values into block:

data: {
  merchant_id: 1549901,
  token: "<token obtained from backend>"
}

If you need only Apple Pay, set in JS code parameter

methods: ["apple"],

If you need only Google Pay, set in JS code parameter

methods: ["google"],

Step 4

Process callback on frontend with model object:

  .on("success", function (model) {
    console.log(model);
  })
  .on("error", function (model) {
    console.log(model);
  });

Step 5

Process callback on your backend (see parameter server_callback_url).

Check orders_status and signature to validate the result.

Step 6 for (Apple Pay only)

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.