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",
        },
    }}
/>

Themes

Explore the following templates:

uiConfig
{
  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",
  }
}

Property Reference

uiConfig
object

Background Color

Text Color

Typography

Input Fields