feat: PMM mode/allowedPaymentMethodTypes + NewCard wrapper

.changeset/pmm-mode-and-new-card.md

@@ -0,0 +1,10 @@
+---
+"@crossmint/client-sdk-base": minor
+"@crossmint/client-sdk-react-ui": minor
+---
+
+`CrossmintPaymentMethodManagement`: add `mode` (`"select-or-add" | "add-only"`) and `allowedPaymentMethodTypes` props. Make `jwt` optional — when omitted, the component tokenizes the card without persisting a saved payment method and emits a `card-token` selection event.
+
+Introduces `CrossmintNewCard`, a tokenize-only wrapper around `CrossmintPaymentMethodManagement` for use cases that don't need a signed-in user (e.g., embedded checkout).
+
+The `onPaymentMethodSelected` callback now receives a discriminated union: `{ type: "card", paymentMethod }` when a saved method is selected/created, or `{ type: "card-token", cardToken }` when tokenizing without JWT.

apps/payments/nextjs/app/new-card/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { CrossmintProvider, CrossmintNewCard } from "@crossmint/client-sdk-react-ui";
+
+export default function NewCardPage() {
+    return (
+        <div
+            style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "start",
+                padding: "20px",
+            }}
+        >
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "start",
+                    width: "100%",
+                    maxWidth: "450px",
+                }}
+            >
+                <CrossmintProvider apiKey="ck_development_5ZUNkuhjP8aYZEgUTDfWToqFpo5zakEqte1db4pHZgPAVKZ9JuTQKmeRbn1gv7zYCoZrRNYy4CnM7A3AMHQxFKA2BsSVeZbKEvXXY7126Th68mXhTg6oxHJpC2kuw9Q1HasVLX9LM67FoYSTRtTUUEzP93GUSEmeG5CZG7Lbop4oAQ7bmZUKTGmqN9L9wxP27CH13WaTBsrqxUJkojbKUXEd">
+                    <CrossmintNewCard
+                        onCardTokenized={(cardToken) => {
+                            console.log("card tokenized", cardToken);
+                        }}
+                    />
+                </CrossmintProvider>
+            </div>
+        </div>
+    );
+}

packages/client/base/src/types/payment-method-management/CrossmintPaymentMethodManagementProps.ts

@@ -1,12 +1,17 @@
 import type { EmbeddedCheckoutV3Appearance } from "../embed";
 
+export type PaymentMethodManagementMode = "select-or-add" | "add-only";
+export type PaymentMethodManagementAllowedType = "card";
+
 export interface CrossmintPaymentMethodManagementProps {
-    jwt: string;
-    appearance?: PaymentMethodManagementAppearance;
+    jwt?: string;
+    mode?: PaymentMethodManagementMode;
+    allowedPaymentMethodTypes?: PaymentMethodManagementAllowedType[];
+    appearance?: EmbeddedCheckoutV3Appearance;
     onPaymentMethodSelected?: (paymentMethod: CrossmintPaymentMethod) => void | Promise<void>;
 }
 
-export type CrossmintPaymentMethod = {
+export type CrossmintCardPaymentMethod = {
     type: "card";
     paymentMethodId: string;
     card: {
@@ -29,7 +34,13 @@ export type CrossmintPaymentMethod = {
     };
 };
 
-export type PaymentMethodManagementAppearance = {
-    fonts?: EmbeddedCheckoutV3Appearance["fonts"];
-    variables?: EmbeddedCheckoutV3Appearance["variables"];
+export type CrossmintCardToken = {
+    id: string;
+    billing?: {
+        name?: string;
+    };
 };
+
+export type CrossmintPaymentMethod =
+    | { type: "card"; paymentMethod: CrossmintCardPaymentMethod }
+    | { type: "card-token"; cardToken: CrossmintCardToken };

packages/client/base/src/types/payment-method-management/events/incoming.ts

@@ -1,9 +1,47 @@
 import { z } from "zod";
 
+const cardTokenSelectedSchema = z.object({
+    type: z.literal("card-token"),
+    cardToken: z.object({
+        id: z.string(),
+        billing: z
+            .object({
+                name: z.string().optional(),
+            })
+            .optional(),
+    }),
+});
+
+const cardPaymentMethodSelectedSchema = z.object({
+    type: z.literal("card"),
+    paymentMethod: z.object({
+        type: z.literal("card"),
+        paymentMethodId: z.string(),
+        card: z.object({
+            source: z.object({
+                type: z.literal("basis-theory-token"),
+                id: z.string(),
+            }),
+            brand: z.string(),
+            last4: z.string(),
+            expiration: z.object({
+                month: z.string(),
+                year: z.string(),
+            }),
+        }),
+        default: z.boolean().optional(),
+        display: z
+            .object({
+                imageUrl: z.string().optional(),
+            })
+            .optional(),
+    }),
+});
+
 export const paymentMethodManagementIncomingEvents = {
     "ui:height.changed": z.object({
         height: z.number(),
     }),
-    "payment-method:selected": z.any(),
+    "payment-method:selected": z.discriminatedUnion("type", [cardPaymentMethodSelectedSchema, cardTokenSelectedSchema]),
 };
 export type PaymentMethodManagementIncomingEventMap = typeof paymentMethodManagementIncomingEvents;

packages/client/ui/react-ui/src/components/card-management/CrossmintNewCard.tsx

@@ -0,0 +1,30 @@
+import type {
+    CrossmintCardPaymentMethod,
+    CrossmintCardToken,
+    EmbeddedCheckoutV3Appearance,
+} from "@crossmint/client-sdk-base";
+import { CrossmintPaymentMethodManagement } from "./CrossmintPaymentMethodManagement";
+
+export interface CrossmintNewCardProps {
+    jwt?: string;
+    appearance?: EmbeddedCheckoutV3Appearance;
+    onCardTokenized?: (cardToken: CrossmintCardToken) => void | Promise<void>;
+    onPaymentMethodAdded?: (paymentMethod: CrossmintCardPaymentMethod) => void | Promise<void>;
+}
+
+export function CrossmintNewCard(props: CrossmintNewCardProps) {
+    return (
+        <CrossmintPaymentMethodManagement
+            jwt={props.jwt}
+            mode="add-only"
+            allowedPaymentMethodTypes={["card"]}
+            appearance={props.appearance}
+            onPaymentMethodSelected={(result) => {
+                if (result.type === "card-token") {
+                    return props.onCardTokenized?.(result.cardToken);
+                }
+                return props.onPaymentMethodAdded?.(result.paymentMethod);
+            }}
+        />
+    );
+}

packages/client/ui/react-ui/src/components/card-management/index.ts

@@ -1 +1,2 @@
 export * from "./CrossmintPaymentMethodManagement";
+export * from "./CrossmintNewCard";