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