Customize the style of the embedded checkout by adding a uiConfig object to the CrossmintPaymentElement:
<CrossmintPaymentElement
// other props removed for brevity
uiConfig={{
borderRadius: "4px",
colors: {
background: "#F0F4F8",
backgroundSecondary: "#FFFFFF",
},
hideCardForm: false,
}}
/>
If you are only displaying Google Pay and Apple Pay, the card form is not required. To hide it, you can set hideCardForm to true.
Themes
Explore the following templates:
{
fontSizeBase: "0.91rem",
fontWeightPrimary: "400",
fontWeightSecondary: "500",
spacingUnit: "0.274rem",
borderRadius: "4px",
colors: {
background: "#F0F4F8",
backgroundSecondary: "#FFFFFF",
backgroundTertiary: "#49d7a8",
textPrimary: "#333333",
textSecondary: "#FFFFFF",
border: "#B2BEC3",
danger: "#FF6B6B",
textLink: "#4D9078",
}
}
| |
{
fontSizeBase: "0.91rem",
fontWeightPrimary: "400",
fontWeightSecondary: "500",
spacingUnit: "0.274rem",
borderRadius: "4px",
colors: {
background: "#F0F4F8",
backgroundSecondary: "#FFFFFF",
backgroundTertiary: "#49d7a8",
textPrimary: "#333333",
textSecondary: "#FFFFFF",
border: "#B2BEC3",
danger: "#FF6B6B",
textLink: "#4D9078",
}
}
| |
{
fontSizeBase: "0.91rem",
fontWeightPrimary: "400",
fontWeightSecondary: "500",
spacingUnit: "0.274rem",
borderRadius: "4px",
colors: {
background: "#2C3E50",
backgroundSecondary: "#34495E",
backgroundTertiary: "#1ABC9C",
textPrimary: "#E0E0E0",
textSecondary: "#2C3E50",
border: "#7F8C8D",
danger: "#E74C3C",
textLink: "#16A085",
}
}
| |
{
fontSizeBase: "0.91rem",
fontWeightPrimary: "400",
fontWeightSecondary: "500",
spacingUnit: "0.274rem",
borderRadius: "4px",
colors: {
background: "#FDF6E3",
backgroundSecondary: "#EEE8D5",
backgroundTertiary: "#268BD2",
textPrimary: "#657B83",
textSecondary: "#FDF6E3",
border: "#93A1A1",
danger: "#DC322F",
textLink: "#268BD2",
}
}
| |
{
fontSizeBase: "0.91rem",
fontWeightPrimary: "400",
fontWeightSecondary: "500",
spacingUnit: "0.274rem",
borderRadius: "4px",
colors: {
background: "#002B36",
backgroundSecondary: "#073642",
backgroundTertiary: "#268BD2",
textPrimary: "#a8b4b6",
textSecondary: "#002B36",
border: "#657B83",
danger: "#DC322F",
textLink: "#268BD2",
}
}
| |
{
fontSizeBase: "0.91rem",
fontWeightPrimary: "400",
fontWeightSecondary: "500",
spacingUnit: "0.274rem",
borderRadius: "4px",
colors: {
background: "#FFFFFF",
backgroundSecondary: "#F5F5F5",
backgroundTertiary: "#3F51B5",
textPrimary: "#212121",
textSecondary: "#FFFFFF",
border: "#BDBDBD",
danger: "#F44336",
textLink: "#3F51B5",
}
}
| |
{
fontSizeBase: "0.91rem",
fontWeightPrimary: "400",
fontWeightSecondary: "500",
spacingUnit: "0.274rem",
borderRadius: "4px",
colors: {
background: "#121212",
backgroundSecondary: "#1E1E1E",
backgroundTertiary: "#3F51B5",
textPrimary: "#E0E0E0",
textSecondary: "#121212",
border: "#37474F",
danger: "#F44336",
textLink: "#3F51B5",
}
}
| |
Property Reference
Background Color
Sets the background color of the checkout element.
Sets the background color of the input fields.
Sets the background color of the payment button.
Text Color
Sets the color of the text on the input labels, placeholders, and terms of service.
Sets the color of the text on the payment button.
Sets the color of the input field borders when active.
Sets the color of the input field borders and error messages that appear when there is an error.
Sets the color of terms of service hyperlinked text.
Typography
Sets the font size for all text elements. The default value is 0.91rem.
Sets the font weight of all the input placeholders.
Sets the font weight of all input labels.
Sets the height of all input fields. The default value is: 0.274rem.
Sets the border radius of all input fields.
