Checkout Settings Reference

The SCAYLE Panel includes a dedicated section for customizing the Checkout Webcomponent. You can turn features on or off for each checkout step and the overall customer journey. As you make adjustments, the preview reflects your changes in real time, so you can see how your choices affect the layout and flow.

This page describes the available settings, grouped by checkout area:

• General Settings
• Basket and Order Overview
• Authentication
• Shipping Step
• Payment Step

For an introduction to the Customization UI, see Customize Checkout in SCAYLE Panel.

General Settings

General Settings combine options that affect the entire Checkout Webcomponent, from basic styling and layout to tracking and routing.

Customer Tracking

The checkout includes built-in event tracking for user interactions. By default, events are pushed to window.dataLayer. Use the following settings to fine-tune this behavior:

• Send plaintext email: Includes the customer's email address in plaintext with dataLayer events.
• Send dataLayer events: Disable this setting if you don't want to send events to the window.dataLayer object for third-party tracking services such as Google Analytics.
• Send form field errors: Includes form field validation errors with dataLayer events.

For a full list of tracking events, see Tracking.

Dynamic Fields

Dynamic fields are flexible inputs, such as birthdate, phone number, or a "Terms and Conditions" checkbox, that you can enable for various checkout steps. Use them to decide which information you collect and where it appears in the flow.

You can enable or disable each dynamic field based on conditions. Depending on the area a field is configured in, the following criteria are available:

• Carrier group key
• Shipping option key
• Collection point type
• Payment option key
• Shipping country
• Billing country
• Minimum basket total

For more information, see Dynamic Fields.

Formats

You can adjust how prices and dates appear to your customers. Price formatting maps directly to the browser standard Intl.NumberFormat, so the result depends on the combination of locale and currency. The following currency display styles are available:

You can also customize the date format and hide decimals to display rounded prices.

Gender

To make your checkout more inclusive, you can enable additional gender options, such as non-specified or diverse, in the checkout flow.

Layout

You can turn Breadcrumbs and Full Width Scroll Navigation on or off:

• The Standard layout keeps the checkout content centered with clear, defined margins.
• Full Width Scroll Navigation expands the content across the entire width of the browser.

In the Styles section, you can adjust buttons, typography, and colors to match your brand identity. For more information, see Look and Feel.

Links

Common links, such as links to terms and conditions or the privacy policy, can be referenced in the translation strings of dynamic checkboxes and texts. For more information, see Links.

Notifications

Static notifications alert customers to certain information when they load the checkout. You can define the timeframe, the steps on which a notification appears, and its level (success, error, warning, or info). For more information, see Notifications.

Routing

If your hosting environment doesn't support server-side URL rewrites, enable hash-based routing (for example, /#/shipping) instead of history-based routing.

With hash-based routing, the browser handles navigation entirely. The URL fragment, the part after the # symbol, represents the current view. For a URL like https://{{tenant-space}}.checkout.api.scayle.cloud/#/shipping, the browser only loads https://{{tenant-space}}.checkout.api.scayle.cloud, while JavaScript reads /shipping from the fragment and displays the matching content.

Disable Panel Translations

By default, checkout translations are managed in the SCAYLE Panel. If you already have a Crowdin integration for the Checkout, you can disable Panel translations and manage them in Crowdin instead. For more information, see Localization of Checkout.

CSS Overwrites

For more fine-tuned control of the checkout styling, you can write custom CSS in the SCAYLE Panel. The CSS is saved to an overwrites.css file, which is loaded after the main checkout styles and takes priority. For more information, see CSS Overwrites.

Basket and Order Overview

Basket

The Basket settings control which information customers see in the basket and what they can change during checkout.

Customer Interaction and Display

• Lock Quantity Change: Prevents customers from changing item quantities in the checkout.
• Disable Product Links: By default, clicking a product takes the customer back to its product detail page. Disabling the links keeps customers in the checkout flow.
• Hide Brand Names: Removes the bold brand header from the product overview.
• Hide Remove Button: Prevents customers from removing items from the basket.
• Hide Basket on Sign-In Step: Hides the basket overview on the sign-in step until the customer is logged in.

