Checkout Styling & Customisation

The Banxa checkout can be visually aligned with your brand using the Style section in the Partner Dashboard. Use these settings to create a seamless transition between your platform and the payment flow.

Upload your brand logo (PNG, max height 70px). Your logo appears in the checkout header when branding is enabled. If you need different logos for Light and Dark modes, contact Banxa to configure these separately.

• Primary — used for main action buttons and active/focus states.
• Secondary — used for button hover states and the Buy/Sell toggle. Defaults to Banxa green if left blank.

Both colours apply to Light and Dark modes. Choose hex codes with sufficient contrast for both white and near-black backgrounds.

Set whether the checkout opens in Light or Dark mode by default. If no preference is set, the checkout defaults to Dark Mode. Users can manually toggle between the two unless Native Mode is enabled.

Enabling Hide Banxa Logo activates Native Mode. This removes both the Banxa logo and your partner logo, and makes the checkout background transparent.

Behaviour in Native Mode:

• Background becomes transparent by default.
• The theme (Light/Dark) follows the user's system/browser preference — the merchant cannot force a default.
• Manual theme toggling by the user is disabled.

Warning: If you set a custom background colour while in Native Mode, the background is static. UI elements (text, inputs) may still respond to the user's system theme while your background stays fixed. Test your chosen colour against both light and dark text before going live.

• You can set a default landing mode (Light or Dark). If no preference is set, the checkout defaults to Dark Mode.
• Users can manually toggle between Light and Dark modes.

• Background becomes transparent.
• The merchant cannot force a Light or Dark default — the UI follows the user's system/browser preference.
• Manual theme switching by the user is disabled.

• The custom background colour is static — it will not change if the user's system switches between Light and Dark modes.
• UI elements (text, inputs) may still react to the user's system theme while the background stays fixed.
• Test your chosen colour against both light and dark text using the Theme Editor before going live.

The following settings require Banxa configuration. Contact Banxa support to request changes:

• Font family — choose from the supported Google Fonts whitelist (e.g., Inter, Roboto, Montserrat, Poppins).
• Border radius — define corner roundness across buttons, inputs, and containers (e.g., 4px for sharp edges, 20px for a rounded look).

To preview styling changes before applying them to your live integration, append ?themeEditor=true to your checkout URL:

https://checkout.banxa-sandbox.com/order/{orderId}?themeEditor=true

This opens a real-time sandbox that lets you experiment with colours and border radius without affecting production.

• Hex codes that work on both modes — since primary and secondary colours apply to both Light and Dark modes, choose a hue legible on both white and near-black backgrounds.
• Transparent logo background — always use a PNG with a transparent background. A white box around your logo will be visible in Dark Mode.
• Button contrast — verify that your primary button text (typically white) remains readable against your primary brand colour.

More granular control over the checkout's visual identity is in development. This includes independent control over how primary and secondary colours, backgrounds, and themes interact — allowing for a more seamless native experience that automatically adapts to your brand requirements.

Contact your Banxa account manager for early access.