Usage

After loading the SDK, initialize it with your publishable key.

TypeScript

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

const bias = new Bias('pk_test_1234567890');

Initializing Checkout

Once the user begins the checkout process, create a checkout session on your server. Then, pass the session client_secret to back to the browser and call beginCheckout with it:

TypeScript

const clientSecret = await fetch('/begin-checkout')
    .then(res => res.json())
    .then(data => data.clientSecret);

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

Customizing appearance

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

Creating components

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

HTML

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

TypeScript

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

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

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