Embed a single flow with kit blocks
Use 0Gate kit blocks to open the hosted iframe directly into on-ramp, off-ramp, or swap while keeping the session and webhook model unchanged.
Kit blocks are focused entry points into the same hosted 0Gate iframe. Use them when the surrounding UI already captured intent, such as a “Buy crypto”, “Cash out”, or “Swap” action, and the customer should not see the full buy/sell/swap tab strip.
The session should carry the durable lock
The browser factory can assert a flow, but the server-created 0Gate session is the canonical place to lock the flow for production. Hosted redirect, WebViews, callbacks, and webhooks all remain tied to that session.
Flow choices
| Flow | User intent | Hosted surface |
|---|---|---|
on_ramp | Buy crypto with fiat. | The widget opens directly into the buy journey. |
off_ramp | Sell crypto for fiat payout. | The widget opens directly into the sell journey. |
swap | Convert one crypto asset to another. | The widget opens directly into the swap journey. |
Server lock
Create the attempt first, then create the session with the matching flow. Keep the exact request schema in the API reference; the guide-level rule is that the browser should not widen a server-owned session.
const session = await gate.sessions.create({
amount: '100.00',
currency: 'EUR',
flow: 'on_ramp',
return_url: `https://app.example.com/top-up/${attempt.id}/return`,
cancel_url: `https://app.example.com/top-up/${attempt.id}/cancel`,
user_reference: attempt.id,
});Browser factories
Use the factory that matches the intent. Each factory returns a normal GateRamp instance with the flow preset.
import { createGateOnRamp, createGateOffRamp, createGateSwap } from '@0bit/gate/browser';
const buy = createGateOnRamp({
publishableKey: import.meta.env.VITE_GATE_PUBLISHABLE_KEY,
clientSecret,
environment: 'sandbox',
});
await buy.mount('#buy-crypto', {
onSuccess: () => showProcessingState(),
onClose: () => showRetryState(),
});const sell = createGateOffRamp({ publishableKey, clientSecret });
const swap = createGateSwap({ publishableKey, clientSecret });React components
React apps can use the flow-specific wrappers. They render the same hosted iframe and inherit the same callback model.
import { GateOnRamp, GateOffRamp, GateSwap } from '@0bit/gate/react';
<GateOnRamp
publishableKey={import.meta.env.VITE_GATE_PUBLISHABLE_KEY}
clientSecret={clientSecret}
environment="sandbox"
onSuccess={() => setView('processing')}
onClose={() => setView('retry')}
/>;What changes and what stays the same
| Area | Full widget | Kit block |
|---|---|---|
| Hosted iframe | Same 0Gate iframe. | Same 0Gate iframe. |
| Flow selection | User can choose from available tabs. | One flow is asserted and the tab strip is hidden. |
| Session creation | Server-owned. | Server-owned. |
| Browser callbacks | UX hints. | UX hints. |
| Settlement truth | Signed backend event. | Signed backend event. |
| Public API boundary | 0Gate hosted path. | 0Gate hosted path. |
Do not use kit blocks for
- Building a custom KYC, quote, payment, payout, or swap execution UI.
- Bypassing hosted 0Gate screens for public flows.
- Letting browser config override a server-owned amount, currency, wallet, or flow.
- Publishing liquidity, provider, compliance-rule, treasury, or routing internals.
Related pages
Embed the Gate widget
Mount the hosted 0Gate iframe with the public browser SDK, keep session creation server-side, and use callbacks only for browser UX.
Use hosted redirect & WebViews
Send users to the hosted 0Gate checkout when iframe embedding is blocked, then return them to a status page backed by your server.