Skip to main content
Crossmint enables users to purchase NFTs and interact with blockchain applications using credit cards, removing the need for cryptocurrency.

​
Overview

Credit card (fiat) payments through Crossmint provide:
  • No crypto required - Users pay with traditional payment methods
  • Instant conversion - Fiat is automatically converted to crypto
  • Multiple currencies - Support for USD, EUR, and more
  • Secure processing - PCI-compliant payment handling

​
Payment Flow

Here’s how credit card payments work:
1

User initiates purchase

User clicks checkout and selects credit card payment
2

Payment collection

Crossmint securely collects payment information
3

Automatic conversion

Fiat currency is converted to the required cryptocurrency
4

Transaction execution

The blockchain transaction is executed automatically
5

NFT delivery

The NFT is delivered to the user’s wallet

​
Enable Credit Card Payments

​
Hosted Checkout

The simplest way to accept credit card payments: 
import { CrossmintHostedCheckout } from "@crossmint/client-sdk-react-ui";

function PurchaseButton() {
  return (
    <CrossmintHostedCheckout
      lineItems={{
        collectionLocator: "crossmint:your-collection-id",
        callData: {
          totalPrice: "0.001",
          quantity: 1,
        },
      }}
      payment={{
        fiat: {
          enabled: true, // Enable credit card payments
        },
        crypto: {
          enabled: true, // Also allow crypto payments
        },
        defaultMethod: "fiat", // Default to credit card
      }}
    />
  );
}

​
Embedded Checkout

For a fully embedded experience: 
import { CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-ui";

function CheckoutPage() {
  return (
    <CrossmintEmbeddedCheckout
      recipient={{
        email: "[email protected]",
      }}
      lineItems={{
        tokenLocator: "ethereum:0x1234...",
        executionParameters: {
          mode: "exact-in",
          amount: "1",
        },
      }}
      payment={{
        fiat: {
          enabled: true,
        },
        receiptEmail: "[email protected]",
        defaultMethod: "fiat",
      }}
    />
  );
}

​
Payment Configuration

​
Fiat-Only Checkout

Require credit card payments only: 
payment={{
  fiat: {
    enabled: true,
  },
  crypto: {
    enabled: false, // Disable crypto payments
  },
  defaultMethod: "fiat",
}}

​
Email Receipt

Send payment receipts to customers: 
payment={{
  fiat: {
    enabled: true,
  },
  receiptEmail: "[email protected]",
}}
When using embedded checkout, always provide a receiptEmail for better customer experience and record-keeping.

​
Pricing Configuration

​
Fixed Price

Set a fixed price in the blockchain’s native currency: 
lineItems={{
  collectionLocator: "crossmint:collection-id",
  callData: {
    totalPrice: "0.001", // Price in ETH/SOL/etc.
    quantity: 1,
  },
}}

​
Dynamic Pricing

For dynamic pricing based on market rates, use execution parameters: 
lineItems={{
  tokenLocator: "ethereum:0x1234...",
  executionParameters: {
    mode: "exact-in",
    amount: "1",
    maxSlippageBps: "500", // 5% max slippage
  },
}}

​
Handling Payment Events

Track payment status in real-time: 
import { useCrossmintCheckout } from "@crossmint/client-sdk-react-ui";

function CheckoutStatus() {
  const { order } = useCrossmintCheckout();

  useEffect(() => {
    if (order) {
      console.log("Order phase:", order.phase);
      console.log("Order ID:", order.id);
    }
  }, [order]);

  switch (order?.phase) {
    case "payment":
      return <div>Processing payment...</div>;
    case "delivery":
      return <div>Payment successful! Delivering NFT...</div>;
    case "completed":
      return <div>Purchase complete!</div>;
    default:
      return <CrossmintEmbeddedCheckout {...props} />;
  }
}

​
Payment States

Understand the different payment phases:
PhaseDescription
paymentUser is entering payment information
deliveryPayment successful, delivering NFT
completedTransaction complete, NFT delivered
failedPayment or delivery failed

​
Payment Method Management

Allow users to save and manage payment methods: 
import { CrossmintPaymentMethodManagement } from "@crossmint/client-sdk-react-ui";

function PaymentSettings() {
  return (
    <div>
      <h2>Saved Payment Methods</h2>
      <CrossmintPaymentMethodManagement />
    </div>
  );
}
Payment method management requires user authentication. Ensure users are logged in before showing this component.

​
Supported Payment Methods

Crossmint supports various payment methods:
  • Credit Cards - Visa, Mastercard, American Express
  • Debit Cards - Most major debit cards
  • Apple Pay - Available on supported devices
  • Google Pay - Available on supported devices

​
Currency Support

Supported fiat currencies:
  • USD (US Dollar)
  • EUR (Euro)
  • GBP (British Pound)
  • CAD (Canadian Dollar)
  • AUD (Australian Dollar)
  • And more…
Currency is automatically detected based on the user’s location and card. No additional configuration needed.

​
Testing Credit Card Payments

Use test cards in development:

​
Successful Payment

Card Number: 4242 4242 4242 4242
Expiry: Any future date
CVV: Any 3 digits

​
Declined Payment

Card Number: 4000 0000 0000 0002
Expiry: Any future date
CVV: Any 3 digits
Never use real credit card information in development or staging environments.

​
Custom Styling

Customize the payment UI for embedded checkout: 
appearance={{
  variables: {
    colors: {
      backgroundPrimary: "#FFFFFF",
      textPrimary: "#000000",
      accent: "#00D9FF",
      border: "#E5E5E5",
    },
    borderRadius: {
      small: "4px",
      medium: "8px",
      large: "12px",
    },
  },
}}

​
Security Best Practices

1

Use HTTPS

Always serve your application over HTTPS in production.
2

Validate on backend

Never trust client-side payment data. Validate all transactions on your backend.
3

Monitor transactions

Set up webhooks to receive real-time transaction updates:
// Backend webhook endpoint
app.post("/webhook/crossmint", async (req, res) => {
  const event = req.body;
  
  if (event.type === "transaction.completed") {
    // Update your database
    await db.orders.update(event.orderId, {
      status: "completed",
      txHash: event.txHash,
    });
  }
  
  res.json({ received: true });
});
4

Handle errors gracefully

function CheckoutWithErrorHandling() {
  const { order, error } = useCrossmintCheckout();

  if (error) {
    return (
      <div className="error">
        <p>Payment failed: {error.message}</p>
        <button onClick={() => window.location.reload()}>
          Try Again
        </button>
      </div>
    );
  }

  return <CrossmintEmbeddedCheckout {...props} />;
}

​
Localization

Support multiple languages: 
<CrossmintHostedCheckout
  locale="en-US" // "en-US", "es-ES", "fr-FR", etc.
  // ... other props
/>

​
Next Steps

NFT Checkout

Complete NFT checkout implementation guide

Embedded Wallets

Create wallets for users automatically

Build docs developers (and LLMs) love

Get started for freeTalk to us