Customizing Checkout Elements

All Checkout Elements take in an optional options parameter that allows you to customize the component's styling.

The table below shows possible customization options. All of the arguments here are optional.

PropTypeDescription
colorPrimarystring (in hex, e.g. #cf3781)The primary brand color for buttons and links.
colorBackgroundstring (in hex, e.g. #cf3781)The background color of the page.
colorTextstring (in hex, e.g. #cf3781)The color for text on the page and UI elements.
borderRadiusnumber (e.g. 0 for sharp corners, 12 for rounded corners, 24 for pill shape)The roundness of buttons and input elements.

Examples

Here's an example checkout element with the following props:

  • colorPrimary='#cce3de'
  • colorBackground='#264653'
  • colorText='#f0f0f0'
  • borderRadius={0}