Customize Style

Adapt UI elements of the Embedded NFT Checkout

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:

react

<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:

• Minty Light
• Minty Dark
• Solarized Light
• Solarized Dark
• Material Light
• Material Dark

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

Property Reference

uiConfig

object

Background Color

background

background

string

Sets the background color of the checkout element.

backgroundSecondary

backgroundSecondary

string

Sets the background color of the input fields.

backgroundTertiary

backgroundTertiary

string

Sets the background color of the payment button.

Text Color

textPrimary

textPrimary

string

Sets the color of the text on the input labels, placeholders, and terms of service.

textSecondary

textSecondary

string

Sets the color of the text on the payment button.

border

border

string

Sets the color of the input field borders when active.

danger

danger

string

Sets the color of the input field borders and error messages that appear when there is an error.

textLink

textLink

string

Sets the color of terms of service hyperlinked text.

Typography

fontSizeBase

fontSizeBase

string

Sets the font size for all text elements. The default value is 0.91rem.

fontWeightPrimary

fontWeightPrimary

string

Sets the font weight of all the input placeholders.

fontWeightSecondary

fontWeightSecondary

string

Sets the font weight of all input labels.

Input Fields

spacingUnit

spacingUnit

string

Sets the height of all input fields. The default value is: 0.274rem.

borderRadius

borderRadius

string

Sets the border radius of all input fields.