> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.alphax.asia/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.alphax.asia/_mcp/server.

# AX Card Payment SDK

Demo: [https://demo.alphax.asia/playground/payment-cs-microform](https://demo.alphax.asia/playground/payment-cs-microform)

## 1. Initialize

Add the script and the element. Use the script URL and client ID we shared with you.

```html
<script src="https://sdk-card-payment.alphax.asia/ax-card-payment/1.0.0/ax-card-payment.iife.js"></script>

<ax-card-payment id="payment" client-id="YOUR_CLIENT_ID"></ax-card-payment>

<button id="pay" disabled>Pay</button>
```

## 2. Submit

Wait for the form to be ready, then call `submit()`. It resolves with a token, or `null` if it failed.

```js
const payment = document.getElementById('payment');
const payBtn = document.getElementById('pay');

const enable = () => (payBtn.disabled = false);
payment.isReady ? enable() : payment.addEventListener('ready', enable, { once: true });

payment.addEventListener('error', (e) => console.error(e.detail)); // human-readable message

payBtn.addEventListener('click', async () => {
  const token = await payment.submit();
  if (token) {
    // Send `token` to your server to complete the payment.
  }
});
```

## 3. Confirm the payment

From your backend, call the [Confirm card payment API](/api-reference/alpha-x-api/card-payments/confirm-card-payment) with the `token` to confirm and capture the payment. Authenticate with your API key (see [Authentication](/authentication)).

> **Warning**
>
> Never call this API from the browser. Your API key must stay on your server.

```bash
curl -X POST https://public-api.alphax.com/card-payments/confirm \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "reference": "ORDER-123123",
    "token": "<token_from_submit>",
    "amount": 1050,
    "currency": "USD",
    "billing": {
      "firstName": "John",
      "lastName": "Snow",
      "email": "john.snow@example.com",
      "addressLine1": "1 Raffles Place",
      "city": "Singapore",
      "state": "Singapore",
      "postalCode": "048616",
      "countryCode": "SG"
    }
  }'
```

`amount` is in cents (e.g. `1050` = 10.50 USD). Check `transaction.status` in the response: `AUTHORIZED` means the payment succeeded, `FAILED` means it was declined, and `PROCESSING` means it is still in progress.