Click to Pay button BETA

Click to Pay lets customers save their card once with Visa, Mastercard, or American Express, then pay on any supported site by picking it from a list, no need to retype card details. Through Guide
Understand how to integrate the payment form into your product. Payment Form, Click to Pay, powered by Unified Checkout Solutions, provides an interface to accept Visa, Mastercard, and American Express while keeping the regular card form on the same checkout page.

Customers can pay without entering card details manually on your page. Instead, they use their Click to Pay wallet, which is integrated directly into payment form: card schemes securely store the cardholder data and issue a token for each payment.

Customers can create Click to Pay accounts with Mastercard, Visa, or American Express, or with their issuing bank when supported. At checkout, recognized customers select a preferred card from their Click to Pay account to complete the payment.

Card schemes describe the customer experience in similar terms. Public schemes and industry write-ups often list design goals such as:

• Reduce the need to enter account numbers and passwords during checkout flows.
• Provide a simple and consistent digital checkout experience.
• Help make payment credentials less vulnerable to fraud.

This is the end-to-end picture at merchant checkout before you wire layout, events, or API details.

Click to Pay works only through Solidgate Acquiring. It is not offered on other Solidgate processing paths.

To join the BETA , you need a Solidgate Acquiring connector account and to be onboarded to Unified Checkout Solutions (UCS). During onboarding, your merchant legal entity is mapped to a UCS identifier, which the wallet uses to attribute traffic to your account. UCS onboarding is not self-serve: contact your Solidgate account manager.

Checkout flows

Which checkout flows run depends on whether Click to Pay recognizes the customer in the current browser (for example, via scheme cookie or recognition token) or must look up or enroll the customer.

First-time

The customer does not yet have a usable Click to Pay context in this session (no profile ready to pay without enrollment-style steps). In typical scheme first-time experiences, the customer may supply email and phone number to create or link an ID and cards, while your integration supplies consumer and billing fields the flow asks for. The customer can still pay by manually entering a card, then choose whether to enroll that card for later Click to Pay checkouts.

1. Provide identity details
   The customer enters email, phone, or other identifiers the scheme requests and advances through identity screens.
2. Enter card data and security checks
   The customer completes card entry inside the scheme-controlled steps (including CVV or other prompts shown there).
3. Verify and consent to enrollment
   The customer completes verification (for example, SMS or email OTP), reviews terms or notices, and confirms linking the card to Click to Pay for future visits.
4. Confirm the purchase
   The customer approves payment for the order.
5. SDK and backend
   The SDK encrypts data as required and drives the wallet flow; Solidgate receives the checkout payload, fetches order data if needed, and processes authorization like your other card payments.

Merchant takeaway: treat first-time Click to Pay as a multi-step, multi-minute customer journey when you design loading states, session timeouts, and support copy. Do not compare its duration to a returning flow on a remembered device.

Repeat with recognized device

The customer previously agreed to be remembered, and a valid recognition token or cookie is present, so the wallet can show stored cards without repeating the full identity setup.

1. See saved cards immediately
   During initialization the SDK applies recognition and surfaces cards already on the profile.
2. Choose a card and pay
   The customer selects a stored card and confirms payment, usually without a separate OTP on a trusted device.
3. Backend
   Solidgate processes the payment from the checkout payload.

Repeat with unrecognized device

The customer has a Click to Pay profile, but this browser has no valid recognition artifact. The flow falls back to identifiers, commonly email or mobile, to find the account, then adds verification before showing saved cards.

1. Identify the customer
   The customer enters email or phone so the scheme can match an existing account.
2. Verify, then branch
   If a profile exists, the customer completes OTP (or similar) to unlock stored cards. If not, the experience continues toward first-time enrollment using the same contact details.
3. Select a card and confirm
   The customer picks a stored card (or links a new card if the flow offers it) and confirms payment.
4. Backend
   Solidgate processes the payment from the checkout payload.

