> ## Documentation Index
> Fetch the complete documentation index at: https://docs.y.uno/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout Builder

The Checkout Builder is a no-code tool designed to customize your checkout experience. It includes two main modules:

* **Payment method settings**: Enable payment methods with a published route to show to your customers. Additionally, you can define under which circumstances specific payment methods are displayed.
* **Checkout styling**: Adjust the checkout's visual elements for desktop and mobile devices, including colors and typography. This ensures the checkout experience is consistent with your brand.

Any changes made using the Checkout Builder are immediately reflected in the user-facing checkout, providing a straightforward way to manage and adapt the checkout experience to meet your business requirements.

<Frame>
  <img src="https://mintcdn.com/yuno-3979e326/xfsBNkbN7r6yxkZH/images/reference/checkout-builder/image1.png?fit=max&auto=format&n=xfsBNkbN7r6yxkZH&q=85&s=c91572a8f559a484f0fb4d47f770bd3d" width="2520" height="1554" data-path="images/reference/checkout-builder/image1.png" />
</Frame>

## Advantages of using Checkout Builder

* **Customization with no code**: Enjoy the flexibility of tailoring your checkout experience without the need for complex coding. This empowers you to create a checkout process that aligns seamlessly with your brand and business objectives.
* **Payment method flexibility**: Easily enable, organize, and display the payment methods that best suit your customer base and market.
* **Intuitive user interface**: Yuno's interface makes it a breeze to configure payment methods, set display conditions, and customize styling.

## Payment method settings

This module lets you configure and customize the payment methods used in the checkout experience. Beyond activating payment methods, you can adjust the order in which they're displayed, customize their appearance, set required fields, and determine conditions for when each payment method is displayed. This breadth of customization ensures the checkout experience fits your audience and specific use case.

You must click **Publish settings** on the Checkout Builder to apply all changes to the checkout.

### Conditions

You can control when a payment method appears at checkout by setting display conditions based on criteria such as the order’s country, amount, currency, or integration metadata. To configure these settings:

<Steps>
  <Step title="Initiate conditions">
    Next to the payment method, click the three dots icon and select **Set Conditions**. Click **Add new condition** in the pop-up.

    <Frame>
      <img src="https://mintcdn.com/yuno-3979e326/xfsBNkbN7r6yxkZH/images/reference/checkout-builder/image2.png?fit=max&auto=format&n=xfsBNkbN7r6yxkZH&q=85&s=0c8d773ebdeba3dd49ef36f9b2be8d03" width="1999" height="1358" data-path="images/reference/checkout-builder/image2.png" />
    </Frame>
  </Step>

  <Step title="Define specifications">
    Enter a descriptive name and select parameters like order country, currency, or metadata.

    <Frame>
      <img src="https://mintcdn.com/yuno-3979e326/xfsBNkbN7r6yxkZH/images/reference/checkout-builder/image3.png?fit=max&auto=format&n=xfsBNkbN7r6yxkZH&q=85&s=8ee3a9b570910ca9308b308688e7b43e" width="1999" height="1358" data-path="images/reference/checkout-builder/image3.png" />
    </Frame>
  </Step>

  <Step title="Complete configuration">
    Fill out the fields that appear based on your selected specifications.

    <Frame>
      <img src="https://mintcdn.com/yuno-3979e326/xfsBNkbN7r6yxkZH/images/reference/checkout-builder/image4.png?fit=max&auto=format&n=xfsBNkbN7r6yxkZH&q=85&s=f6fa4cc9a671b8ed9650d2408e09c325" width="1999" height="1358" data-path="images/reference/checkout-builder/image4.png" />
    </Frame>
  </Step>
</Steps>

### Required fields

Required fields specify the information users must provide when using each payment method. Some payment methods require specific data to process payments, and Yuno may request it even if you didn't specify it. Yuno streamlines the process of adding or removing desired fields through its user interface.

The **Required Fields** panel in the Checkout Builder lets you collect billing and shipping addresses as two independent forms during checkout. Billing address is used for card verification (AVS) and integrations with providers such as Stripe and Adyen, while shipping address is used for physical delivery.

<Note>
  **SDK version requirement**: This feature is only available in **Web SDK v1.7 or later**. Merchants on earlier SDK versions will not see the new address forms even if the configuration is enabled in the Checkout Builder.
</Note>

#### Where to find it

1. Open the **Checkout Builder** in the Yuno Dashboard.
2. In **Payment method settings**, click the **three dots (⋯)** on the payment method you want to configure and select **Set Required fields**.
3. Find the **Address configuration** section in the **Required Fields** drawer.

<Note>
  This setting is **per payment method**, not global. Repeat the configuration for every payment method that should collect addresses.
</Note>

#### How to configure

1. In the **Address configuration** section, turn the toggle **on**.
2. Choose the address mode:
   * **Billing Address only**
   * **Billing & Shipping Address**
3. Click **Save changes**.
4. Return to the Checkout Builder and click **Publish settings** for the changes to take effect in the live checkout.

<Frame>
  <img src="https://mintcdn.com/yuno-3979e326/6P_a5dI_aLhTtdxL/images/reference/checkout-builder/image5.png?fit=max&auto=format&n=6P_a5dI_aLhTtdxL&q=85&s=3e8938fc2d9dc5d2015ca2b9fa7d5b0a" width="3600" height="2445" data-path="images/reference/checkout-builder/image5.png" />
</Frame>

No additional SDK parameters are required in the merchant's integration — as long as Web SDK v1.7 or later is integrated, the address forms render automatically based on the Checkout Builder configuration.

#### Available configuration