Optimization and Localization

• Image URL Parameters: Adds CDN parameters to product image URLs to optimize image quality and size, for example ?width=300&quality=80.
• Basket Position on Mobile: Shows the basket at the top or bottom of the screen on mobile devices.
• "Free" Label: Replaces a price of 0 with a custom "Free" text, managed through your translation keys.
• Collapsible Promotions: Shows a collapsible summary of savings when multiple discounts apply.
• Show Merchant Information: Indicates which merchant ships a product. See Merchant Information.
• Display Net Prices: By default, product prices include tax. When enabled, taxes are removed from individual product prices and shown as an "Estimated Tax" line in the price overview.
• Display Sold Out Items: By default, sold-out items are removed from the checkout. When enabled, they stay in the basket and are marked as "Sold Out".

Merchant Information

If you work with more than one merchant, you might need to show which merchant ships a product. The variables merchant.legalNotices.legalName and merchant.legalNotices.shippingMerchantName are available on each deliverable item and on each package, for example:

• data.order.items.deliverable[*].merchant.legalNotices.shippingMerchantName
• data.order.packages[*].merchant.legalNotices.shippingMerchantName

Before you use these variables in your templates, send the legalName and shippingMerchantName for all required merchants and countries to your SCAYLE Account Manager. Both names can be localized per country, for example DE or IT.

Hide Discounts

You can control whether customers see price reductions per item, in the order total, or not at all. The settings are split into two groups:

• Hide Item Discounts: Controls the visibility of discounts on individual items in the basket.
• Hide Summary Discounts: Controls the visibility of discounts in the order summary.

For both groups, you can hide the following discount types:

• Campaign: Automatic campaign-driven price reductions.
• Promotion: Item-level promotional discounts.
• Promotion Code: Discounts applied through a manually entered promotion code.
• Sale: The sale markdown indication on the item.
• Voucher: Voucher-specific reductions.

Items Shown Limit

Items Shown Limit sets how many basket items are visible before the list collapses. This keeps the checkout page clean for large orders. You can set separate limits for Desktop and Mobile. Mobile limits are typically lower to reduce vertical scrolling.

Currency

Use the Currency dropdown to set the primary currency of the checkout, for example "Euro (EUR)". All product prices, taxes, shipping fees, and order totals are formatted in this currency.

Others

• Enable Detailed Duties And Taxes Section: Adds a section to the price breakdown that lists duties and taxes separately. This is especially helpful for international shipping.
• Display Lowest 30-Day Price: Shows the lowest price of the product within the last 30 days to support compliance with price reduction regulations, such as the EU Omnibus Directive.
• Show Shipping Cost Information: Shows a breakdown of estimated or final shipping costs during checkout.

Authentication

The Authentication settings control how customers identify themselves when they enter the checkout. You can design the login step, configure sign-in fields, and decide whether to offer guest checkout.

Guest Checkout

When Guest Checkout is enabled, customers can complete their purchase without creating an account.

Layout

When enabled, a blurred skeleton layout of the shipping and payment steps is shown underneath the login, registration, and guest forms. This provides a more seamless transition while the next step loads after sign-in. This setting only affects styling and has no functional impact.

Sign-In Fields

Use the following settings to customize the credential fields for login and account creation:

• Email and Password Settings: Configure input requirements for credentials, such as password length, format, or additional validations.
• Show/Hide Password Option: Shows an icon that lets customers reveal their password while typing.
• Confirm Email Field: Requires customers to enter their email address twice to reduce typos.
• Confirm Password Field: Requires customers to confirm their password when creating an account.
• Authentication Component and Fields: Provides further options, such as enabling the authentication component and setting the email length, for the overall layout and individual input fields.

Shipping Step

The Shipping settings control how delivery options, address fields, and shipping-related information are presented to customers.

Address Form

The Address Form settings control how address fields are configured and validated:

