Checkout Payment Widgets

The Checkout Payment widget grouping helps display the payment information during the checkout process, creating a user-friendly and efficient process that minimizes customer friction. These widgets present payment options, calculate totals, and handle sensitive financial information.

Note: To access the Checkout Payment widget grouping, open Pages > Ecommerce > Checkout Payment template and then open the widgets list > Ecommerce > Checkout: Payment Widgets.

Adding Checkout Payment Widgets

To add Checkout Payment Widgets:

Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
Open Pages > Ecommerce > Checkout Payment page.
Navigate to the Widgets list on the Visual Editor Left Panel.
Type the widget name in the search bar or open the Ecommerce > Checkout Payment Widgets grouping.
Drag and drop the required widget from the list on the Layout Canvas.

Configuring the Checkout Payment Widgets

You can configure and edit all the widgets under this grouping using the widget Styles and Settings on the Property Panel.

Go to Styles to modify the necessary configuration of general styling features (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.
Go to Settings to modify the Visibility of the widget on your website. Specifically, select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Checkout Steps Summary

The Checkout Steps Summary widget provides an overview of the steps required to make payment during checkout. It displays the list of actions specific to the checkout flow, indicating the customer's current position.

This widget is designed to assist customers in navigating through the payment process, enabling them to review and confirm their submitted or chosen information. If the information is accurate, customers can proceed with the order purchase. If not, they have the option to navigate back to previous payment steps to make necessary modifications to the payment method or other relevant details.

Once you have added the Checkout Steps Summary widget, you can modify its Styles (see Global Styles), Content, and Settings (see Visibility Settings).

Payment Chooser

The Payment Chooser widget allows customers to select their preferred payment method from available options. It displays online payment methods generated from Dashboard > Settings > Payments, where you have set up all the relevant details. Explore additional details about the available Payment Methods.

The widget allows customers to choose the payment option that is convenient for them, facilitating secure payment processing and redirecting the customer to the respective payment gateway.

Once you have added the Payment Chooser widget, you can modify its Styles (see Global Styles) and Settings (see Visibility Settings).

Gift Card Balance and Usage

The Gift Card Balance and Usage widget allows customers to view the remaining balance on their gift card and use it during checkout. This widget helps customers track their available credit and ensures they can apply the balance effectively to their purchases.

Once you have added the Gift Card Balance and Usage widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).

Billing Details

The Billing Details widget displays the information necessary for processing the order payment. It includes fields such as the customer name, billing address, and payment method details (credit card number or PayPal account). The widget allows you to process the payment information to complete the transaction by verifying the customer's identity by comparing the billing address with the payment gateway information.

Once you have added the Billing Details widget, you can modify its Styles (Global Styles) and Settings (Visibility Settings).

You can also access the UI Elements available in the Design System from the upper-right corner of the Property Panel and select one as a base for the widget or create a new UI Element and style it according to your preferences.