If you are using our previous version of the pay button, please refer to the old UI customization guide

You can customize both the payment button and the checkout modal appearance using the appearance prop.

​
Button Customization

​
Theme Options

The button can be styled using predefined themes:

<CrossmintHostedCheckout
    appearance={{
        theme: {
            button: "light", // Options: "light", "dark", "crossmint"
        },
    }}
/>

​
Custom Colors

Customize the button’s accent color:

<CrossmintHostedCheckout
    appearance={{
        variables: {
            colors: {
                accent: "#FF0000", // Your custom color
            },
        },
    }}
/>

​
Checkout Experience Customization

​
Display Mode

Choose how the checkout appears:

<CrossmintHostedCheckout
    appearance={{
        display: "popup", // Options: "popup", "new-tab"
    }}
/>

​
Theme

Set the checkout interface theme:

<CrossmintHostedCheckout
    appearance={{
        theme: {
            checkout: "dark", // Options: "light", "dark"
        },
    }}
/>

​
Overlay Options

Control the modal overlay behavior:

<CrossmintHostedCheckout
    appearance={{
        overlay: {
            enabled: false, // Disable the dark overlay behind the modal
        },
    }}
/>

​
Complete Styling Example

Here’s an example combining multiple customization options:

<CrossmintHostedCheckout
    appearance={{
        theme: {
            button: "light",
            checkout: "dark",
        },
        variables: {
            colors: {
                accent: "#FF0000",
            },
        },
        display: "popup",
        overlay: {
            enabled: true,
        },
    }}
    // ... other props
/>

The appearance configuration allows you to: - Customize button and checkout themes independently - Set custom accent colors - Control how the checkout displays (popup/tab) - Manage overlay behavior

Configure Payment OptionsOverview