Customize the Button UI

Modify the payment button and checkout experience to match your website’s style

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