Elements quickstart

Create a checkout session on your server, pass its client secret to the browser, and mount the integration for your frontend.

1. Create a checkout session

Install the TypeScript server SDK and create a session from a server route. Never put your Bias API key in browser code.

import { Bias } from "@biaspay/sdk";

const bias = new Bias({ apiKey: process.env.BIAS_API_KEY! });

export async function POST() {
    const session = await bias.checkoutSessions.create({
        amount: 5000,
        mode: "payment",
        payment_method_types: ["card", "us_bank_account"],
        submit_label: "pay",
    });

    if (session.object === "error") {
        return Response.json({ error: session.error.message }, { status: 400 });
    }

    return Response.json({ clientSecret: session.client_secret });
}

The amount is in cents. payment_method_types determines which methods PaymentElement offers. See the checkout sessions API for line items, setup mode, shipping options, and the complete request shape.

2. Install a client package

npm install @biaspay/elements

@biaspay/react requires React 19 and a matching React DOM major. @biaspay/solid declares Solid as a peer dependency. Both framework packages install @biaspay/elements and @biaspay/sdk as runtime dependencies.

3. Render the form

Each example collects email, lets the session choose between enabled payment methods, and submits the payment.

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

    const provider = document.querySelector("bias-provider");
    provider.addEventListener("biascomplete", () => {
        location.assign("/order-confirmed");
    });
</script>

<bias-provider client-secret="cs_...">
    <bias-contact-element></bias-contact-element>
    <bias-payment-element payment-method-layout="tabs"></bias-payment-element>
    <bias-submit-button label="Pay now"></bias-submit-button>
</bias-provider>

Pass Solid’s clientSecret as a string expression, not an accessor. Values returned by Solid hooks are accessors where they can change.

4. Fulfill the order on your server

Listen for checkout_session.completed with the event stream. Make fulfillment idempotent because delivery may be retried. The browser’s onComplete callback or biascomplete event is not a durable server signal.

Next steps

• Compose and style the form.
• Connect custom controls to Elements state.
• Read the package reference for web components, React, or Solid.