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

# In-app component

> The in-app PulseCheckout component renders in your React tree, driven by your API key — for trusted runtimes only.

`<PulseCheckout>` (`@pulsebyshiga/collect-react`) is the **in-app** rendering
model: no iframe, no session token. It's driven directly by your **API key**,
so it belongs only in a trusted runtime — a server component, a native app, or
a backend-for-frontend — never a plain browser page.

```tsx theme={null}
import { PulseCheckout, useApiKey } from '@pulsebyshiga/collect-react';
import '@pulsebyshiga/collect-react/styles.css';

<PulseCheckout
  auth={useApiKey(process.env.PULSE_API_KEY!)}
  request={{
    direction: 'offramp', // crypto in → fiat out
    amount: '100.00',
    sourceCurrency: 'USDC',
    destinationCurrency: 'NGN',
    network: 'BASE',
    customer: { id: 'user_123', name: 'Ada', email: 'ada@example.com' },
    account: { accountNumber, accountName, bankCode, bankName },
  }}
  onSuccess={(orderId) => showFunded(orderId)} // UX only — credit off the webhook
/>;
```

`<PulseCheckout>` quotes, creates the order, renders the pay instructions, and
polls status itself — there's no session to mint and no embed to mount.

It renders as a modal, portaled to `document.body`, whose open/closed state is
controlled entirely by the `request` prop — a non-null `request` opens it, `null`
closes it — with `onClose` gating the ×/Esc dismissal; see
[Frontend packages](/reference/frontend) for the full prop reference.

## Trusted runtime only

The API key must stay in a trusted runtime. Constructing it in a real browser
warns — for untrusted browsers, use the [embedded iframe](/render/embedded-iframe)
(Tier A) instead, which is driven by a short-lived session token and never
sees your key.

<Note>
  `onSuccess` fires as soon as the client sees a funded order — it's a UX
  signal only, not proof of settlement.
</Note>

<Warning>
  **Credit a customer only after a verified `disbursement.completed` webhook.**
  Client-side callbacks such as `onSuccess` are UX signals — they can be spoofed.
  The signed webhook is the only source of truth for crediting a user.
</Warning>

## Showing a rate ahead of time

To show a live rate before any order exists, use the `useRate` hook or the
`<PulseRate>` component. Both are proxied through your own backend's
`pulse.rates.preview` route rather than calling the engine directly — see
[Preview a rate](/backend/preview-rate) for the server-side route and
[Theming](/render/theming) for their styling options.