Elements integration

Install a checkout elements package, render a payment form, and handle completion.

This page covers all three client packages. Choose the section that matches your stack:

React (@biaspay/react)
SolidJS (@biaspay/solid)
Web components (@biaspay/web)

Before starting, create a checkout session on your server and make the client_secret available to your frontend.

React

Installation

npm install @biaspay/react

Provider setup

Wrap your payment page in BiasProvider. Pass the clientSecret from your checkout session and an onComplete callback.

import { BiasProvider } from "@biaspay/react";

function CheckoutPage({ clientSecret }: { clientSecret: string }) {
    return (
        <BiasProvider
            clientSecret={clientSecret}
            onComplete={() => {
                window.location.href = "/order-confirmed";
            }}
        >
            {/* payment form goes here */}
        </BiasProvider>
    );
}

BiasProvider accepts these props:

Prop	Type	Description
`clientSecret`	`string`	The checkout session client secret. Required.
`onComplete`	`() => void`	Called after a successful payment.
`apiBaseUrl`	`string`	Override the Bias API base URL (useful for testing).

Pre-built forms

The fastest path is a pre-built form component. PaymentForm renders card and bank account methods with a submit button, validation, and error display.

import { BiasProvider, PaymentForm } from "@biaspay/react";

function CheckoutPage({ clientSecret }: { clientSecret: string }) {
    return (
        <BiasProvider clientSecret={clientSecret} onComplete={() => { /* ... */ }}>
            <PaymentForm />
        </BiasProvider>
    );
}

If you only need one payment method, use CardForm or BankAccountForm instead.

import { CardForm } from "@biaspay/react";

// Inside BiasProvider:
<CardForm />

import { BankAccountForm } from "@biaspay/react";

// Inside BiasProvider:
<BankAccountForm />

Form props

All three form components accept these optional props:

Prop	Type	Default	Description
`compact`	`boolean`	`false`	Render a more compact layout.
`style`	`"tab" \| "radio"`	`"tab"`	Payment method selection style (`PaymentForm` only).
`variables`	`ThemeVariables`	—	Override theme variables.

For example:

<PaymentForm compact style="radio" variables={{ colorPrimary: "#4f46e5" }} />

For full layout control using individual field components and hooks, see custom forms.

SolidJS

Installation

npm install @biaspay/solid

Note

@biaspay/solid requires SolidJS 2.0 beta (solid-js@2.0.0-beta.7 and @solidjs/web@2.0.0-beta.7).

API surface

The Solid package wraps @biaspay/web and exposes matching checkout components and hooks for Solid applications:

import { BiasProvider, PaymentForm, CardForm, BankAccountForm } from "@biaspay/solid";

Differences from React

BiasProvider’s clientSecret prop accepts either a string or an Accessor<string> for reactive updates.
Hooks that return reactive values (like useIsSubmittable, useSubmitState, usePaymentError, useSelectedPaymentMethod) return Solid accessors (functions) instead of plain values. Call them to read the current value.

Example

import { BiasProvider, PaymentForm } from "@biaspay/solid";

function CheckoutPage(props: { clientSecret: string }) {
    return (
        <BiasProvider
            clientSecret={props.clientSecret}
            onComplete={() => {
                window.location.href = "/order-confirmed";
            }}
        >
            <PaymentForm />
        </BiasProvider>
    );
}

For custom form composition in Solid, see custom forms.

Web components

Installation

npm install @biaspay/web

Registering elements

Import @biaspay/web once on the page where you render checkout. The package registers the Bias custom elements with the browser.

import "@biaspay/web";

Wrap the form in <bias-provider> and pass the checkout session client secret with the client-secret attribute. Listen for the complete event to redirect or update your page after a successful payment.

<bias-provider id="checkout" client-secret="cs_test_...">
    <bias-payment-form></bias-payment-form>
</bias-provider>

<script type="module">
    import "@biaspay/web";

    document.getElementById("checkout").addEventListener("complete", () => {
        window.location.href = "/order-confirmed";
    });
</script>

<bias-provider> accepts these attributes:

Attribute	Description
`client-secret`	The checkout session client secret. Required.
`api-base-url`	Override the Bias API base URL (useful for testing).
`frame-url`	Override the secure field iframe URL.

Pre-built forms

Use a pre-built form element inside <bias-provider>.

<bias-provider client-secret="cs_test_...">
    <bias-payment-form></bias-payment-form>
</bias-provider>

If you only need one payment method, use <bias-card-form> or <bias-bank-account-form> with <bias-submit-button>.

<bias-provider client-secret="cs_test_...">
    <bias-card-form></bias-card-form>
    <bias-submit-button></bias-submit-button>
</bias-provider>

<bias-provider client-secret="cs_test_...">
    <bias-bank-account-form></bias-bank-account-form>
    <bias-submit-button></bias-submit-button>
</bias-provider>

Form attributes and styling

<bias-payment-form> accepts these attributes:

Attribute	Description
`compact`	Render a more compact layout.
`list-style`	Payment method selection style: `"tab"` or `"radio"`.

Use CSS custom properties to style the form:

<bias-payment-form
    compact
    list-style="radio"
    style="--bias-color-primary: #4f46e5; --bias-border-radius: 8px;"
></bias-payment-form>

Complete example

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

<script type="module">
    import "@biaspay/web";

    const provider = document.createElement("bias-provider");
    provider.setAttribute("client-secret", "cs_test_...");
    provider.addEventListener("complete", () => {
        window.location.href = "/order-confirmed";
    });

    const paymentForm = document.createElement("bias-payment-form");
    paymentForm.setAttribute("list-style", "radio");
    paymentForm.style.setProperty("--bias-color-primary", "#4f46e5");

    provider.appendChild(paymentForm);
    document.getElementById("payment-container").appendChild(provider);
</script>

For the full web components API, see the web components reference.

React
SolidJS
Web components