At the experience level are styles, which control Prebuilt Checkout's general, overall appearance, such as its backgroundColor and fonts, as well as the color and roundness of its border. At this level, you can also define a logo.
At the next level down in experience are elements and sections.
elements are the various parts of the experience, such as progressBars, headings, text, tables, separators, links, textFields, checkboxes, radioButtons, and buttons.
sections are the various stages that users might pass through while checking out, along with the header and footer they see during each stage. With the exception of header, all sections have elements.
The keys in the JSON correspond to a CSS property. The following are some common keys in the experience object and the CSS property that their value defines:
You can add pseudo-class keywords to change how something is styled based on its state or condition, such as when a user clicks a checkbox, hovers over a button or selects a payment method or when a value is determined to be invalid. In most cases, you define these keywords in elements.
The following table captures examples of various styles you can control:
Styling express payment methods
You can use expressCheckout to style the various payment method buttons which display in that section.
payPal
googlePay
applePay
amazonPay
The rules of experience
The structure of experience determines which styles take precedence in the CSS. Generally, styles at a lower-level in the JSON hierarchy take precedence over styles at a higher level:
A style in elements overrides that style in experience
