Customize Button Style
Beautify the payment button to match your website's style and brand
Crossmint offers two different ways to integrate our buy button into your website:
Customization is slightly different depending on which one you're using, so choose the correct one.
Dark and Light Modes Included
The Crossmint button includes dark and light themes out-of-the-box. The dark mode is set by default, but you can change this with the theme prop. Accepted values are
dark
(default one) andlight
.
This prop works for both SDKs.
Customizing the React.js Crossmint button
You can add your custom styles to your CrossmintPayButton
component. It only takes a few css rules to make it happen.
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
export default function Mint() {
return (
<div>
<CrossmintPayButton
clientId="_YOUR_CLIENT_ID"
className="xmint-btn"
/>
</div>
);
}
We can see here that we have a React functional component called Mint
where we are rendering the CrossmintPayButton
component. Notice that we have added a className
prop with the custom class name we will use to style our button.
Now lets leverage CSS specificity to overcome Crossmint's default classes. In our stylesheets, we could write:
button.xmint-btn {
background-color: blueviolet;
}
And the result would be:

Customize the button background
Changing the button text (reactjs)
To customize the Crossmint pay button text, add the property getButtonText
and create an inline function with the two parameters:
connecting: A state in which the component is loading its packages
paymentMethod: returns the current payment method being used
You can then freely control the text depending on the state, as demonstrated below.
<CrossmintPayButton
getButtonText={(connecting, paymentMethod) =>
connecting ? "Connecting" : `Pay with ${paymentMethod}`
}
/>
This will result in a button with custom text:
Customizing the Vanilla JS Crossmint button
Let's see an example of how to customize the Crossmint button when using our VanillaJS Client SDK:
<crossmint-pay-button
clientId="_YOUR_CLIENT_ID_"
mintConfig='{"type": "candy-machine"}'
class="xmint-btn"
/>
Unlike the React.js version of the SDK, use the ordinary class
attribute to add a custom class to the Crossmint button.
.xmint-btn::part(button) {
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
.xmint-btn::part(contentParagraph) {
color: white;
font-size: 1.25rem;
}
Notice how we're utilizing the CSS psuedo-element ::part
because our Vanilla JS Crossmint Button is a web component.
To customize the button use ::part(button)
and to customize the text use ::part(contentParagraph)
.
The result will look like the following:

Customize the button background and style
Changing the button text (vanilla js)
.xmint-btn::part(contentParagraph) {
display: none;
}
.xmint-btn::part(button):after {
content: "Custom Buy Text"
}
This will result in a button with custom text:

Customize the button text
Updated 5 months ago