> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bleepay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout Flow

export const ThemeImage = ({img_name, alt, width, height}) => {
  return <>
            <img width={width} height={height} src={`/images/light/${img_name}`} alt={alt} className="block dark:hidden" />
            <img width={width} height={height} src={`/images/dark/${img_name}`} alt={alt} className="hidden dark:block" />
        </>;
};

> User and merchant steps in the Bleepay checkout experience.

This page describes the checkout flow from the customer's and merchant's perspective.

## Customer journey

1. **Browse and cart** — Customer shops as usual on your site.
2. **Select Bleepay** — At checkout, they choose "Pay with Bleepay" (or your branded label).
3. **Get a code** — They open their Bleepay-compatible wallet (same device or another), generate a 6-digit session code.
4. **Enter code** — They type (or paste) the code into the payment form on your site.
5. **Confirm in wallet** — Their wallet shows the transaction (amount, recipient, fees); they approve.
6. **Done** — They see success on your site; you receive funds and can fulfill the order.

No wallet connection on your domain, no extension, no popups. Just a code and a confirmation step in the wallet.

## Merchant steps

1. **Add Bleepay to checkout** — Integrate the API and pass the voucher code, expected payment parameters, and order ID when the user selects Bleepay.
2. **Show code entry** — Provide an input for the user's 6-digit code.
3. **Handle webhook** — When you receive `payment.settled`, mark the order as paid and fulfill it.
4. **Monitor** — Use the Bleepay dashboard to track transactions and payouts.

## UX best practices

* **Clear instructions**: Tell the user to open their wallet, generate a code, and enter it (and that the code expires after a short time).
* **Error handling**: Handle invalid/expired codes and show a clear message or retry option.
* **Mobile**: The flow works on mobile; ensure the code input is easy to use on small screens.

## Diagram (high level)

<ThemeImage img_name="Checkout-Flow.png" alt="Checkout Flow" />

## Next steps

* [Integration overview](/home/web2-web3-payments/overview) — technical integration steps.
* [Webhooks](/home/e-commerce/webhooks) — handling server-side events.