React Components

Overview

The Crossmint React SDK provides ready-to-use components for common Web3 operations including authentication forms, embedded checkout, and NFT display.

Installation

npm install @crossmint/client-sdk-react-ui

AuthForm

A complete authentication form with support for multiple login methods.

Usage

import { AuthForm } from '@crossmint/client-sdk-react-ui';
import { useAuthForm } from '@crossmint/client-sdk-react-ui';

function LoginPage() {
  return (
    <CrossmintProvider apiKey="your-api-key">
      <CrossmintAuthProvider loginMethods={['email', 'google', 'farcaster']}>
        <AuthForm />
      </CrossmintAuthProvider>
    </CrossmintProvider>
  );
}

Props

style

React.CSSProperties

Custom CSS styles to apply to the form container

Features

Email OTP authentication with code input
OAuth providers (Google, Twitter, Farcaster)
Web3 wallet connection
Error display and validation
Customizable appearance via CrossmintAuthProvider
Terms of service text support
Responsive design

CrossmintEmbeddedCheckout

Embedded checkout component for NFT purchases with fiat and crypto payment support.

Usage with Existing Order

import { CrossmintEmbeddedCheckout } from '@crossmint/client-sdk-react-ui';

function CheckoutPage() {
  return (
    <CrossmintProvider apiKey="your-api-key">
      <CrossmintEmbeddedCheckout
        orderId="order_123"
        clientSecret="cs_secret_456"
        payment={{
          fiat: { enabled: true },
          crypto: { enabled: true }
        }}
      />
    </CrossmintProvider>
  );
}

Usage with New Order

<CrossmintEmbeddedCheckout
  lineItems={[
    {
      collectionLocator: 'crossmint:collection-id',
      callData: { quantity: 1 }
    }
  ]}
  recipient={{ email: '[email protected]' }}
  payment={{
    fiat: { 
      enabled: true,
      defaultCurrency: 'usd',
      allowedMethods: {
        card: true,
        applePay: true,
        googlePay: true
      }
    },
    crypto: { 
      enabled: true,
      defaultChain: 'ethereum',
      defaultCurrency: 'eth'
    },
    defaultMethod: 'fiat'
  }}
  appearance={{
    variables: {
      borderRadius: '8px',
      colors: {
        accent: '#4F46E5'
      }
    }
  }}
/>

Props

orderId

string

Existing order ID. Required when using an existing order.

clientSecret

string

Client secret for order verification (for existing orders)

lineItems

EmbeddedCheckoutV3LineItem | EmbeddedCheckoutV3LineItem[]

Items to purchase. Required when creating a new order.

Show Line item types

type EmbeddedCheckoutV3LineItem =
  | { collectionLocator: string; callData?: Record<string, any> }
  | { tokenLocator: string; callData?: Record<string, any> }
  | { productLocator: string }

recipient

EmbeddedCheckoutV3Recipient

Recipient information for the purchase

Show properties

string

Recipient email address

walletAddress

string

Recipient wallet address (alternative to email)

physicalAddress

object

Physical shipping address for physical items

Show properties

name

string

required

line1

string

required

line2

string

city

string

required

state

string

required

postalCode

string

required

country

'US'

required

payment

EmbeddedCheckoutV3Payment

required

Payment configuration

Show properties

fiat

object

required

Show properties

enabled

boolean

required

Enable fiat payment methods

defaultCurrency

Currency

Default fiat currency (e.g., ‘usd’, ‘eur’)

allowedMethods

object

Show properties

card

boolean

applePay

boolean

googlePay

boolean

crypto

object

required

Show properties

enabled

boolean

required

Enable crypto payment methods

defaultChain

BlockchainIncludingTestnet

Default blockchain (e.g., ‘ethereum’, ‘polygon’)

defaultCurrency

CryptoCurrency

Default crypto currency (e.g., ‘eth’, ‘usdc’)

payer

EmbeddedCheckoutPayer

Custom payer configuration for bringing your own wallet

defaultMethod

'fiat' | 'crypto'

Default payment method tab

receiptEmail

string

Email address for payment receipts

appearance

EmbeddedCheckoutV3Appearance

Customize the checkout UI

Show properties

variables

object

Global styling variables

