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

# Embed the Blockra Checkout on Your Own Site

> Drop a script tag on your site to open the Blockra checkout in a modal or mobile drawer — buyers pay in crypto without leaving your page, and funds settle to your own wallet.

Blockra's embeddable checkout drops your crypto checkout straight onto your own site. Add one script tag and a button — when a buyer clicks, the checkout opens in a modal (a bottom drawer on mobile) and they pay in place, without leaving your page. As always, funds settle directly into your own wallet; Blockra never holds them.

It's the same checkout as the [hosted page](/guides/hosted-checkout), rendered inline. Start from a [payment link](/api-reference/create-payment-link) (reusable) or a [checkout session](/api-reference/create-checkout-session) (one-time).

## Quickstart

<Steps>
  <Step title="Add the loader">
    Drop the script anywhere on your page — usually just before `</body>`.

    ```html theme={null}
    <script src="https://checkout.blockra.io/blockra.js"></script>
    ```
  </Step>

  <Step title="Add a buy button">
    Give any element a `data-blockra-link` attribute set to your payment-link id. The loader wires up the click for you.

    ```html theme={null}
    <button data-blockra-link="plink_your_link_id">Pay with crypto</button>
    ```
  </Step>

  <Step title="That's it">
    Clicking opens the checkout in a modal. The buyer enters their email, picks a coin, and pays — then sees a confirmation, all without leaving your site.
  </Step>
</Steps>

## Ways to open it

The loader auto-binds any element carrying one of these attributes. Add `data-blockra-theme="light"` or `"dark"` to force a colour scheme.

<CodeGroup>
  ```html One product theme={null}
  <button data-blockra-link="plink_abc123">Pay with crypto</button>
  ```

  ```html Product picker theme={null}
  <!-- Two or more links -> the buyer picks a product first -->
  <button data-blockra-links="plink_starter,plink_pro,plink_team">Buy</button>
  ```

  ```html Existing session theme={null}
  <!-- A session you minted server-side with POST /checkout/sessions -->
  <button data-blockra-session="cs_abc123">Checkout</button>
  ```
</CodeGroup>

## Programmatic API

Prefer to open it from your own code? Call `Blockra.checkout(options)`:

```js theme={null}
Blockra.checkout({
  link: "plink_abc123",
  theme: "dark",
  onSuccess: ({ sessionId, paymentId }) => {
    console.log("paid", paymentId);
  },
  onClose: () => {
    // buyer dismissed the checkout
  },
});
```

<ParamField body="link" type="string">
  A single payment-link id (or its full URL). Opens straight to the product.
</ParamField>

<ParamField body="links" type="string[] | string">
  Several payment-link ids — an array, or a comma-separated string. The buyer picks a product first.
</ParamField>

<ParamField body="session" type="string">
  A checkout-session id from [`POST /checkout/sessions`](/api-reference/create-checkout-session). Use this for one-time, server-priced charges.
</ParamField>

<ParamField body="theme" type="&#x22;light&#x22; | &#x22;dark&#x22;">
  Force the checkout's colour scheme. Omit to follow the buyer's system preference.
</ParamField>

<ParamField body="onSuccess" type="function">
  Called once the payment confirms, with `{ sessionId, paymentId }`.
</ParamField>

<ParamField body="onClose" type="function">
  Called when the buyer closes the modal or drawer.
</ParamField>

Call `Blockra.close()` to dismiss the current checkout programmatically.

## What the buyer sees

* **One link (or a session)** — the product detail: amount, email, coin selection, then the deposit address.
* **Multiple links** — a product picker first, then the detail for the chosen one.
* **On mobile** — the whole thing opens as a bottom drawer instead of a centred modal.

<Note>
  `onSuccess` is a convenience for updating your UI. Treat the [webhook](/webhooks) (or a server-side [`GET /payments/{id}`](/api-reference/get-payment)) as the source of truth before fulfilling an order — a browser callback can be missed or spoofed.
</Note>

## Branding

Colours and branding are set in your dashboard, not per-embed, so every checkout stays consistent:

* **Accent colour** — set a custom accent (Startup plan and above); it applies to the hosted page and every embed.
* **Remove “Powered by Blockra”** — hide the footer (Startup plan and above).

The `theme` option only chooses light or dark — it can't override your accent or remove branding.

<Warning>
  Load `blockra.js` from `https://checkout.blockra.io`. The loader and the iframe it opens must share an origin, so don't self-host or proxy the script.
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="Create a payment link" icon="link" href="/api-reference/create-payment-link">
    Mint the reusable link you embed.
  </Card>

  <Card title="Hosted checkout" icon="browser" href="/guides/hosted-checkout">
    The full-page version of the same checkout.
  </Card>

  <Card title="Verify with webhooks" icon="bell" href="/webhooks">
    Confirm payments server-side before fulfilling.
  </Card>

  <Card title="Create a session" icon="code" href="/api-reference/create-checkout-session">
    One-time, server-priced charges.
  </Card>
</CardGroup>