| Setting                                | Description                                                                                                                        | What the customer sees in the SDK                                                                                                                                                                    |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Address configuration toggle — OFF** | Master switch disabled.                                                                                                            | No address form is rendered in the checkout.                                                                                                                                                         |
| **Billing Address only**               | Only the billing address form is collected. Use this when you only need billing data for AVS / verification (e.g., digital goods). | A single **Billing address** form is rendered at the bottom of the checkout.                                                                                                                         |
| **Billing & Shipping Address**         | Both billing and shipping address forms are available.                                                                             | The SDK renders a **Shipping address** form, followed by a **"Billing address is the same as shipping address"** checkbox. The **Billing address** form only appears when the checkbox is unchecked. |

<Note>
  The "Billing address is the same as shipping address" checkbox is purely a Web SDK UX element. It is **not** configurable from the Checkout Builder — it appears automatically whenever both billing and shipping are enabled.
</Note>

#### Important notes

* **Backward compatibility:** Existing checkouts that only had `billing_address` enabled continue to work exactly as before — the previous address fields are mapped to the billing address. No action is required for merchants who don't want shipping collection.
* **Standalone Postal Code:** The postal code field can be used standalone (without other address fields) for all providers and all SDK flows. When postal code is enabled and other address fields are disabled, the backend allows null values for all address fields except postal code. If both postal code and address fields are enabled in the Checkout Builder, the backend prioritizes address fields over postal code.
* **Configure during low-traffic periods:** Publishing changes to required fields affects all subsequent checkout sessions immediately. Customers in the middle of an in-flight session may see inconsistent forms during the propagation window. We recommend configuring and publishing this setting during low-traffic periods to minimize impact.

In the Required fields, you can also configure the behavior for enrolled cards. You can configure whether to request the CVV for every transaction or only during the customer's first payment.

### Edit name and logo

The name and logo settings control how a payment methods appear during checkout. This option is unavailable for enrolled payment methods. To adjust these settings:

1. Within **Payment method settings**, click the three dots icon next to any non-enrolled payment method and select **Edit name and logo**.
2. Select **Use custom settings** to make changes.
3. Enter your preferred name for the payment method.
4. Optionally, you can add a description and provide a new logo URL. The URL must start with "https\://". Use a square image (JPG or PNG), 100x100 pixels in size, and up tp 10 KB.
5. Click **Save changes**, followed by **Publish settings** to apply all changes.

<Frame>
  <img src="https://mintcdn.com/yuno-3979e326/xfsBNkbN7r6yxkZH/images/reference/checkout-builder/image6.png?fit=max&auto=format&n=xfsBNkbN7r6yxkZH&q=85&s=70e27186814bee6a41d59f0c81bf6412" width="1999" height="1358" data-path="images/reference/checkout-builder/image6.png" />
</Frame>

## Checkout styling

Match your brand's unique look and feel using the Checkout Styling module. Changes made in this module are reflected in the end-user checkout immediately after publishing.

### General Styling Options

The General Styling section allows you to adjust key visual elements, creating a consistent and professional look throughout the checkout experience. In this section, you can customize the following elements:

| Customizable Element          | Description                                                                                                                                                                                                                                                                                  |
| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Background Color**          | Set the background color applied across all checkout forms, establishing a base that reflects your brand's aesthetic. This background color serves as the foundation of the entire checkout interface.                                                                                       |
| **Accent Color**              | Select an accent color to highlight interactive elements, enhancing the user experience and adding brand-specific touches. The accent color applies to:<ul><li>The background color of the primary button</li><li>The border color of the secondary button</li><li>Checkbox colors</li></ul> |
| **Primary Text Color**        | Define the main text color for high-visibility elements. This color will apply to:<ul><li>Titles and subtitle</li><li>User input fields</li><li>Dropdown values</li><li>Text on secondary buttons</li><li>Checkbox text</li></ul>                                                            |
| **Secondary Text Color**      | Choose a secondary text color for supporting text elements. This color applies to:<ul><li>Field descriptions</li><li>Placeholder text</li><li>Help text for additional form guidance</li></ul>                                                                                               |
| **Primary Button Text Color** | Set the text color for the primary button to ensure the call-to-action is noticeable and accessible.                                                                                                                                                                                         |
| **Typography**                | Select your preferred font.                                                                                                                                                                                                                                                                  |

## Real-time checkout preview

The Checkout Builder includes a live preview panel on the right side of the screen. The preview reflects your current configuration as you make changes — without requiring you to publish first.

The preview is available in both the **Payment method settings** and **Styling settings** tabs.

### What the preview shows

* The payment methods currently enabled and their display order
* Express payment buttons (PayPal, Apple Pay, Google Pay) when active
* The card form with all configured required fields
* Color, typography, and styling changes as you adjust them

### Interactive fields

You can interact with the form fields directly in the preview panel. This lets you test field validation and error messages — for example, entering an invalid CVV triggers the error copy in real time.

<Note>
  The preview supports interactive field testing up to the **Pay** button. It does not simulate a complete end-to-end payment flow. To test a full transaction, use the SDK in a [test environment](https://docs.y.uno/docs/yuno-testing-gateway).
</Note>

### Simulating conditions

Use the **Country**, **Currency**, and **Amount** filters above the preview panel to simulate different order contexts. This lets you verify that your display conditions are working as expected before publishing — for example, confirming that a payment method only appears for specific countries or amounts.

### Styling settings preview

When you switch to the **Styling settings** tab, the preview updates in real time as you adjust colors, typography, and layout options. Changes are visible immediately in the preview — including background color, accent color, and text colors — before you save or publish.