Customize the Button UI

Modify the payment button to match the style of your website

Customizing the button style is done differently depending on the JS framework you use.

Change the button to light mode by setting theme as light. Default is dark.

React

Customizing the button UI in React

Add custom styles to the CrossmintPayButton component using CSS. See the example of the React SDK below and note the className attribute:

import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

export default function Mint() {
  return (
    <div>
      <CrossmintPayButton
        projectId="_YOUR_PROJECT_ID_"
        collectionId="_YOUR_CLIENT_ID"
        className="xmint-btn"
      />
    </div>
  );
}

Changing the style

Customize the style by modifying the relevant css properties. For example:

button.xmint-btn {
  background-color: blueviolet;
}

Would modify the button’s background color as follows:

Changing the text

Customize the text on the button by adding the property getButtonText and creating an inline function with the following two parameters:

• connecting: specifies whether the component is loading its packages.

• paymentMethod: returns the current payment method being used

This setup allows you to control the text depending on the state. For example, the following snippet…

<CrossmintPayButton
  getButtonText={(connecting, paymentMethod) =>
    connecting ? "Connecting" : `Pay with ${paymentMethod}`
  }
/>

… would result in the following button.

Vanilla JS

Customizing the button UI in Vanilla JS

Add custom styles to the CrossmintPayButton component using CSS. See the example of the Vanilla JS SDK below and note the class attribute:

<crossmint-pay-button
  projectId="_YOUR_PROJECT_ID_"
  collectionId="_YOUR_CLIENT_ID_"
  class="xmint-btn"
/>

When specifying the style, you must use the pseudo-element ::part, because the payment button is a webcomponent:

Changing the style

Customize the style by defining ::part(button). For example:

.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%
  );
}

Which would result in the following:

Changing the text

Customize the text by defining ::part(contentParagraph). For example:

.xmint-btn::part(contentParagraph) {
  display: none;
}
.xmint-btn::part(button):after {
  content: "Custom Buy Text";
}

Which would result in the following: