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

# Embedded iframe (Tier A)

> Mount the payment surface inside a Pulse-controlled iframe on your own page, driven by a session token.

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](/backend/create-session)).

<Tabs>
  <Tab title="JavaScript">
    ```ts theme={null}
    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
    ```
  </Tab>

  <Tab title="React">
    ```tsx theme={null}
    import { PulseCollectPayment } from '@pulsebyshiga/collect-react';

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

  <Tab title="React Native">
    ```tsx theme={null}
    import { PulseCollectPayment } from '@pulsebyshiga/collect-react-native';
    // peer deps: react-native-webview

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

<Note>
  Your keys, your users' BVN/NIN, and order internals never enter your DOM —
  they stay inside the Pulse-controlled iframe. See
  [Embed deployment](/testing/embed-deployment) for the hosting and security
  header requirements, and [Theming](/render/theming) for every theme token
  and `strings` placeholder.
</Note>

## 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:

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