Customization
Visual customization: Colors, shapes, specific UI components
Last updated
Visual customization: Colors, shapes, specific UI components
Last updated
You can customize the React Native Unified Checkout to supports visual customization, which allows you to match the design of your app
You can modify colors, fonts, and more by using the appearance
parameter when you call initPaymentSheet()
.
Customize the colors in the mobile Payment Element by modifying the color categories. Each color category determines the color of one or more components in the UI. For example, primary defines the color of the Pay button
Color Category | Usage |
---|---|
Note To support dark mode, pass maps for both light and dark colors to colors.
you can customize the border radius, border width, and shadow used throughout the mobile Payment Element.
The sections above describe customization options that affect the mobile Payment Element broadly, across multiple UI components. We also provide customization options specifically for the primary button (for example, the Pay button).
Customization options for specific UI components take precedence over other values. For example, primaryButton.shapes.borderRadius
overrides the value of shapes.borderRadius
.
Now you can test the payments on your app and go-live!
Shape Category | Usage |
---|---|
primary
Primary defines the color of the Pay button and selected items
background
The color used for the background of your Payment page
componentBackground
The color used for the background of inputs, tabs, and other components
componentBorder
The color used for the external border of inputs, tabs, and other components in your PaymentSheet
componentDivider
The color used for the internal border (meaning the border is shared with another component) of inputs, tabs, and other components in your PaymentSheet
primaryText
The color of the header text in your Payment page
secondaryText
The color of the label text of input fields
componentText
The color of the input text in your PaymentSheet components, such as the user's card number or zip code
placeholderText
The color of the placeholder text of input fields
icon
The color used for icons in your Payment Sheet, such as the close (x) button
error
The color used to indicate errors or destructive actions in your Payment Sheet
borderRadius
radius of the border of the input fields, tabs and other components of the payment page
borderWidth
width of the border used to across input fields, tabs and other components