Defining experience
Gain a better understanding of how to use the experience object to style a Prebuilt Checkout
Last updated
Gain a better understanding of how to use the experience object to style a Prebuilt Checkout
Last updated
In options.style, you can use experience to assign values to the properties of the CSS selectors that control Prebuilt Checkout's appearance and visual behavior.
When defining a create checkout-session request, you can also assign the experience object to style .
On this page, you'll find:
For details on how to perform even more granular styling of the payment collection stage, refer to Define the payment experience on the Configuring Prebuilt Checkout.
experienceAt 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:
| JSON key | CSS property |
|---|---|
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:
You can use expressCheckout to style the various payment method buttons which display in that section.
payPalgooglePayapplePayamazonPayexperienceThe 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
A pseudo-class selector style in elements overrides that style in the same elements
A style in sections overrides that style in experience
A style in an elements of sections overrides that style in the corresponding elements
A pseudo-class selector style in an elements of sections overrides that pseudo-class selector style in the corresponding elements
experienceThe following is an example of the full experience object.
The experience object is our recommended styling solution. However, in options.style, you can alternatively define modal and textField.
| Key | Description | Supported values |
|---|---|---|
| Key | Description | Supported values |
|---|---|---|
| Key | Description | Supported values |
|---|---|---|
| Key | Description | Supported values |
|---|---|---|
borderRadius
backgroundColor
borderColor
textDecoration
fontStyle
fontFamily
letterSpacing
color
fontSize
fontWeight
boxShadow
label
Customizes the button's label
paypal (default), pay, checkout, buynow
size
Sets the size of the button
responsive (default), small, medium, large
color
Sets the color of the button
gold (default), silver, black, white, blue
shape
Determines whether the button is pill or rectangular shaped
pill (default), rect
buttonType
Defines the button's label and type
plain (default), long
buttonColor
Defines the button's background color
dark (default), light
buttonType
Defines the button's label and type
plain, buy
buttonColor
Defines the button's background color
light, light-outline, dark
buttonColor
Defines the button's background color
Gold (default), LightGray, DarkGray
experience.logo
elements.progressBars.previous
elements.progressBars.current
elements.progressBars.future
elements.headings
elements.text
elements.separators
elements.links
elements.textFields
elements.textFields.label
elements.checkboxes
elements.checkboxes.label
elements.radioButtons
elements.radioButtons.label
elements.buttons.forward
elements.buttons.back
elements.buttons.edit
sections.header
sections.footer
sections.orderSummary
sections.expressCheckout
For details, refer to Styling express payment methods.
sections.addressInformation
sections.shippingChoice
sections.taxIdentifiers
sections.payment
sections.payment.paymentMethodName