Show properties

fontFamily

string

borderRadius

string

colors

object

Show properties

accent

string

textPrimary

string

textSecondary

string

backgroundPrimary

string

danger

string

rules

object

Component-specific styling rules (PrimaryButton, Input, Tab, etc.)

jwt

string

JWT token for authenticated purchases

locale

Locale

Locale for internationalization (e.g., ‘en-US’, ‘es-ES’)

metadata

JSONObject

Custom metadata to attach to the order

CrossmintNFTCollectionView

Displays all NFTs owned by specified wallets.

Usage

import { CrossmintNFTCollectionView } from '@crossmint/client-sdk-react-ui';

function MyNFTs() {
  return (
    <CrossmintProvider apiKey="your-api-key">
      <CrossmintNFTCollectionView
        wallets={[
          { address: '0x1234...5678', chain: 'ethereum' },
          { address: 'abc123...', chain: 'solana' }
        ]}
        uiConfig={{
          colors: {
            background: '#000000',
            textPrimary: '#ffffff'
          }
        }}
      />
    </CrossmintProvider>
  );
}

Props

wallets

Wallet[]

required

Array of wallet addresses and chains to display NFTs from

Show Wallet type

interface Wallet {
  address: string;
  chain: 'ethereum' | 'polygon' | 'solana' | 'base' | ...;
}

uiConfig

UIConfig

UI customization options

Show properties

colors

object

Show properties

background

string

textPrimary

string

textSecondary

string

environment

string

Environment override (defaults to production)

CrossmintNFTDetail

Displays detailed information about a specific NFT.

Usage

import { CrossmintNFTDetail } from '@crossmint/client-sdk-react-ui';

function NFTDetailsPage() {
  return (
    <CrossmintProvider apiKey="your-api-key">
      <CrossmintNFTDetail
        nft={{
          locator: 'ethereum:0x123...456:1'
        }}
        uiConfig={{
          colors: {
            background: '#f5f5f5',
            textPrimary: '#000000'
          }
        }}
      />
    </CrossmintProvider>
  );
}

Props

nft

NFTOrNFTLocator

required

NFT to display (can be full NFT object or locator string)

Show NFTOrNFTLocator type

type NFTOrNFTLocator = 
  | { locator: string }
  | { chain: string; contractAddress: string; tokenId: string }

uiConfig

UIConfig

UI customization options (same as CrossmintNFTCollectionView)

environment

string

Environment override (defaults to production)

Styling

All components support extensive customization through their appearance/uiConfig props:

// Auth form appearance
<CrossmintAuthProvider
  appearance={{
    colors: {
      accent: '#4F46E5',
      textPrimary: '#000000',
      textSecondary: '#666666',
      danger: '#EF4444'
    },
    fontFamily: 'Inter, sans-serif'
  }}
>
  <AuthForm />
</CrossmintAuthProvider>

// Checkout appearance
<CrossmintEmbeddedCheckout
  appearance={{
    variables: {
      borderRadius: '12px',
      fontFamily: 'Roboto, sans-serif'
    },
    rules: {
      PrimaryButton: {
        colors: {
          background: '#10B981',
          text: '#ffffff'
        }
      }
    }
  }}
  // ... other props
/>

Wallets SDK

Client SDK

Server SDK

Overview

Installation

AuthForm

Usage

Props

Features

CrossmintEmbeddedCheckout

Usage with Existing Order

Usage with New Order

Props

CrossmintNFTCollectionView

Usage

Props

CrossmintNFTDetail

Usage

Props

Styling

Build docs developers (and LLMs) love

Wallets SDK

Client SDK

Server SDK

​Overview

​Installation

​AuthForm

​Usage

​Props

​Features

​CrossmintEmbeddedCheckout

​Usage with Existing Order

​Usage with New Order

​Props

​CrossmintNFTCollectionView

​Usage

​Props

​CrossmintNFTDetail

​Usage

​Props

​Styling

Build docs developers (and LLMs) love

Overview

Installation

AuthForm

Usage

Props

Features

CrossmintEmbeddedCheckout

Usage with Existing Order

Usage with New Order

Props

CrossmintNFTCollectionView

Usage

Props

CrossmintNFTDetail

Usage

Props

Styling