Iframe method

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 for the interactive API reference.

{
  "website": "https://example.com"
}

Step 2 — Configure your page

CDN
NPM package

Add to your <head>:

<link rel="stylesheet" href="https://checkout.beem.africa/dist/0.1_alpha/bpay.min.css"/>
<script src="https://checkout.beem.africa/dist/0.1_alpha/bpay.min.js"></script>

Add the checkout elements to your page:

<div
  id="beem-button"
  data-price="2000"
  data-token="XYZ"
  data-reference="SAMPLE-12345"
  data-mobile="255701000000"
  data-transaction="96f9cc09-afa0-40cf-928a-d7e2b27b2408">
</div>
<div id="beem-page" class="beem-page"></div>

Initialize at the bottom of your page:

<script type="text/javascript">InitializeBeem();</script>

Install the package:

npm install beem-checkout
# or
yarn add beem-checkout

Add the stylesheet to your main HTML page:

<link rel="stylesheet" href="https://checkout.beem.africa/dist/0.1_alpha/bpay.min.css"/>

React example:

import React, { useEffect } from "react";
import initializeBeem from "beem-checkout";

function App() {
  useEffect(() => {
    initializeBeem();
  }, []);

  return (
    <div>
      <div
        id="beem-button"
        data-price="2000"
        data-reference="SAMPLE-12345"
        data-transaction="96f9cc09-afa0-40cf-928a-d7e2b27b2408"
        data-mobile="255701000000"
        data-token="XYZ"
      ></div>
      <div id="beem-page" className="beem-page"></div>
    </div>
  );
}

NPM 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 to test without live transactions.

Getting Started

APIs

Step 1 — Whitelist your domain

Step 2 — Configure your page

Data attributes

Step 3 — Test

​Step 1 — Whitelist your domain

​Step 2 — Configure your page

​Data attributes

​Step 3 — Test

Step 1 — Whitelist your domain

Step 2 — Configure your page

Data attributes

Step 3 — Test