> For the complete documentation index, see [llms.txt](https://docs.ecommerce.seb.ee/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ecommerce.seb.ee/guides/merchant-portal/customize-your-checkout.md). # Customize your checkout Hosted Checkout can be adapted to better match your merchant brand while the payment experience remains securely hosted by the **SEB Ecommerce Payment Gateway**. Where self-service customization is enabled for your shop, use **Customize checkout** in the Merchant Portal to configure the appearance and payment method presentation of Hosted Checkout. Depending on your merchant setup, checkout customization may instead be managed by **SEB on your behalf**. *** ### Access Checkout Customization Checkout customization is available in the Merchant Portal under: **Settings → Customize checkout** Select the shop you want to configure before making any changes. Access to checkout customization is controlled by SEB and may differ between merchants and shops. Depending on the configuration of the selected shop: * You may be able to customize Hosted Checkout directly in the Merchant Portal. * Self-service checkout customization may not be available. * SEB may configure and manage the Hosted Checkout design on your behalf. If self-service customization is not available, the **Customize checkout** page displays a message explaining the applicable setup or next steps.
{% hint style="info" %} The options displayed under **Settings → Customize checkout** reflect the checkout customization access available for the selected shop. If SEB manages your Hosted Checkout design and you need to request a change, follow the information displayed on the page or contact SEB. {% endhint %} *** ### What You Can Customize When self-service customization is available, you can configure the customer-facing appearance and payment method presentation of Hosted Checkout. Depending on the options available for your shop, you can configure: * Shop icon. * Merchant logo. * Font. * Primary and secondary colours. * Colour palette. * Button shape. * Product placeholder icons. * Payment method ordering. * Payment method grouping. * Payment method prioritization. Checkout customization is **shop-specific**, allowing different shops to use different branding and checkout configurations. *** ### Branding and Appearance Use the available customization options to align Hosted Checkout with your merchant brand. #### Shop Icon and Logo Select the shop icon and upload your merchant or shop logo where required. These elements help customers recognize your business during the payment journey. #### Font Select the font used for customizable Hosted Checkout content. #### Colours Configure the **primary** and **secondary** colours used for applicable checkout elements. The resulting colour palette is displayed as part of the configuration. #### Button Shape Select the preferred shape for customizable checkout buttons: * Rounded. * Rectangular. * Pill. #### Product Placeholder Select the placeholder icon displayed when no product image is available. *** ### Accessibility and Colour Contrast The Merchant Portal validates applicable colour selections against accessibility contrast requirements. If a selected colour does not provide sufficient contrast, a warning is displayed. Adjust the colour before saving the configuration. {% hint style="warning" %} Use colours that meet the accessibility requirements indicated by the Merchant Portal. Insufficient contrast may make checkout content difficult for customers to read or use. {% endhint %} *** ### Payment Method Presentation Configure how the payment methods enabled for the selected shop are displayed in Hosted Checkout. You can arrange the available payment methods in the preferred order and select how they are presented to customers. #### No Grouping Displays all available payment methods in a single list without prioritization. Recommended when you offer a small number of payment methods or want all methods to have equal visibility. #### Group by Type Groups payment methods into categories. This can make the checkout easier to navigate when multiple payment options are available. #### Highlight First Payment Method Highlights the first payment method in the configured order. Use this option when you have a preferred payment method that you want to present more prominently. If the first payment method is unavailable, for example because of a temporary service interruption, Hosted Checkout automatically falls back to the next available payment method. Arrange the payment methods in the required order to determine which method is highlighted first. #### Highlight Methods Previously Used by User Where supported, Hosted Checkout highlights payment methods that the customer has previously used. This can simplify repeat payment journeys by making familiar payment methods easier to find. This functionality relies on cookies stored on the customer's device. {% hint style="info" %} Previously used payment methods may not be recognized when the customer uses another device or browser, uses private browsing, or removes the applicable cookies. {% endhint %} *** ### Payment Method Ordering The payment methods enabled for the selected shop are displayed in the configuration area. Use the available controls to arrange them in the order in which you want them presented in Hosted Checkout. Ordering is particularly important when using **Highlight First Payment Method**, because the first available method in the configured order is presented as the preferred option. {% hint style="info" %} Checkout customization changes how available payment methods are **presented**. It does not enable or activate new payment methods. Only payment methods already enabled for the selected shop can be configured. {% endhint %} *** ### Branded Payment Methods Some payment methods have mandatory branding and user-interface requirements defined by their respective providers. This includes payment methods such as: * Apple Pay. * Google Pay. * Click to Pay. * Card scheme-branded elements. * Other wallet- or provider-branded payment elements. Official payment buttons, logos, and other protected interface elements follow the applicable provider branding requirements and cannot be independently restyled through checkout customization. *** ### Preview Your Checkout The Merchant Portal provides a live preview while you configure Hosted Checkout. Use the **mobile** and **desktop** preview controls to review how the checkout will appear on different device layouts. Use the preview to review: * Merchant branding. * Colours and fonts. * Button appearance. * Product presentation. * Order information. * Payment method ordering and presentation. * Overall checkout layout. The preview updates as you change the configuration, allowing you to review the customer experience before applying the changes. When you are satisfied with the configuration and any validation issues have been resolved, select **Save changes**. {% hint style="info" %} Changes are reflected in the preview while you are editing. Select **Save changes** to apply the configuration to the selected shop. {% endhint %} *** ### Sandbox and Production Checkout customization is both **shop-specific** and **environment-specific**. Changes made to a Sandbox Shop apply only to that Sandbox Shop and do not automatically apply to the corresponding Production Shop. Changes made to a Production Shop apply to the applicable live Hosted Checkout configuration. {% hint style="warning" %} Always verify the selected **environment** and **shop** before saving checkout configuration. Before processing live payments, review and configure Hosted Checkout for your Production Shop separately. {% endhint %} *** ### What Checkout Customization Does Not Change Checkout customization affects the customer-facing presentation of Hosted Checkout. It does not change the underlying: * Payment processing logic. * Payment authorization or capture behaviour. * Payment statuses. * Authentication flows, including Strong Customer Authentication. * Fraud-prevention controls. * Card scheme or payment-provider requirements. This allows you to adapt the visual experience while payment processing remains controlled by the SEB Ecommerce Payment Gateway. *** ### Best Practices When customizing Hosted Checkout: * Keep the checkout visually consistent with your website or store. * Use a recognizable merchant logo. * Maintain sufficient colour contrast and readability. * Review both mobile and desktop layouts. * Keep payment method presentation simple and easy to understand. * Put the most relevant payment methods in a logical order. * Use payment method highlighting only when it improves the customer journey. * Follow the branding requirements of individual payment methods. * Preview the complete checkout before saving changes. * Verify the selected shop before making changes. * Configure and review Sandbox and Production separately. {% hint style="info" %} If self-service checkout customization is not available for your shop, follow the information displayed under **Settings → Customize checkout**. Where applicable, SEB can configure and manage the Hosted Checkout design on your behalf. {% endhint %} *** ### Frequently Asked Questions
Can I change the payment flow itself? No. Checkout customization changes only the visual presentation of the page. It does not change payment logic, authentication, fraud controls, or settlement behaviour.
Can I enable a new payment method from this page? No. You can only manage payment methods that are already approved and configured for your account. New payment methods or services require approval.
Why don’t I see all customization options? Some checkout settings may be controlled centrally by the Customer or restricted by your merchant configuration.
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.ecommerce.seb.ee/guides/merchant-portal/customize-your-checkout.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.