Theme and co-brand the widget
Use the supported 0Gate theme and co-branding surfaces without styling inside the hosted iframe or exposing branding internals.
0Gate gives you two public presentation layers: a runtime light or dark theme for the hosted iframe, and partner co-branding tokens where your account is enabled for them. Everything outside the iframe is your product UI; everything inside the hosted checkout remains controlled by 0Gate.
Do not style inside the iframe
Do not inject CSS, scrape DOM nodes, depend on internal class names, or document private widget internals. Use the SDK theme and approved co-branding settings only.
Presentation layers
| Layer | Controlled by | What you can do |
|---|---|---|
| Page shell | Your app | Layout, container sizing, instructions, loading state, support links, and status pages. |
| 0Gate iframe theme | SDK config | Set theme to light or dark; update it at runtime in browser embeds. |
| Co-branding tokens | 0Gate account settings/API | Configure logo, brand name, and approved colors where enabled. |
| Hosted checkout internals | 0Gate | KYC, payment, quote, compliance, error, and terminal screens. |
Set the iframe theme
Browser embed:
import { GateRamp } from '@0bit/gate/browser';
const ramp = new GateRamp({
publishableKey: import.meta.env.VITE_GATE_PUBLISHABLE_KEY,
clientSecret,
theme: 'light',
});
await ramp.mount('#gate-checkout');
ramp.setTheme('dark');React:
import { RampCheckout } from '@0bit/gate/react';
<RampCheckout
publishableKey={import.meta.env.VITE_GATE_PUBLISHABLE_KEY}
clientSecret={clientSecret}
theme={mode}
/>;Hosted redirect:
GateRamp.redirectToCheckout({
publishableKey,
clientSecret,
theme: 'dark',
});Co-branding
Co-branding is account-level configuration. Use it for approved brand tokens, not for arbitrary CSS.
| Token | Public use |
|---|---|
brand_name | Display name shown in the hosted experience where supported. |
logo_url | Absolute HTTPS logo URL. |
primary_color | Main approved brand color. |
secondary_color | Secondary approved brand color. |
accent_color | Accent approved brand color. |
Keep exact schema in API reference
The co-branding endpoints and validation rules are API-reference content. This guide should explain the product boundary and when to use branding, not duplicate every request and response field.
Page shell pattern
Keep your page shell simple and product-owned. The shell can explain the action, show a loading state, and hold the iframe. It should not pretend to be the payment, compliance, or settlement engine.
export function GateCheckoutPanel({ clientSecret }: { clientSecret: string }) {
return (
<section className="checkout-panel">
<header>
<h1>Complete your checkout</h1>
<p>0Gate will guide you through the secure hosted flow.</p>
</header>
<RampCheckout
publishableKey={import.meta.env.VITE_GATE_PUBLISHABLE_KEY}
clientSecret={clientSecret}
theme="light"
onSuccess={() => setView('processing')}
/>
</section>
);
}Accessibility and UX checks
| Check | Guidance |
|---|---|
| Contrast | Choose page-shell colors that remain readable around both iframe themes. |
| Height | Give the widget enough vertical space to avoid cramped mobile steps. |
| Loading | Show a neutral loading state before onReady. |
| Error copy | Keep customer-facing copy generic and support-oriented. |
| Status pages | Match your brand, but read terminal state from your server. |
Related pages
Embed the 0Gate widget
Mount the hosted iframe with browser-safe values.
Configure embed origins
Keep allowed origins aligned with your themed surfaces.
Configure return URLs and outcome pages
Apply your brand to status pages without trusting browser-only state.
API reference
Review co-branding endpoint fields and validation.
Integrate mobile WebViews
Use the hosted 0Gate redirect flow inside mobile WebViews without putting secret credentials or settlement decisions in the app.
Pre-fill and constrain a session
Bind 0Gate flow, amount, asset, wallet, return URLs, and correlation fields on the server before the browser opens the hosted flow.