BiasDocs

Reference

View the web SDK’s methods and type definitions.

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,
or

Returns

A checkout instance.

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.

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

Get the current Checkout Session

checkout.session()

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.

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.

checkout.updateAppearance({
	// Base appearance:
    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.

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.

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.

checkout.updateClientSecret("uEyLI6rmFylTwIBik5cpn8ge");

Submit all components

checkout.submit()

Returns

Void.

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.

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

Created by Bias in California