Checkout Builder

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

• Setting Conditions lets you control when and how payment methods appear at checkout.
• Setting Styling enables you to adjust the visual elements of the checkout.

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

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 ensures that configuring payment methods, setting display conditions, and customizing styling are straightforward and efficient tasks.

Payment Method Settings

The payment method settings module enables users to configure and customize payment methods for the checkout experience. Users can activate payment methods, adjust the display order, and personalize each method’s appearance and required user information. With flexible options, businesses can tailor when and how each payment method appears, aligning names, logos, and other details with their brand identity.

You must publish your changes on the Checkout Builder to apply them 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, follow the steps:

1. Select the payment method’s settings button and click Set Conditions.

2. In the Set Conditions section, modify existing conditions or create new ones. To add a new condition, toggle the desired fields and specify the criteria for displaying the payment method. You can use information such as country, currency, or order amount as a condition.

3. To edit or delete an existing condition, click on the settings button above the condition.

Required Fields

The Required Fields section enables you to customize the fields end users must complete for each payment method. Fields can be added or removed based on business requirements and user experience needs. To configure these settings, select the payment method's settings button and navigate to Required Fields.

The Required Fields section lets you view the available fields and identify each provider's required fields. Fields required by a provider are enabled by default. To activate a new field, toggle it on.

You can disable any field, including those required by providers. However, disabling required fields may result in payment failures, so it is essential to verify the provider compatibility before making changes. If a new provider is added to the payment method, any previously disabled required fields will remain disabled, even if required by the new provider. You must manually re-enable these fields if necessary. Therefore, always check the required fields after adding a new provider.

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.

Payment Method Name and Logo

The Name and Logo settings let you control how a payment method appears during checkout. To adjust these settings:

1. Navigate to the Payment Method Settings.
2. Click on the settings icon next to the payment method you want to customize.
3. Select Edit Name and Logo. This will take you to the customization options, where you can choose between default and custom settings to personalize the payment method's name and logo.

You can modify:

• Name: Change the name displayed at checkout.
• Description: Provide a brief description that helps users identify the payment method.
• Logo: Upload a custom logo in either JPG or PNG format.

Checkout Styling

The Checkout Styling module allows you to customize the look and feel of the checkout page to match your brand’s unique design. You can modify colors, sizes, and fonts to ensure a seamless, branded experience. 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: