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

<template>
    <CrossmintPaymentElement
        // other props removed for brevity
        :ui-config="{
            borderRadius: '4px',
            colors: {
                background: '#F0F4F8',
                backgroundSecondary: '#FFFFFF'
            },
            hideCardForm: false,
        }"
    />
</template>

<crossmint-payment-element
    // 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", } }`

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

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

uiConfig

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

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

uiConfig

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

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

uiConfig

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

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

uiConfig

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

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

uiConfig

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