Additional customer choices can lengthen any path: linking a new card to an existing ID during checkout, or opening another Click to Pay profile on a shared device. Those branches usually require verification before a new card list appears.

Payment Form layout

Unlike other Guide
Activate and customize alternative payment buttons on your payment form. pay buttons, Click to Pay has specific layout rules. The SDK controls button placement and divider rendering to preserve a clear choice between Click to Pay and card form flows.

Click to Pay follows card-scheme UX constraints that differ from Apple Pay, Google Pay, and PayPal flows.

• The customer must always see that both payment options are available: Click to Pay and the regular card form.
• Hiding or obscuring the card form behind Click to Pay is not allowed.
• The SDK enforces this by rendering a divider between Click to Pay and the card form.

When a customer clicks the Click to Pay button, the payment form collapses into a compact button-like variant. This behavior is required for card scheme compliance. To keep the regular card form visible as an alternative, the SDK continues to render a dedicated divider between the Click to Pay and form flow areas.

Use these rules as a baseline for implementation:

You only need a payment form container for Click to Pay.

1
2
3
4
5
6

<!-- Optional: other button containers -->
<div id="apple-pay-container"></div>
<div id="google-pay-container"></div>

<!-- Payment form container -->
<div id="payment-form-container"></div>

Other payment methods may use optional dedicated containers.

Integration steps

Use this sequence to integrate Click to Pay safely and keep layout behavior compliant with card-scheme requirements.

Step 1. Build HTML layout

You only need a container for the payment form.

1
2
3
4
5
6

<!-- Optional: other button containers -->
<div id="apple-pay-container"></div>
<div id="google-pay-container"></div>

<!-- Click to Pay renders above this container -->
<div id="payment-form-container"></div>

Step 2. Initialize SDK

Enable Click to Pay in the SDK init() call. Keep other payment button settings unchanged.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const form = PaymentFormSdk.init({
  merchantData: {
    merchant: merchantPublicKey,
    paymentIntent: encryptedIntent,
    signature: signature,
  },
  iframeParams: {
    containerId: "payment-form-container",
    width: "100%",
  },
  applePayButtonParams: {
    containerId: "apple-pay-container",
  },
  googlePayButtonParams: {
    containerId: "google-pay-container",
  },
  paypalButtonParams: {
    enabled: true,
  },
  clickToPayButtonParams: {
    enabled: true,
    saveRecognitionToken: true,
    supportedCardNetworks: ["visa", "mastercard"],
    height: 56,
  },
});

Step 3. Subscribe to events

Subscribe to the lifecycle and submit events.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

form.on("mounted", function (event) {
  if (event.data.entity === "form") {
    console.log("Payment form is ready");
  }
  if (event.data.entity === "clicktopay") {
    console.log("Click to Pay button is ready");
  }
});

form.on("error", function (event) {
  console.error("Payment error:", event.data);
});

form.on("submit", function (event) {
  console.log("Payment submitted via:", event.data.entity);
});

Use these examples as a baseline when wiring Click to Pay with other payment buttons.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!doctype html>
<html lang="en">
  <head>
    <style>
      .payment-button { margin-bottom: 8px; }
    </style>
  </head>
  <body>
    <div class="payment-button" id="apple-pay-container"></div>
    <div class="payment-button" id="google-pay-container"></div>
    <div id="payment-form-container"></div>
    <script>
      const form = PaymentFormSdk.init({
        merchantData: {
          merchant: "your-merchant-public-key",
          paymentIntent: "encrypted-intent",
          signature: "signature",
        },
        iframeParams: { containerId: "payment-form-container", width: "100%" },
        applePayButtonParams: { containerId: "apple-pay-container" },
        googlePayButtonParams: { containerId: "google-pay-container" },
        paypalButtonParams: { enabled: true },
        clickToPayButtonParams: { enabled: true, saveRecognitionToken: true },
      });
    </script>
  </body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import { useCallback, useEffect, useRef } from "react";

