Reference

Explore the Bias Web SDK’s methods and types.

Initialize Checkout

bias.beginCheckout(params)

Create a new checkout instance for a given client secret.

Parameters

Name

params

Type

object,

Child properties

Name

clientSecret

Type

string or null,

Returns

A checkout instance.

JavaScript

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

Create a Checkout Element

checkout.createElement(type, element)

Construct a checkout element and add it to the page.

Parameters

Name

type

Type

enum,

Array item properties

Name

element

Type

HTMLElement,

Returns

A void promise.

JavaScript

const element = document.querySelector('#payment-container');
checkout.createElement('payment', element);

Get the current Checkout Session

checkout.loadSession()

Get the full current checkout session for the provided client secret. This will also update the components with new data if the session has changed.

Returns

A promise that resolves to a Checkout Session object.

JavaScript

const session = await checkout.session();

Update Checkout appearance

checkout.updateAppearance(appearance)

Update the appearance of the checkout component.

Parameters

Name

appearance

Type

object,

Child properties

Returns

A void promise.

JavaScript

checkout.updateAppearance({
    themeColor: "#192d58",
    font: {
        size: {
            base: "1rem",
            lg: `${18 / 16}rem`,
            md: `${14.5 / 16}rem`,
            sm: `${13 / 16}rem`,
        },
        weight: "normal",
    },
    inputs: {
        color: "rgba(0 0 0 / 0.8)",
        background: "#ffffff",
        border: {
            color: "rgba(0 0 0 / 0.14)",
            radius: "8px",
            width: "1px",
        },
        padding: {
            x: "0.85rem",
            y: "0.475rem",
        },
        boxShadow: "0 2px 4px 0 rgba(0 0 0 / 0.05), 0 1px 1.5px 0 rgba(0 0 0 / 0.03)",
        ":invalid": {
            color: "#e53e3e",
        },
        ":focus": {
            border: {
                color: "#4688d8",
            },
            ring: {
                width: "3.5px",
            },
        },
        ":disabled": {
            background: "rgba(0 0 0 / 0.05)",
            color: "rgba(0 0 0 / 0.5)",
            border: {
                color: "rgba(0 0 0 / 0.1)",
            },
        },
        "::placeholder": {
            color: "rgba(0 0 0 / 0.5)",
        },
    },
    labels: {
        color: "rgba(0 0 0 / 0.8)",
        padding: "0.25rem",
        font: {
            weight: "normal",
            tracking: "normal",
            transform: null,
        },
    },
    button: {
        font: {
            weight: "normal",
            tracking: "normal",
            transform: null,
        },
        ":success": {
            background: "#16a34a",
        },
    },
    gap: {
        x: "1rem",
        y: "1.125rem",
    },
    elements: {
        payment: {
            cardNumber: {
                cardIcons: true,
            },
            country: true,
            postalCode: true,
            startCollapsed: false,
        },
    },
});

Update Checkout billing details

checkout.updateBillingDetails(billingDetails)

Update the session’s billing details.

Parameters

Name

billingDetails

Type

object,

Child properties

Returns

A void promise.

JavaScript

checkout.updateBillingDetails({
	name: "John Doe",
	address: {
		line1: "123 Main St",
		line2: null,
		city: "Los Angeles",
		state: "CA",
		postalCode: "90001",
		country: "US",
	},
});

Update Checkout email

checkout.updateEmail(email)

Update the session’s email. When the session completes, the created customer will have this email.

Parameters

Name

email

Type

string,

Returns

A void promise.

JavaScript

checkout.updateEmail("john@bias.dev");

Update Checkout phone

checkout.updatePhone(phone)

Update the session’s phone number. When the session completes, the created customer will have this phone number.

Parameters

Name

phone

Type

string,

Returns

A void promise.

Update Checkout client secret

checkout.updateClientSecret(clientSecret)

Update the Checkout client secret to point to a different session. This will reset the state of the checkout component(s).

Parameters

Name

clientSecret

Type

string,

Returns

A promise that resolves to a Checkout Session object.

JavaScript

checkout.updateClientSecret("uEyLI6rmFylTwIBik5cpn8ge");

Submit all components

checkout.submit()

Returns

Void.

JavaScript

checkout.submit();

Add an event listener

checkout.addEventListener(event, listener)

Add an event listener to the checkout session.

Parameters

Name

event

Type

enum,

Array item properties

ready

complete

Name

listener

Type

() => void,

Returns

A void promise.

JavaScript

checkout.addEventListener('complete', () => {
	location.href = '/success';
});