# 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.

{% hint style="info" %}
In sandbox mode, these settings do not affect live transactions but help you understand how the live payment experience can be configured.
{% endhint %}

<figure><img src="/files/lSEzOqjg6wjhcgjkoYsp" alt=""><figcaption></figcaption></figure>

### &#x20;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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.ecomm.api.tietoevry.com/e-commerce-payment-gateway/sandbox-guide/merchant-portal-home-page/settings/customize-checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.