Customize Style

Checkout the Crossmint Playground to play with a live demo and theming options!

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:

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