Skip to main content
These flows are actively being refined. Crossmint’s customer success engineers (CSE) will work with you to review your architecture. Contact Crossmint to get started.

​
Overview

Before an agent can request payment methods, the human user needs to save their card on file. Crossmint handles card tokenization using a PCI-compliant vault, so your application never sees or stores raw card data. From a single saved card, you can:

​
Where This Lives in Your App

Saving a card requires a UI where the human enters their credit card details. Crossmint tokenizes and vaults the card securely, so neither your app nor the agent ever handles raw card data. The agent can trigger this flow — for example, by sharing a link to the card entry UI — but the human must be the one to fill in their details and submit.

​
Prerequisites

​
Integration Steps

1

Install the SDK

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

Wrap your app with the Crossmint provider

Set up the CrossmintProvider at the root of your app. This makes the Crossmint SDK available to all child components.
"use client";
import { CrossmintProvider } from "@crossmint/client-sdk-react-ui";

function App() {
    return (
        <CrossmintProvider apiKey={process.env.NEXT_PUBLIC_CROSSMINT_CLIENT_API_KEY}>
            {/* Your app */}
        </CrossmintProvider>
    );
}
3

Add the payment method management component

Place this component in your settings or account page where the user manages their payment methods. Pass your own JWT (from your auth provider) to the CrossmintPaymentMethodManagement component. This component handles card tokenization and creates Crossmint payment methods automatically.For details on obtaining a compatible JWT, see the JWT Authentication Guide.
import { CrossmintPaymentMethodManagement } from "@crossmint/client-sdk-react-ui";
import type { CrossmintPaymentMethod } from "@crossmint/client-sdk-react-ui";

function PaymentMethodsPage({ jwt }: { jwt: string }) {
    // jwt comes from your own auth provider (e.g. Stytch, Auth0, Dynamic)

    const handlePaymentMethodSelected = (paymentMethod: CrossmintPaymentMethod) => {
        // Store paymentMethodId in your backend. It represents the saved card.
        // You will use it when requesting virtual cards or funding wallets.
        console.log("Payment method selected:", paymentMethod.paymentMethodId);
    };

    return (
        <div>
            <h2>Payment Methods</h2>
            <p>Save a card so your agent can request payments on your behalf.</p>
            <CrossmintPaymentMethodManagement
                jwt={jwt}
                onPaymentMethodSelected={handlePaymentMethodSelected}
            />
        </div>
    );
}
The CrossmintPaymentMethodManagement component handles all PCI compliance concerns. Card data is collected and vaulted directly by Crossmint and never passes through your servers.
4

Store the payment method ID

The payment method ID should be stored securely in your backend. While it cannot be used to extract the original card number, it can be used to initiate payment requests. Treat it with appropriate access controls.
When the user selects or adds a card, the onPaymentMethodSelected callback provides a CrossmintPaymentMethod object. Store the paymentMethodId in your backend, associated with the user. You will reference it when:

​
How It Connects

Once a card is saved, it serves as the foundation for both payment paths:
Card on File: how it connects to virtual cards and stablecoin onramp
Think of this like how Apple Pay or Google Chrome store your card. You save it once, and derived payment methods can be securely generated from it.
These flows are actively being refined. Crossmint’s customer success engineers (CSE) will work with you to review your architecture. Contact Crossmint to get started.

​
Next Steps

Request Virtual Cards

Let your agent request scoped virtual cards from the saved card, with human approval.

Fund a Stablecoin Wallet

Create a wallet for your agent and fund it via onramp from the saved card.