Choose a version:

CheckoutBrandingCornerRadius

enum

The options for customizing the corner radius of checkout-related objects. Examples include the primary button, the name text fields and the sections within the main area (if they have borders). Refer to this complete list for objects with customizable corner radii.

The design system defines the corner radius pixel size for each option. Modify the defaults by setting the designSystem.cornerRadius input fields.

Anchor to Valid valuesValid values

Anchor to BASEBASE: The corner radius with a pixel value defined by designSystem.cornerRadius.base.
Anchor to LARGELARGE: The corner radius with a pixel value defined by designSystem.cornerRadius.large.
Anchor to NONENONE: The 0px corner radius (square corners).
Anchor to SMALLSMALL: The corner radius with a pixel value defined by designSystem.cornerRadius.small.

Was this section helpful?

Anchor to FieldsFields

Anchor to CheckoutBrandingButton.cornerRadius CheckoutBrandingButton.cornerRadius •OBJECT: The buttons customizations.
Anchor to CheckoutBrandingButtonInput.cornerRadius CheckoutBrandingButtonInput.cornerRadius •INPUT OBJECT: The input fields used to update the buttons customizations.
Anchor to CheckoutBrandingCheckbox.cornerRadius CheckoutBrandingCheckbox.cornerRadius •OBJECT: Defines the visual styling for checkbox elements throughout the checkout interface, focusing on corner radius customization. This allows merchants to align checkbox appearance with their overall design aesthetic.

For example, a modern minimalist brand might prefer sharp, square checkboxes while a friendly consumer brand could opt for rounded corners to create a softer, more approachable feel.

The corner radius setting ensures checkboxes integrate seamlessly with the overall checkout design language and brand identity.
Anchor to CheckoutBrandingCheckboxInput.cornerRadius CheckoutBrandingCheckboxInput.cornerRadius •INPUT OBJECT: The input fields used to update the checkboxes customizations.
Anchor to CheckoutBrandingControl.cornerRadius CheckoutBrandingControl.cornerRadius •OBJECT: The form controls customizations.
Anchor to CheckoutBrandingControlInput.cornerRadius CheckoutBrandingControlInput.cornerRadius •INPUT OBJECT: The input fields used to update the form controls customizations.
Anchor to CheckoutBrandingExpressCheckoutButton.cornerRadius CheckoutBrandingExpressCheckoutButton.cornerRadius •OBJECT: The Express Checkout button customizations.
Anchor to CheckoutBrandingExpressCheckoutButtonInput.cornerRadius CheckoutBrandingExpressCheckoutButtonInput.cornerRadius •INPUT OBJECT: The input fields to use to update the express checkout customizations.
Anchor to CheckoutBrandingMainSection.cornerRadius CheckoutBrandingMainSection.cornerRadius •OBJECT: The main sections customizations.
Anchor to CheckoutBrandingMainSectionInput.cornerRadius CheckoutBrandingMainSectionInput.cornerRadius •INPUT OBJECT: The input fields used to update the main sections customizations.
Anchor to CheckoutBrandingMerchandiseThumbnail.cornerRadius CheckoutBrandingMerchandiseThumbnail.cornerRadius •OBJECT: The merchandise thumbnails customizations.
Anchor to CheckoutBrandingMerchandiseThumbnailInput.cornerRadius CheckoutBrandingMerchandiseThumbnailInput.cornerRadius •INPUT OBJECT: The input fields used to update the merchandise thumbnails customizations.
Anchor to CheckoutBrandingOrderSummarySection.cornerRadius CheckoutBrandingOrderSummarySection.cornerRadius •OBJECT: The order summary sections customizations.
Anchor to CheckoutBrandingOrderSummarySectionInput.cornerRadius CheckoutBrandingOrderSummarySectionInput.cornerRadius •INPUT OBJECT: The input fields used to update the order summary sections customizations.

Was this section helpful?