Customization
Visual customization: Colors, shapes, specific UI components
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()
.
Colors
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
Note To support dark mode, pass maps for both light and dark colors to colors.
Shapes
you can customize the border radius, border width, and shadow used throughout the mobile Payment Element.
Specific UI components
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!
Last updated