Payment flow

How a payment moves from your server through the checkout elements to completion.

Lifecycle

1. Your server creates a checkout session. Call the Bias API with line items and an amount. The response includes a client_secret.

2. Your client receives the client secret. Pass the client_secret to the browser — embed it in your HTML response or fetch it from an endpoint.

3. The user fills in payment details. Sensitive fields (card number, expiry, CVC, bank account and routing numbers) render inside iframes hosted by Bias. Non-sensitive value fields (country, postal code, name, account type) render locally in your page. The checkout elements manage validation and formatting for both.

4. The client submits the payment. When the user clicks the submit button (or you call submit() programmatically), the iframe-hosted fields encrypt the sensitive data and send it directly to Bias. The value fields are sent alongside as billing details.

5. Bias processes the payment. Bias validates the data, charges the payment method, and records the result on the checkout session.

6. Completion events fire. On the client, the onComplete callback fires so you can show a success message or redirect. On the server, a checkout_session.completed event is emitted, which you can consume via event streaming to fulfill the order.

What are checkout elements

Checkout elements are client-side UI components that collect payment information. They exist for two reasons:

• PCI compliance. Sensitive card and bank account data is entered into iframes hosted by Bias. The data is encrypted before it leaves the iframe and never passes through your servers.
• Developer experience. The elements handle input masking, validation, error display, card brand detection, and accessible focus management. You get a production-ready payment form without building any of that yourself.

Choosing a package

All three packages produce the same payment form UI and use the same core logic. Choose the one that matches your frontend stack, then follow the elements integration guide.

Server-side completion

Order fulfillment should always happen on the server. Subscribe to the event stream and listen for checkout_session.completed:

const stream = await bias.events.list({
    stream: true,
    filters: { type: "checkout_session.completed" },
});

for await (const event of stream) {
    const session = event.state as CheckoutSession;
    // Fulfill the order using session.id
}