Customize Checkout

The Customize Checkout section allows you to configure the visual appearance, branding, and payment method behavior of the Gateway Hosted Checkout Page. It helps simulate a white-labeled checkout experience and gives you full control over how your brand is presented during the payment flow.

You can access this feature under: Settings → Customize Checkout

Purpose of Customize Checkout

This tool is designed to:

• Preview how the Hosted Checkout Page will appear to end users.

• Apply your own branding styles — colors, fonts, icons, and logos.

• Set how payment methods are grouped, prioritized, and highlighted.

• Preview the experience across desktop and mobile devices.

• Configure these settings per individual shop.

In sandbox mode, these settings do not affect live transactions but help you understand how the live payment experience can be configured.

What You Can Configure

Visual Branding Elements

In the left-side customization panel, you can configure the following:

• Choose Icon

  Select from preset icons to represent your brand/shop during checkout.

• Upload Logo

  Upload your own logo to personalize the checkout header.

• Font

  Choose from available fonts (e.g., Roboto) to match your store’s style.

• Primary Color

  Select your brand’s main color. This will apply to buttons and accent elements.

• Secondary Color

  Choose a secondary/supporting color to complement the primary color.

• Color Palette

  Customize the full color palette to match your branding guidelines.

• Button Radius & Style

  Choose from:

  • Rounded

  • Rectangular

  • Pill-style buttons

• Placeholders for Basket Items

  Select how product placeholders (e.g., thumbnails) appear in the checkout summary.

Payment Methods and Grouping Options

Display Modes

Choose how payment methods are organized:

• No Grouping

  All methods are displayed in one list (flat layout).

• Group by Type

  Methods are separated into Payments and Wallets (e.g., Bank vs. Google Pay).

• Highlight First Payment Method

  The first method is pre-selected (ideal for promoted options like Click-to-Pay).

• Highlight Methods Previously Used by User

  Automatically highlights the last-used method based on browser cookies.

Manual Ordering

• Drag and drop payment methods using the grip icon (⋮⋮).

• The order is updated in real-time in the preview window.

• You can disable any method temporarily using the minus symbol (–).

Real-Time Preview Panel On the right side of the screen, you’ll see a live preview of how the Hosted Checkout Page will look.

• Toggle between:

  • Desktop View

  • Mobile View

• Preview reflects:

  • Branding updates

  • Payment method ordering

  • Button styling and color settings

Shop Scope

You can apply branding and layout settings to:

• One specific shop (selected via the dropdown menu), or

• All test shops globally (apply same style across your entire test setup)

Save Changes

After making your changes, click “Save Changes” at the bottom to apply your settings.

These configurations will persist across your sandbox session and allow you to simulate different branding and checkout UX strategies.

Sandbox Limitations

• In Sandbox Mode, these settings are for demo purposes only.

• All checkout previews use test payment flows and dummy data.

• Branding changes do not impact live payment processing or live merchant settings.

• Sandbox always displays transactions in EUR, regardless of other currency settings.