{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-products/hosted-checkout/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Checkout Styling & Customisation","description":"Official Banxa API documentation – on-ramp and off-ramp transfers with identity verification and compliance.","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"checkout-styling--customisation","__idx":0},"children":["Checkout Styling & Customisation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Banxa checkout can be visually aligned with your brand using the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Style"]}," section in the Partner Dashboard. Use these settings to create a seamless transition between your platform and the payment flow."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"settings-overview","__idx":1},"children":["Settings overview"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Capability"},"children":["Capability"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Where configured"},"children":["Where configured"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Notes"},"children":["Notes"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Logo Upload"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Partner Dashboard"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["PNG, max 70px height"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hide Banxa Logo"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Partner Dashboard"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Enables Native Mode (removes logos and gradients)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Theme Preference"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Partner Dashboard"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default landing mode: Light or Dark"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Primary Colour"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Partner Dashboard"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Buttons, highlights, and focus states"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Secondary Colour"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Partner Dashboard"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hover states and Buy/Sell toggle; defaults to Banxa green"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Background Colour"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Partner Dashboard"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Requires Native Mode. Fixed hex code."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Logo Variants"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configured by Banxa"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Light/Dark specific logos available on request"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font Family"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configured by Banxa"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Supported Google Fonts whitelist"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Border Radius"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configured by Banxa"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Applies to buttons, inputs, and containers"]}]}]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"dashboard-settings","__idx":2},"children":["Dashboard settings"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"logo-upload","__idx":3},"children":["Logo upload"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"primary--secondary-colours","__idx":4},"children":["Primary & secondary colours"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Primary"]}," — used for main action buttons and active/focus states."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Secondary"]}," — used for button hover states and the Buy/Sell toggle. Defaults to Banxa green if left blank."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Both colours apply to Light and Dark modes. Choose hex codes with sufficient contrast for both white and near-black backgrounds."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"theme-preference","__idx":5},"children":["Theme preference"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set whether the checkout opens in Light or Dark mode by default. If no preference is set, the checkout defaults to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark Mode"]},". Users can manually toggle between the two unless Native Mode is enabled."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"native-mode","__idx":6},"children":["Native Mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enabling ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hide Banxa Logo"]}," activates Native Mode. This removes both the Banxa logo and your partner logo, and makes the checkout background transparent."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Behaviour in Native Mode:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Background becomes transparent by default."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The theme (Light/Dark) follows the user's system/browser preference — the merchant cannot force a default."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Manual theme toggling by the user is disabled."]}]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["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."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"theme-scenarios","__idx":7},"children":["Theme scenarios"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"scenario-a-banxa-branded-default","__idx":8},"children":["Scenario A: Banxa branded (default)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You can set a default landing mode (Light or Dark). If no preference is set, the checkout defaults to Dark Mode."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Users can manually toggle between Light and Dark modes."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"scenario-b-native-mode","__idx":9},"children":["Scenario B: Native Mode"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Background becomes transparent."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The merchant cannot force a Light or Dark default — the UI follows the user's system/browser preference."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Manual theme switching by the user is disabled."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"scenario-c-native-mode--custom-background","__idx":10},"children":["Scenario C: Native Mode + custom background"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The custom background colour is static — it will not change if the user's system switches between Light and Dark modes."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["UI elements (text, inputs) may still react to the user's system theme while the background stays fixed."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Test your chosen colour against both light and dark text using the Theme Editor before going live."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"advanced-styling-via-banxa","__idx":11},"children":["Advanced styling (via Banxa)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following settings require Banxa configuration. Contact Banxa support to request changes:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font family"]}," — choose from the supported Google Fonts whitelist (e.g., Inter, Roboto, Montserrat, Poppins)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Border radius"]}," — define corner roundness across buttons, inputs, and containers (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["4px"]}," for sharp edges, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["20px"]}," for a rounded look)."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"theme-editor-developer-tool","__idx":12},"children":["Theme Editor (developer tool)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To preview styling changes before applying them to your live integration, append ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["?themeEditor=true"]}," to your checkout URL:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"https://checkout.banxa-sandbox.com/order/{orderId}?themeEditor=true\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This opens a real-time sandbox that lets you experiment with colours and border radius without affecting production."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-best-practices","__idx":13},"children":["Design best practices"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Transparent logo background"]}," — always use a PNG with a transparent background. A white box around your logo will be visible in Dark Mode."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button contrast"]}," — verify that your primary button text (typically white) remains readable against your primary brand colour."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"enhanced-customisation-coming-soon","__idx":14},"children":["Enhanced customisation (coming soon)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Contact your Banxa account manager for early access."]}]},"headings":[{"value":"Checkout Styling & Customisation","id":"checkout-styling--customisation","depth":1},{"value":"Settings overview","id":"settings-overview","depth":2},{"value":"Dashboard settings","id":"dashboard-settings","depth":2},{"value":"Logo upload","id":"logo-upload","depth":3},{"value":"Primary & secondary colours","id":"primary--secondary-colours","depth":3},{"value":"Theme preference","id":"theme-preference","depth":3},{"value":"Native Mode","id":"native-mode","depth":2},{"value":"Theme scenarios","id":"theme-scenarios","depth":2},{"value":"Scenario A: Banxa branded (default)","id":"scenario-a-banxa-branded-default","depth":3},{"value":"Scenario B: Native Mode","id":"scenario-b-native-mode","depth":3},{"value":"Scenario C: Native Mode + custom background","id":"scenario-c-native-mode--custom-background","depth":3},{"value":"Advanced styling (via Banxa)","id":"advanced-styling-via-banxa","depth":2},{"value":"Theme Editor (developer tool)","id":"theme-editor-developer-tool","depth":2},{"value":"Design best practices","id":"design-best-practices","depth":2},{"value":"Enhanced customisation (coming soon)","id":"enhanced-customisation-coming-soon","depth":2}],"frontmatter":{"title":"Checkout Styling & Customisation | Banxa Docs","description":"Brand the Banxa checkout with your logo, primary/secondary colours, and typography. Configure via Partner Dashboard or request font and border radius from Banxa.","seo":{"title":"Checkout Styling & Customisation"}},"lastModified":"2026-05-19T23:30:38.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/hosted-checkout/docs/checkout-experience/checkout-styling","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}