• Additional: Supplementary address fields, such as apartment numbers, suite codes, or delivery instructions.
• Full Country Names: Shows country selections as full names or localized abbreviations.
• Google Maps Autocomplete: Enables predictive address input to speed up checkout and reduce typos.
• Names: Input requirements for the customer's first and last name.
• State: Enables or requires a state or province selection for regions where it's mandatory for tax or delivery purposes.
• Street House Number: Captures street name and house number in combined or separate fields.
• Title: Salutation or title selection, for example "Mr.", "Ms.", or "Dr.".
• Zip Code and City Settings: Validation rules and layout properties for postal code and city fields.

Address Book

When Address Book is enabled, registered customers can select previously saved shipping and billing addresses instead of entering them again.

Shipping Options

• Hide Delivery Estimation: Removes estimated delivery timeframes, such as "Delivered in 2–3 business days", from the carrier options.
• Descriptions ➜ Short: Shows condensed descriptions for shipping methods.
• Tool Tip: Adds an information icon next to shipping methods that shows additional or carrier-specific details.

Delivery Options

• Hide Delivery Options: Hides the fulfillment types.
• Preferred: Sets the default fulfillment method, for example "Home Delivery".
• Sorting: Sets the order of fulfillment types, such as Home Delivery, Collection Point, and Store Pickup.

Collection Points

The Collection Points settings control how pickup locations are found and displayed in the shipping step:

• Default Maximum Distance: The default search radius for nearby collection points.
• Preferred View: Shows collection points on a map or in a list by default.
• Search Radius Options: The distance increments customers can choose from when searching.
• Sorting: Sorts the search results.
• Google Maps Autocomplete: Enables predictive address lookup when searching for collection points.
• Include Billing Address: Pre-fills the search with the customer's billing address.
• Use Geolocation: Requests the customer's browser location to recommend nearby collection points.

Carrier Options

• Position: Sets where the block is placed in the UI, for example "Shipping Top".
• Is Collapsible: Lets customers collapse the collection point section to save screen space.
• Suggest Collection Point: Highlights alternative pickup locations while customers are in the delivery step.

Payment Step

Payments

• Hide Payment Icons: Removes payment provider logos from the payment list.
• Initial Payment Methods: Pre-selects a default payment method when the customer reaches the payment step.
• Payment Brands List: Defines which payment logos or providers are displayed.
• Allow Delete Recurring Payment: Lets customers remove saved payment details or subscription payment methods.
• Descriptions ➜ Short: Shows condensed descriptions for payment methods.
• Tool Tip: Adds an information icon next to payment methods with additional details.
• Enable Branded Payment Buttons: Shows dedicated express checkout buttons, such as PayPal, Apple Pay, or Google Pay.

Loyalty

The Loyalty Program settings control how loyalty program fields behave in the checkout.

• Format On Blur: Input and output patterns that define how loyalty card numbers or reward codes are formatted when the customer leaves the input field.
• Icon: Shows a custom rewards icon next to the loyalty input.
• Redeemable Points: Shows the customer's available points in the checkout.
• Registration: Shows an option to sign up for the loyalty program. Enable Disable For Guest to show the registration only to logged-in customers.
• Tool Tip: Adds an information icon that explains how the program works or where to find the rewards number.

Discounts

The Discounts settings control field validation, formatting, and placement for vouchers, gift cards, and discount codes.

Vouchers

• Disable Initial Voucher Notification: Suppresses the initial voucher notification.
• Enabled: Turns the voucher input on or off.
• Format: A regular expression that the voucher code must match.
• Hide On Review Page: Hides applied vouchers on the review page.
• Max Length and Min Length: The allowed length of the voucher code.
• Required: Makes voucher entry mandatory to complete the checkout.
• Illegal Terms: Strings that are rejected, for example test phrases.

Gift Cards

Gift cards share the voucher settings: Enabled, Format, length limits, Hide On Review Page, and Illegal Terms.

In addition, the Pin settings let you require a security PIN with the gift card code. The PIN has its own Enabled, Format, Hide On Review Page, Max Length, Min Length, and Required settings. When Required is enabled, the customer must enter a valid PIN before the gift card balance can be applied.

Discount Codes

• Always Show On Review Page: Keeps the discount code input visible on the review page.
• Position: Sets where the discount code input is placed in the checkout layout.