Save a Card

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

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

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

    const handlePaymentMethodSelected = (paymentMethod: { paymentMethodId: string }) => {
        // paymentMethod.paymentMethodId represents the saved card.
        // Persist it so you can verify the card and give agent cards later.
        console.log("Card saved:", 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>
    );
}