Customize the Button UI - Crossmint Docs

Developer Console

Developer Blog

Introduction

Wallets

Introduction
Custodial Wallets
Smart Wallets
Advanced Topics

Minting Tools

Introduction
Quickstart ⚡
Guides
Advanced Topics

Subscriptions

Verifiable Credentials

Introduction
Quickstart ⚡
Guides
Advanced Topics

NFT Checkout

Introduction
No-Code Storefront
Pay Button
Embedded Checkout
Headless Checkout
Creating or Importing NFT Collections
Advanced Topics

Authentication

Introduction
Quickstart ⚡
Guides
Advanced Topics

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.

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

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.

Select Payment Options Redirect URLs