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: ["apple_pay", "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 enables Apple Pay in ExpressCheckoutElement and card or bank methods in PaymentElement. 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 offers Apple Pay before the ordinary form, then collects email and renders the enabled card or bank methods.

<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-express-checkout-element show-separator></bias-express-checkout-element>
    <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.