Checkout Elements

Build an embedded checkout with secure payment fields and host-page contact and address forms.

Elements reads a checkout session, shows the payment methods enabled for that session, validates the form, and creates the payment. Card numbers and bank account numbers stay inside Bias-hosted iframes; your page only owns non-sensitive fields such as email and address.

Choose an integration

All three packages expose the same checkout components and use the same underlying custom elements.

Svelte is bundled inside @biaspay/elements as its renderer; it is not a peer dependency or a separate public integration.

How checkout works

1. Your server creates a checkout session with a secret API key.
2. Your server returns only the session’s client_secret to the browser.
3. The browser mounts one Elements provider and one payment surface.
4. Elements validates the form, saves collected customer and address details, and creates the payment.
5. The browser receives a completion signal. Your server receives a checkout_session.completed event and fulfills the order.

The browser completion callback is useful for navigation and confirmation UI. Treat the server event as the durable fulfillment signal.

What to build

Every Elements tree has:

• One provider, configured with a checkout-session client secret.
• Exactly one of PaymentElement, CardElement, or USBankAccountElement.
• Optional ContactElement and billing or shipping AddressElement components.
• A SubmitButton, or your own control connected through the integration API.