Web SDK
- Getting started
- Primer
- PrimerCheckout
- PrimerHeadlessCheckout
- CheckoutStyle
- Common objects
- Constants
Overview
The interface that defines the styles available for customizing the appearance of the checkout.
Refer to the guide on Styling Universal Checkout for more details and examples.
Hide Properties
Hide Properties
An array of
FontFace objects to specify custom fonts to be used in the checkout.Show FontFace
Show FontFace
A string that defines the font family of the text.
A string that defines the location of the font file.
A string that defines the Unicode range of the font.
A string that defines the variant of the font.
A string that defines the feature settings of the font.
A string that defines the variation settings of the font.
A string that defines the stretch of the font.
A string that defines the weight of the font.
A string that defines the style of the font.
An array of
Stylesheet objects to specify custom stylesheets to be used in the checkout.Show Stylesheet
Show Stylesheet
Url of the stylesheet.
An object of type
LoadingScreenStyle to configure the loading screen that appears during checkout processing.Show LoadingScreenStyle
Show LoadingScreenStyle
Color of the loading screen.
An object of type
InputStyles to configure the appearance of input fields in the checkout.Show InputStyles
Show InputStyles
An object of type InputStyle describing the base style of the input.
An object of type InputStyle describing the style of the input in an error state.
An object of type
TextStyle to configure the appearance of input field labels in the checkout.Show TextStyle
Show TextStyle
An optional string that defines the color of the text.
An optional string that defines the font family of the text.
An optional string that defines the weight of the text.
An optional string that defines the size of the text.
An optional string that defines the smoothing of the font.
An optional string that defines the height of the line.
An optional string that defines the transformation of the text.
An optional string that defines the spacing between letters in the text.
An object of type
TextStyle & TextAlignmentStyle to configure the appearance of error text that appears below input fields.Show TextStyle
Show TextStyle
An optional string that defines the color of the text.
An optional string that defines the font family of the text.
An optional string that defines the weight of the text.
An optional string that defines the size of the text.
An optional string that defines the smoothing of the font.
An optional string that defines the height of the line.
An optional string that defines the transformation of the text.
An optional string that defines the spacing between letters in the text.
Show TextAlignmentStyle
Show TextAlignmentStyle
A string that defines the alignment of text.
An object of type
FormSpacings to configure the spacing between form elements in the checkout.Show FormSpacings
Show FormSpacings
Specifies the amount of space between a form label and its corresponding
input element. The value is a string representing a CSS length, such as
“10px” or “1em”.
Specifies the amount of space between different input elements within a
form. The value is a string representing a CSS length, such as “10px” or
“1em”.
An object of type
ShowMorePaymentMethodsButtonStyles to configure the appearance of the “Show More Payment Methods” button in the checkout.An object of type
NetworkErrorStyles to configure the appearance of the network error message that appears when the checkout cannot connect to the server.Show NetworkErrorStyles
Show NetworkErrorStyles
Show Properties
Show Properties
Show Properties
Show Properties
An optional string that defines the color of the text.
An optional string that defines the font family of the text.
An optional string that defines the weight of the text.
An optional string that defines the size of the text.
An optional string that defines the smoothing of the font.
An optional string that defines the height of the line.
An optional string that defines the transformation of the text.
An optional string that defines the spacing between letters in the text.
A string that defines the background color or image of the box element.
A number or string that defines the radius of the box element’s corners.
A string that defines the shadow effect of the box element.
A string that defines the style of the box element’s border.
A number or string that defines the color of the box element’s border.
A number or string that defines the width of the box element’s border.
An object of type
SubmitButtonStyles to configure the appearance of the checkout’s submit button.Show SubmitButtonStyles
Show SubmitButtonStyles
Defines the base style for the submit button. The value is an object of type SubmitButtonStyle.
Defines the style for the submit button when it’s disabled. The value is an object of type SubmitButtonStyle.
Defines the style for the submit button when it’s loading. The value is an object of type SubmitButtonStyle.
An object of type
TextStyle to configure the appearance of the “Saved Payment Methods” title in the checkout.Show TextStyle
Show TextStyle
An optional string that defines the color of the text.
An optional string that defines the font family of the text.
An optional string that defines the weight of the text.
An optional string that defines the size of the text.
An optional string that defines the smoothing of the font.
An optional string that defines the height of the line.
An optional string that defines the transformation of the text.
An optional string that defines the spacing between letters in the text.
An object of type
SavedPaymentMethodButtonStyles to configure the appearance of the buttons that represent saved payment methods in the checkout.Show SavedPaymentMethodButtonStyles
Show SavedPaymentMethodButtonStyles
An object of type SavedPaymentMethodButtonStyle that defines the style for the saved payment method button.
An object of type SavedPaymentMethodButtonStyle that defines the style for the saved payment method button when it’s selected.
An object of type
PaymentMethodButtonStyle to configure the appearance of the buttons that represent payment methods in the checkout.Show PaymentMethodButtonStyle
Show PaymentMethodButtonStyle
The height of the payment method button.
The minimum height of the payment method button.
The maximum height of the payment method button.
An object of type TextStyle which describes the styling properties for the primary text in the payment method button.
The color of the payment method logo, which can be “DARK”, “LIGHT”, or
“COLORED”.
The top margin of the payment method button.
A string that defines the background color or image of the box element.
A number or string that defines the radius of the box element’s corners.
A string that defines the shadow effect of the box element.
A string that defines the style of the box element’s border.
A number or string that defines the color of the box element’s border.
A number or string that defines the width of the box element’s border.
An object of type
ErrorMessageStyle to configure the appearance of error messages that appear in the checkout.Show ErrorMessageStyle
Show ErrorMessageStyle
The color of the error message.
An optional string that defines the color of the text.
An optional string that defines the font family of the text.
An optional string that defines the weight of the text.
An optional string that defines the size of the text.
An optional string that defines the smoothing of the font.
An optional string that defines the height of the line.
An optional string that defines the transformation of the text.
An optional string that defines the spacing between letters in the text.
A string that defines the background color or image of the box element.
A number or string that defines the radius of the box element’s corners.
A string that defines the shadow effect of the box element.
A string that defines the style of the box element’s border.
A number or string that defines the color of the box element’s border.
A number or string that defines the width of the box element’s border.
An object of type
TextStyle to configure the appearance of the small print that appears at the bottom of the checkout.Show TextStyle
Show TextStyle
An optional string that defines the color of the text.
An optional string that defines the font family of the text.
An optional string that defines the weight of the text.
An optional string that defines the size of the text.
An optional string that defines the smoothing of the font.
An optional string that defines the height of the line.
An optional string that defines the transformation of the text.
An optional string that defines the spacing between letters in the text.
Assistant
Responses are generated using AI and may contain mistakes.