> ## Documentation Index > Fetch the complete documentation index at: https://docs.beem.africa/llms.txt > Use this file to discover all available pages before exploring further. # Iframe method > Embed Beem checkout on your website using the checkout library. The iframe method lets customers complete payment without leaving your website. Beem's checkout library renders a checkout button and loads the payment page in an embedded iframe. *** ## Step 1 — Whitelist your domain Your application domain must be whitelisted before using the checkout library. See [Whitelist website for iframe checkout](/api-reference/payments-checkout/whitelist-website-for-checkout) for the interactive API reference. ```json theme={null} { "website": "https://example.com" } ``` *** ## Step 2 — Configure your page Add to your ``: ```html theme={null} ``` Add the checkout elements to your page: ```html theme={null}

``` Initialize at the bottom of your page: ```html theme={null} ``` Install the package: ```bash theme={null} npm install beem-checkout # or yarn add beem-checkout ``` Add the stylesheet to your main HTML page: ```html theme={null} ``` React example: ```jsx theme={null} import React, { useEffect } from "react"; import initializeBeem from "beem-checkout"; function App() { useEffect(() => { initializeBeem(); }, []); return (

); } ``` [NPM package — beem-checkout](https://www.npmjs.com/package/beem-checkout) *** ## Data attributes | Attribute | Required | Description | | ------------------ | -------- | ----------------------------------------------------------------------------- | | `data-price` | Yes | Item price. Decimals not allowed | | `data-reference` | Yes | Alphanumeric reference matching your route pattern (e.g. `SAMPLE-12345`) | | `data-transaction` | Yes | UUID v4 transaction ID | | `data-mobile` | No | Customer mobile number with country code (e.g. `255701000000`) | | `data-token` | No | Client validation token — returned in callback headers as `beem-secure-token` | | `beem-page` | Yes | Container element where the checkout iframe is loaded | *** ## Step 3 — Test Click the Beem checkout button on your page. The iframe loads inside the `beem-page` element when the customer initiates payment. Use the [Sandbox](/guides/payments-checkout/sandbox) to test without live transactions.