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.
| Prop | Type | Description |
|---|---|---|
| colorPrimary | string (in hex, e.g. #cf3781) | The primary brand color for buttons and links. |
| colorBackground | string (in hex, e.g. #cf3781) | The background color of the page. |
| colorText | string (in hex, e.g. #cf3781) | The color for text on the page and UI elements. |
| borderRadius | number (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}