Embed the 0Gate widget
Mount the hosted 0Gate iframe from a web page with a publishable key, session client secret, and callback handlers.
The 0Gate widget is the default public integration surface for web apps. Your server creates the session and your browser mounts the hosted iframe with pk_* plus the session client_secret. The SDK bootstraps the embed, enforces the origin allowlist, and forwards lifecycle callbacks to your app.
Mount model
Browser example
import { GateRamp } from '@0bit/gate/browser';
const ramp = new GateRamp({
publishableKey: import.meta.env.VITE_GATE_PUBLISHABLE_KEY,
clientSecret,
environment: 'sandbox',
theme: 'light',
});
await ramp.mount('#gate-container', {
onReady: () => setWidgetReady(true),
onSuccess: ({ txId, sessionId }) => {
setCheckoutState({ status: 'pending_webhook', txId, sessionId });
},
onError: ({ code, message }) => {
reportClientSignal({ code, message });
},
onClose: ({ reason }) => {
setCheckoutState({ status: 'closed', reason });
},
onUnavailable: ({ reason }) => {
setCheckoutState({ status: 'unavailable', reason });
},
});React blocks
Use the full RampCheckout component when users can choose a hosted tab. Use the flow-locked blocks when the surrounding product UI has already selected the task.
import { GateOnRamp } from '@0bit/gate/react';
export function BuyPanel({ clientSecret }: { clientSecret: string }) {
return (
<GateOnRamp
publishableKey={import.meta.env.VITE_GATE_PUBLISHABLE_KEY}
clientSecret={clientSecret}
environment="sandbox"
onSuccess={({ txId, sessionId }) => {
console.log('UX complete, waiting for webhook', txId, sessionId);
}}
/>
);
}Embed rules
| Rule | Why |
|---|---|
| Register exact origins in allowed domains. | Embed bootstrap checks the request origin against partner configuration. |
Keep sk_* out of the browser. | The browser should only receive pk_* and session-scoped secrets. |
| Mount one widget per session container. | A session represents one hosted journey. |
| Treat callbacks as UX only. | Final fulfillment belongs to verified backend events. |
| Unmount on route teardown. | Prevent stale iframe listeners and duplicate callbacks. |
Do not iframe from unapproved origins
The embed path is origin-checked and the response carries partner frame policy. Register each production, staging, and local development origin you plan to use.