Modify the payment button and checkout experience to match your website’s style
appearance
<CrossmintHostedCheckout appearance={{ theme: { button: "light", // Options: "light", "dark", "crossmint" }, }} />
<CrossmintHostedCheckout appearance={{ variables: { colors: { accent: "#FF0000", // Your custom color }, }, }} />
<CrossmintHostedCheckout appearance={{ display: "popup", // Options: "popup", "new-tab" }} />
<CrossmintHostedCheckout appearance={{ theme: { checkout: "dark", // Options: "light", "dark" }, }} />
<CrossmintHostedCheckout appearance={{ overlay: { enabled: false, // Disable the dark overlay behind the modal }, }} />
<CrossmintHostedCheckout appearance={{ theme: { button: "light", checkout: "dark", }, variables: { colors: { accent: "#FF0000", }, }, display: "popup", overlay: { enabled: true, }, }} // ... other props />
Was this page helpful?