Learn how to use the styling settings in Checkout Builder to align the checkout experience with your brand.

1. In the left navigation pane, navigate to Zuora Payments > Checkout.
2. Click the Styling settings tab.
3. Update the visual settings for your checkout.

   You can customize the following customizable areas

   Customizable areas	Description
   Payment method list style	Preselected payment method: Activate this option to display a preselected payment method in the payment form. Condensed checkout view: Activate this option to only show a preselected payment method while the other payment methods are available under More options. Define how the payment methods list behaves and is displayed in your checkout. Edit payment method list: Activate this option to display an Edit option to allow users to delete their saved payment methods.
   Forms collect data	Credit card only processing: Activate this option to force dual-network cards to be processed exclusively as credit, which deactivates the debit option. Hide pay button (available for Element checkout integration only): Activate this option to disable the main action button within the payment forms.
   Typography	Select a font style from the list to apply to the entire design of your checkout.
   Colors	Select and customize the color palette to define the visual appearance of your checkout. Use system settings (dark mode): This option remains inactive while there are custom changes to the checkout colors, typography, or styles. To activate it again, restore the default values. Choose a value for the following options: Accent color Background color Secondary background color Text colors: Primary text color: Define the main text color for high-visibility elements. This color applies to titles and subtitles, user input fields, dropdown values, text on secondary buttons, and checkbox text. Secondary text color: Choose a secondary text color for supporting text elements. This color applies to field descriptions, placeholder text, and help text for additional form guidance. Primary button text color: Set the text color for the primary button to make the call to action noticeable and accessible.
   Form styles	Adjust borders, typography, colors, and corner radius to fully match your brand's visual identity. The following details are available for customization: Logo border Logo border color Logo corner radius Font size Font weight

   Verify the preview panel on the right as you make changes, and confirm that the checkout is displayed correctly in the layouts you use.

4. After confirming all the styling changes are available in the preview panel, click Publish settings to apply the styling changes to the live payment form.