Beam Landing Page
The Beam participant landing page is a ready-made page that introduces Beam to a business and lets them start registering. You embed it in an <iframe> on your own site. When the user clicks Register with Beam, the page notifies your page, and you run the Beam registration call and redirect the user to Beam's terms.
The page renders the approved Beam messaging and legal disclaimers for you, so you do not have to reproduce or maintain that content yourself.
For compliance reasons, the page must be embedded directly from Paysense. Do not copy, re-host, or modify the page or its assets.
How it works
- You embed the page in an iframe.
- The user reads the introduction and clicks Register with Beam.
- The page disables the button (so it cannot be clicked twice) and sends your page a
postMessage. - Your page receives the message, calls the Beam API, and redirects the user to Beam's terms.
The page never calls Beam itself. It is a presentation layer; the Beam API call and redirect stay on your side.
Prerequisites
| Item | Description |
|---|---|
| Page URL | The Beam landing page URL to embed, provided by Paysense. |
| Origin registration | Every web origin that will embed the page, added to the Paysense allowlist. Browsers refuse to display the iframe until your origin is registered. |
| Beam registration call | Your own server-side integration with the Beam API, run when the user clicks Register with Beam. |
Send Paysense every exact origin that will embed the page. An origin is the scheme, host, and (if non-standard) port only, with no path and no trailing slash:
https://app.yourcompany.com
https://staging.yourcompany.com
Step 1: Embed the page
Use the exact URL Paysense gives you as the src:
<iframe
src="https://<paysense-page-url>/beam/participant-landing.html"
title="Register with Beam"
style="width: 100%; height: 640px; border: 0;"
></iframe>
Step 2: Handle the register action
Listen for message events on the parent window. When you receive the beam-register action, run your Beam registration call and redirect the user.
Always validate event.origin against the Paysense page origin before acting on a message. Any page can call postMessage on your window.
const PAYSENSE_ORIGIN = "https://<paysense-page-url>";
window.addEventListener("message", (event) => {
// Only trust messages from the Paysense page.
if (event.origin !== PAYSENSE_ORIGIN) return;
if (event.data && event.data.action === "beam-register") {
// Run your Beam registration call, then redirect the user to Beam's terms.
startBeamRegistration();
}
});
The message payload has this shape:
{ "action": "beam-register", "payload": {} }
Targeting your window
To send the message to the right place, the page needs to know your site's origin. By default it detects this automatically from the browser referrer, so no extra configuration is required in the common case.
If your site does not send a referrer to embedded frames, for example because you set Referrer-Policy: no-referrer or sandbox the iframe without allow-same-origin, the page cannot detect your origin automatically. In that case, pass your origin explicitly with the parentOrigin query parameter:
<iframe
src="https://<paysense-page-url>/beam/participant-landing.html?parentOrigin=https://app.yourcompany.com"
title="Register with Beam"
style="width: 100%; height: 640px; border: 0;"
></iframe>
If the page cannot determine your origin (no referrer and no parentOrigin), the button still disables on click but no message is sent. Set parentOrigin whenever you are unsure.
Security model
- Served by Paysense only. The page is always framed from Paysense so the approved Beam messaging and disclaimers cannot drift.
- Origin allowlist. Paysense only permits framing from registered origins. Unregistered sites cannot display the page.
- Validate every message. Your listener must check
event.originagainst the Paysense page origin and ignore anything else. - Targeted messaging. The page posts only to your detected (or
parentOrigin) origin, never to*. - No Beam credentials in the page. The page never calls Beam. The registration call and any Beam credentials stay on your side.
Integration checklist
- Sent Paysense every web origin that will embed the page.
- Embedded the page URL Paysense provided in an iframe.
- Added a
messagelistener that validatesevent.origin. - Handled the
beam-registeraction: called the Beam API and redirected to Beam's terms. - If your site suppresses the referrer, set
?parentOrigin=on the iframe URL.
Getting started
- Contact your Paysense partner manager (or reach out via the website) to discuss your use case.
- Send the origins you will embed from. Paysense registers them and provides the page URL.
- Build against a staging origin and verify the full register-and-redirect flow before going live.