guides

Quickstart

Create a payment, collect a test card in the browser, receive the webhook. About 15 minutes.

1. Get your keys

Secret key (snd_…): used from your server in the api-key header. Never ship it to a browser or app.
Publishable key (pk_snd_…): used by the checkout SDK in the browser.
Profile ID (pro_…): identifies the business profile (processors, routing, webhook URL). Optional if you have one profile.

Until your own account is set up, the demo merchant keys used by apay.to/checkout show the flow end to end.

2. Create a payment from your server

curl https://apay.to/api/payments \
  -H "api-key: $APAY_SECRET_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 2999,
    "currency": "SGD",
    "customer_id": "cus_123",
    "email": "buyer@example.com",
    "description": "Order #1042",
    "capture_method": "automatic",
    "authentication_type": "three_ds",
    "return_url": "https://shop.example/thanks",
    "billing": { "address": { "country": "SG", "first_name": "Ada", "last_name": "Lim" } }
  }'

Amounts are in minor units (2999 = S$29.99; JPY has no minor unit). The response contains the payment_id and a client_secret. Hand only the client_secret to the browser.

{ "payment_id": "pay_XrkzuV9rycdirJwAKtBX", "status": "requires_payment_method",
  "client_secret": "pay_XrkzuV9rycdirJwAKtBX_secret_…", "amount": 2999, "currency": "SGD" }

3. Mount the checkout in the browser

<script src="https://apay.to/web/0.133.0/v1/HyperLoader.js"></script>
<div id="checkout"></div>
<button id="pay">Pay</button>
<script>
  const hyper = window.Hyper("pk_snd_…");                       // publishable key
  const widgets = hyper.widgets({ clientSecret, appearance: { variables: { colorPrimary: "#635bff" } } });
  widgets.create("payment", {
    layout: "tabs",
    wallets: { walletReturnUrl: location.href, applePay: "auto", googlePay: "auto" }
  }).mount("#checkout");

  document.getElementById("pay").onclick = async () => {
    const { error } = await hyper.confirmPayment({
      widgets,
      confirmParams: { return_url: "https://shop.example/thanks" },
      redirect: "if_required"                                  // 3DS and wallets may redirect
    });
    if (error) alert(error.message);
  };
</script>

Use a test card, for example 4242 4242 4242 4242 with any future expiry and CVC.

4. Confirm the result on your server

Never trust the browser for the outcome. Either retrieve the payment:

curl "https://apay.to/api/payments/pay_XrkzuV9rycdirJwAKtBX?force_sync=true" -H "api-key: $APAY_SECRET_KEY"

or, better, listen for the payment_succeeded webhook. Set the webhook URL in Dashboard → Developers → Webhooks (or on the business profile) and verify the signature as described in Webhooks.

5. Server-to-server card payments (optional)

If you are PCI DSS certified you can send card data directly and confirm in one call:

curl https://apay.to/api/payments -H "api-key: $APAY_SECRET_KEY" -H "Content-Type: application/json" -d '{
  "amount": 1999, "currency": "USD", "confirm": true, "capture_method": "automatic",
  "authentication_type": "no_three_ds", "customer_id": "cus_123",
  "payment_method": "card", "payment_method_type": "credit",
  "payment_method_data": { "card": { "card_number": "4242424242424242", "card_exp_month": "12",
    "card_exp_year": "30", "card_holder_name": "Ada Lim", "card_cvc": "123" } },
  "billing": { "address": { "first_name": "Ada", "last_name": "Lim", "country": "SG" } } }'

What next

Checkout SDK: appearance, layouts, saved cards, redirects.
Webhooks: events and signature verification.
Apple Pay and Google Pay.
API reference for refunds, captures, customers, disputes and more.

Questions: dev@apay.to · Back to docs