Skip to content

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

Project at GitHub: https://github.com/flittpayments/js-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

See the Pen ApplePay Payment Buttons with onclick() before by Flitt.com (@flitt) on CodePen.

Step by step implementation case

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

Rewrite function

function request() {
  return new Promise((resolve) =>
    setTimeout(() => resolve("_token_"), 300)
  );
}

to obtain payment token from your backend.

Here _token_ should be replaced with token, obtained from backend.

Step 3

Place your merchant_id and initial amount value into block:

const params = {
  merchant_id: 1549901,
  currency: "GEL",
  amount: 100
};

This is required to draw initial Apple Pay and Googl pay button.

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

Once Apple Pay/Google Pay button is clicked, request() function will be executed to request new token from your backend and to update button with new token string returned

Step 5

Process callback on frontend with model object:

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

Step 6

Process callback on your backend (see parameter server_callback_url).

Check orders_status and signature to validate the result.

Step 7 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.