Get Started

import type { ReactNode } from "react";
import { CrossmintProvider } from "@crossmint/client-sdk-react-ui";

function App({ children }: { children: ReactNode }) {
    return <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">{children}</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)
    return (
        <CrossmintPaymentMethodManagement
            jwt={jwt}
            onPaymentMethodSelected={(paymentMethod) => {
                // Persist this ID so your backend can register the card and create order intents.
                console.log("Card saved:", paymentMethod.paymentMethodId);
            }}
        />
    );
}