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