# Independent card binding

> Instructions for integrating the independent card binding SDK, enabling merchants to allow buyers to bind bank cards at any stage of the payment process.

The independent card binding SDK enables buyers to bind their bank cards at any stage of the payment process, and it provides the following functions:

-   Provide a card binding element collection page to help you go through the embedded page to collect card payment elements.
-   Provide an alert page during the card binding process.
-   Support merchants to render multi-language payment pages, currently supporting eight languages: English, Portuguese, Korean, Spanish, French, German, Italian, and Dutch.

## User experience

The user experience is shown in the following figure:

![image.png](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/1702976812755-ca70c8f0-36a8-4a26-b563-2a2c8676869c.png)

Figure 1. User experience of independent card binding

## Prerequisites

Before integrating the SDK, familiarize yourself with the [Integration guide](https://docs.antom.com/integration.md) and [API Overview](https://docs.antom.com/ac/ams/api_fund.md). This will enable you to understand the steps for integrating server APIs and notes for calling the APIs. Also, ensure that you have completed the following tasks:

-   Obtain a client ID in [Antom Dashboard](https://dashboard.alipay.com/global-payments/home).
-   Properly configure keys in [Antom Dashboard](https://dashboard.alipay.com/global-payments/home).
-   Configure a URL for receiving an asynchronous notification of a card-binding result. Please refer to [Notifications](notifications) for more details.

## Integration steps

The integration flow of independent card binding SDK is shown as follows:

![1736490577789-4d070374-49f2-4771-bde5-d7e327b718e6.png](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/05a5d509-00c7-4258-9c20-593ce7550dad.png)

Figure 2. Independent card binding interaction process

When implementing an independent card binding SDK integration, two parties are involved:

-   **Server-side**: Send a [**createVaultingSession**](vaulting_session) API, and obtain the binding result.
-   **Client-side**: Use asset binding session data to render card binding element collection components and handle jump operations.

Follow these steps to complete the integration:

1.  Client-side**Create an SDK instance**:
    After your client creates the payment method page and implements the monitoring of the payment button click event, run the `AMSCashierPayment()` method to create the SDK instance.
2.  Server-side**Call the createVaultingSession API:
    **After a buyer clicks the **Add card** button, your server sends [**createVaultingSession**](vaulting_session) request to Antom server.

3\. Client-side**Render card binding element collection components**:

Use the response parameter _vaultingSessionData_ of **createVaultingSession** request, and render card binding element collection components through `mountComponent()`.

4.  **The buyer fills in and submits the card binding information**:
    After the buyer fills in the card information and submits it on the card binding element collection page, the SDK will jump the buyer to the merchant page.
5.  Server-side**Obtain and display the card binding result**:
    Your server obtains the binding result through [**notifyVaulting**](notify_vaulting) API and presents the bound desensitized card number to the buyer on the Binding Management page. For subsequent payments, you need to pass in the token that is obtained from the first payment via [**notifyVaulting**](notify_vaulting) API.

For more detailed integration information on Web/WAP, Android, or iOS clients, learn the following topics:

-   [Web/WAP](vaulting_web)
-   [Android](vaulting_android)
-   [iOS](vaulting_ios)