Usage

First, initialize the checkout SDK in the browser:

import { Bias } from '@biaspay/checkout';

const bias = new Bias();

When the user begins the checkout process, create a checkout session on your server. Usually, this is when they click a "Checkout" or "Buy" button.

Send the checkout session's client_secret to the browser and use it to call beginCheckout:

const clientSecret = /* fetched or embedded in your HTML response */

const checkout = bias.beginCheckout({ clientSecret });

Customizing appearance

Use the appearance option to change the the components’ colors, fonts, spacing, focus states, and more.

const checkout = bias.beginCheckout({
    clientSecret,
    appearance: {
        inputs: { color: "#0b2570" },
        elements: {
            payment: { startCollapsed: true },
        },
    },
});

Creating components

Create checkout components by calling checkout.createElement with the component type and an element to mount to:

<div id="payment-container"></div>
<div id="submit-container"></div>

const paymentContainer = document.getElementById('payment-container');
const submitContainer = document.getElementById('submit-container');

checkout.createElement('payment', paymentContainer);
checkout.createElement('submit', submitContainer);

Client completion event

A success message can be shown by adding an event listener to the checkout instance:

checkout.addEventListener('complete', () => {
    const session = await checkout.session();
	location.href = `/payment-success?session=${session.id}`;
});

Server completion event

Order fulfillment should be handled on the server side by subscribing to the API event stream:

server.ts

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

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

Learn more about how to interact with the components in the SDK reference.

Open in ChatGPT