const PaymentFormSection = ({ merchantData, onSuccess, onError }) => {
  const formContainerRef = useRef(null);

  const flushState = useCallback(() => {
    const formContainer = formContainerRef.current;
    if (formContainer?.firstChild) formContainer.firstChild.remove();
  }, []);

  useEffect(() => {
    let form;
    const initForm = async () => {
      const clientSdk = await loadPaymentFormSdk();
      flushState();

      form = clientSdk.init({
        merchantData,
        iframeParams: { containerId: "payment-form-container", width: "100%" },
        applePayButtonParams: { containerId: "apple-pay-container" },
        googlePayButtonParams: { containerId: "google-pay-container" },
        paypalButtonParams: { enabled: true },
        clickToPayButtonParams: { enabled: true, saveRecognitionToken: true },
      });

      form.on("mounted", (event) => {
        if (event.data.entity === "form") onSuccess();
      });
      form.on("error", onError);
    };

    initForm();
    return () => form?.destroy();
  }, [merchantData, flushState, onSuccess, onError]);

  return (
    <>
      <div id="apple-pay-container" />
      <div id="payment-form-container" ref={formContainerRef} />
    </>
  );
};

clickToPayButtonParams

Expand all

enabled

boolean

Required

Description

Shows the Click to Pay button on the checkout.

Example

true

Default

false

saveRecognitionToken

boolean

Description

Stores a first-party recognition cookie provider_clickToPayRecognitionToken on the merchant site. On subsequent visits, this token helps identify returning customers and can reduce repeated input steps.

Example

true

Default

false

When enabled, the recognition cookie is typically set for 180 days and uses secure with SameSite=None attributes.

supportedCardNetworks

array

Description

List of card networks.

Example

["visa", "mastercard"]

Default

["mastercard", "visa", "amex"]

height

number

Description

Button height in pixels.

Range from 52 to 60

Example

56

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.click2pay-divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 16px 0;
  color: #8b8b8b;
  font-size: 16px;
  font-family: sans-serif;
}

.click2pay-divider::before,
.click2pay-divider::after {
  display: block;
  height: 1px;
  flex-grow: 1;
  background-color: #d1d1d1;
  content: "";
}

.click2pay-divider::before {
  margin-right: 16px;
}

.click2pay-divider::after {
  margin-left: 16px;
}

1
2
3
4
5
6
7
8

.click2pay-divider {
  color: #555;
}

.click2pay-divider::before,
.click2pay-divider::after {
  background-color: #555;
}

Events and tracking

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

form.on("mounted", function (event) {
  if (event.data.entity === "form") {
    console.log("Card form is ready");
  }
  if (event.data.entity === "clicktopay") {
    console.log("Click to Pay button is ready");
  }
});

form.on("submit", function (event) {
  console.log("Payment submitted via:", event.data.entity);
});

form.on("error", function (event) {
  console.error("Payment error:", event.data);
});

For internal analytics and status visibility, tag Click to Pay transactions with click-to-pay across callbacks, payment responses, and reporting views. This allows separate filtering from card-form and other pay-button transactions in dashboards and operational reports.

Limits and behavior

Current limitations:

• Click to Pay integration does not support host-to-host or recurring payments, so you cannot offer it for subscriptions or automatic top-ups.
• Click to Pay does not verify the card with the issuing bank or create a passkey before finalizing the transaction. Use standard 3DS handling unless your account has additional orchestration rules configured.

Use Click to Pay for customer-initiated one-time payments. Do not use Click to Pay tokens for merchant-initiated recurring transactions.

You can Guide
Test payment flows in a sandbox environment to ensure everything works as expected. test Click to Pay in the sandbox using the same approach as Apple Pay: enroll any real card, route it through the sandbox PSP, and complete the payment. Click to Pay does not have dedicated test cards or predefined test amounts.