Embedded iframe (Tier A)

The payment surface — quote lock + countdown, QR, live status, edge states — renders inside a Pulse-controlled iframe dropped into your screen. It’s driven by the short-lived session_token (cs_…) your backend minted with pulse.collectionSessions.create (see Create a session).

JavaScript
React
React Native

import { PulseCollect } from '@pulsebyshiga/collect-js';

const handle = PulseCollect.mount(document.getElementById('pay'), {
  sessionToken, // from your backend
  theme: { primaryColor: '#083a9a', fontFamily: 'YourFont, sans-serif' },
  strings: { title: 'Add {target} to your safe' }, // {target}, {asset}, {assetAmount}, {network}
  onSuccess: (orderId) => showFunded(orderId), // UX only — credit off the webhook
  onQuoteExpired: () => {}, // embed offers re-lock itself
});
// handle.unmount() when done

import { PulseCollectPayment } from '@pulsebyshiga/collect-react';

<PulseCollectPayment sessionToken={sessionToken} theme={theme} onSuccess={onFunded} />;

import { PulseCollectPayment } from '@pulsebyshiga/collect-react-native';
// peer deps: react-native-webview

<PulseCollectPayment sessionToken={sessionToken} theme={theme} onSuccess={onFunded} />;

Your keys, your users’ BVN/NIN, and order internals never enter your DOM — they stay inside the Pulse-controlled iframe. See Embed deployment for the hosting and security header requirements, and Theming for every theme token and strings placeholder.

Selection flow vs. a single pinned view

Selection flow is the default. The embed walks the user through Select asset → Choose network → Pay; their choice re-targets the order (new address, QR, and re-locked quote) before payment. To pin the asset/network you set at session creation and skip straight to the single payment view, pass flow: "direct".

Granular components

For partners composing their own payment screen around individual pieces, mount just one:

component: "quote" — the live locked quote and its re-lock control only.
component: "status" — progress and state banners only.

No bundler? Use the script tag

A script-tag build ships alongside the ESM package, for pages with no bundler:

<script src="https://embed.pulse.shiga.io/v1/collect.iife.js"></script>
<script>
  window.PulseCollect.mount(document.getElementById('pay'), {
    sessionToken,
  });
</script>

Get started

Concepts

Backend integration

Render the payment moment

Testing & go-live

Embedded iframe (Tier A)

Selection flow vs. a single pinned view

Granular components

No bundler? Use the script tag

​Selection flow vs. a single pinned view

​Granular components

​No bundler? Use the script tag

Selection flow vs. a single pinned view

Granular components

No bundler? Use the script tag