AX Card Payment SDK

Demo: 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.

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

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 with the token to confirm and capture the payment. Authenticate with your API key (see Authentication).

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.