Checkout SDK

The hosted checkout renders cards, wallets and local payment methods inside your page, with card data going straight to the apay vault.

Loading

<script src="https://apay.to/web/0.133.0/v1/HyperLoader.js"></script>

The SDK is pinned to a version in the URL. apay announces new versions in the changelog; the previous version keeps working for at least 6 months.

Initialise

const hyper = window.Hyper(publishableKey, {
  customBackendUrl: "https://apay.to/api"   // optional, this build already points at apay
});
const widgets = hyper.widgets({
  clientSecret,                              // from POST /payments on your server
  appearance: {
    theme: "default",                        // default | midnight | charcoal | soft | brick | bubblegum | none
    variables: { colorPrimary: "#635bff", fontFamily: "Inter, sans-serif", borderRadius: "8px" }
  },
  locale: "en"                               // en, zh, ja, ar, fr, de, es, …
});

Create and mount the payment element

const checkout = widgets.create("payment", {
  layout: "tabs",                            // tabs | accordion | spaced accordion
  showCardFormByDefault: true,
  branding: "never",
  wallets: {
    walletReturnUrl: "https://shop.example/checkout",
    applePay: "auto", googlePay: "auto", payPal: "auto",
    style: { theme: "dark", type: "default", height: 46 }
  },
  billing: { address: { country: "SG" } }    // prefill; hides the fields you already know
});
checkout.mount("#checkout");

Confirm

const { error, data, status } = await hyper.confirmPayment({
  widgets,
  confirmParams: { return_url: "https://shop.example/checkout" },
  redirect: "if_required"
});

• With redirect: "if_required" the promise resolves in-page for frictionless card payments. For 3-D Secure challenges and redirect wallets the browser is sent to the processor and returns to return_url with payment_id and status query parameters.
• With redirect: "always" the browser always returns to return_url.
• On return, read payment_id from the query string, then retrieve the payment on your server or wait for the webhook.

Saved cards and customers

Pass a customer_id when creating the payment and set setup_future_usage: "off_session" to store the card in the vault. The next payment for the same customer shows the saved card in the checkout. Cards are stored as tokens; your servers never see the PAN.

Payment methods shown

The checkout lists the payment methods enabled on the processors attached to your business profile, filtered by currency, country and amount. Manage them in Dashboard → Processors. In the sandbox, the Stripe Test processor provides cards and the PayPal Test processor a simulated wallet.

Mobile apps

Native SDKs for iOS, Android, React Native and Flutter use the same client_secret flow and the same publishable key. Apple Pay in an iOS app requires your own Apple merchant identifier; see Wallets.

Reference

Every option accepted by widgets.create("payment", …) and confirmPayment is listed in the API reference under Checkout SDK; ask dev@apay.to for the full option sheet.