feat: PMM mode/allowedPaymentMethodTypes + NewCard wrapper by VeniaminC · Pull Request #1807 · Crossmint/crossmint-sdk

VeniaminC · 2026-04-21T16:38:59Z

Description

Updates CrossmintPaymentMethodManagement to match the new iframe contract from crossbit-main#24854, and adds CrossmintNewCard as a thin wrapper per the payments team's Option 2 (one underlying component, multiple named SDK entry points).

Props changes on CrossmintPaymentMethodManagement:

jwt is now optional. When omitted, the component tokenizes a card client-side without saving a UserPaymentMethod.
New mode: "select-or-add" | "add-only" — replaces the previous appearance.rules.SavedPaymentMethodsSection.display = "hidden" workaround.
New allowedPaymentMethodTypes: ("card")[] — future-proofs for bank-account etc.
appearance widened to the full EmbeddedCheckoutV3Appearance so consumers can pass rules.PrimaryButton for styling.
onPaymentMethodSelected now receives a discriminated union:
- { type: "card", paymentMethod } — a saved method was selected/created
- { type: "card-token", cardToken: { id, billing? } } — tokenize-only path (no JWT)

New component CrossmintNewCard:

<CrossmintNewCard onCardTokenized={(token) => ...} appearance={...} />

Internally just renders <CrossmintPaymentMethodManagement mode="add-only" allowedPaymentMethodTypes={["card"]} /> and narrows the callback to onCardTokenized.

Test plan

apps/payments/nextjs existing PaymentMethodManagement page still loads (backwards compatible, default mode is select-or-add)
Render CrossmintNewCard in isolation, tokenize a card, confirm onCardTokenized fires with { id, billing? }
Render CrossmintPaymentMethodManagement with mode="add-only" + JWT, confirm Continue creates a saved payment method and onPaymentMethodSelected receives { type: "card", paymentMethod }
Render CrossmintPaymentMethodManagement with appearance.rules.PrimaryButton.colors.background + borderRadius and verify styling applies
Typecheck clean: pnpm --filter @crossmint/client-sdk-base --filter @crossmint/client-sdk-react-ui tsc --noEmit

Package updates

@crossmint/client-sdk-base: minor (new props, discriminated union callback — breaking-ish but pre-1.0 style additive shape)
@crossmint/client-sdk-react-ui: minor (new CrossmintNewCard export)

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

🤖 Generated with Claude Code

…d wrapper Makes jwt optional, adds mode and allowedPaymentMethodTypes props, and introduces CrossmintNewCard as a tokenize-only wrapper. onPaymentMethodSelected now emits a discriminated union distinguishing saved-method selection from card tokenization. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

changeset-bot · 2026-04-21T16:39:03Z

🦋 Changeset detected

Latest commit: d8e10ce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@crossmint/client-sdk-base	Minor
@crossmint/client-sdk-react-ui	Minor
@crossmint/client-sdk-nextjs-starter	Patch
@crossmint/client-sdk-auth	Patch
@crossmint/client-sdk-react-base	Patch
@crossmint/client-sdk-react-native-ui	Patch
@crossmint/client-sdk-verifiable-credentials	Patch
@crossmint/client-sdk-smart-wallet	Patch
@crossmint/common-sdk-auth	Patch
@crossmint/auth-ssr-nextjs-demo	Patch
@crossmint/wallets-quickstart-devkit	Patch
@crossmint/wallets-playground-react	Patch
@crossmint/wallets-playground-expo	Patch
@crossmint/server-sdk	Patch
@crossmint/wallets-sdk	Patch
crossmint-auth-node	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

greptile-apps · 2026-04-21T16:42:29Z

Prompt To Fix All With AI

This is a comment left during a code review.
Path: packages/client/base/src/types/payment-method-management/events/incoming.ts
Line: 15-23

Comment:
**Zod schema inferred type won't satisfy `CrossmintCardPaymentMethod`**

`cardPaymentMethodSelectedSchema` only declares `type` and `paymentMethodId` inside `paymentMethod`, relying on `.passthrough()` to preserve the remaining runtime fields. However, `.passthrough()` does not add the undeclared fields to Zod's inferred TypeScript output type — it only prevents them from being stripped at runtime. The inferred type for `paymentMethod` is therefore `{ type: "card"; paymentMethodId: string }`, which is missing the required `card: { source, brand, last4, expiration }` field of `CrossmintCardPaymentMethod`.

This causes a structural type mismatch: when the validated event data is passed to `props.onPaymentMethodSelected?.(data)` in `CrossmintPaymentMethodManagementIFrame.tsx`, TypeScript sees the Zod-inferred union rather than `CrossmintPaymentMethod`, and they are not mutually assignable. This will surface as a compile error on the unchanged IFrame component.

To fix, either extend the schema to include all required `CrossmintCardPaymentMethod` fields, or cast the validated data to `CrossmintPaymentMethod` at the call-site in the IFrame component.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "feat: PaymentMethodManagement mode/allow..." | Re-trigger Greptile}

greptile-apps · 2026-04-21T16:42:33Z

+const cardPaymentMethodSelectedSchema = z.object({
+    type: z.literal("card"),
+    paymentMethod: z
+        .object({
+            type: z.literal("card"),
+            paymentMethodId: z.string(),
+        })
+        .passthrough(),
+});


Zod schema inferred type won't satisfy CrossmintCardPaymentMethod

cardPaymentMethodSelectedSchema only declares type and paymentMethodId inside paymentMethod, relying on .passthrough() to preserve the remaining runtime fields. However, .passthrough() does not add the undeclared fields to Zod's inferred TypeScript output type — it only prevents them from being stripped at runtime. The inferred type for paymentMethod is therefore { type: "card"; paymentMethodId: string }, which is missing the required card: { source, brand, last4, expiration } field of CrossmintCardPaymentMethod.

This causes a structural type mismatch: when the validated event data is passed to props.onPaymentMethodSelected?.(data) in CrossmintPaymentMethodManagementIFrame.tsx, TypeScript sees the Zod-inferred union rather than CrossmintPaymentMethod, and they are not mutually assignable. This will surface as a compile error on the unchanged IFrame component.

To fix, either extend the schema to include all required CrossmintCardPaymentMethod fields, or cast the validated data to CrossmintPaymentMethod at the call-site in the IFrame component.

Prompt To Fix With AI

This is a comment left during a code review. Path: packages/client/base/src/types/payment-method-management/events/incoming.ts Line: 15-23 Comment: **Zod schema inferred type won't satisfy `CrossmintCardPaymentMethod`** `cardPaymentMethodSelectedSchema` only declares `type` and `paymentMethodId` inside `paymentMethod`, relying on `.passthrough()` to preserve the remaining runtime fields. However, `.passthrough()` does not add the undeclared fields to Zod's inferred TypeScript output type — it only prevents them from being stripped at runtime. The inferred type for `paymentMethod` is therefore `{ type: "card"; paymentMethodId: string }`, which is missing the required `card: { source, brand, last4, expiration }` field of `CrossmintCardPaymentMethod`. This causes a structural type mismatch: when the validated event data is passed to `props.onPaymentMethodSelected?.(data)` in `CrossmintPaymentMethodManagementIFrame.tsx`, TypeScript sees the Zod-inferred union rather than `CrossmintPaymentMethod`, and they are not mutually assignable. This will surface as a compile error on the unchanged IFrame component. To fix, either extend the schema to include all required `CrossmintCardPaymentMethod` fields, or cast the validated data to `CrossmintPaymentMethod` at the call-site in the IFrame component. How can I resolve this? If you propose a fix, please make it concise.

- Adds apps/payments/nextjs/app/new-card exercising CrossmintNewCard - Tightens payment-method:selected schema to validate the full card shape, so the TS callback type matches CrossmintPaymentMethod Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

greptile-apps · 2026-04-21T17:10:56Z

Prompt To Fix All With AI

This is a comment left during a code review.
Path: .changeset/pmm-mode-and-new-card.md
Line: 1-10

Comment:
**Removed public export not mentioned in changeset**

`PaymentMethodManagementAppearance` was a named export from `@crossmint/client-sdk-base` (via `CrossmintPaymentMethodManagementProps.ts` → `types/payment-method-management/index.ts`) and has been deleted entirely in this PR. The changeset describes the appearance prop as widened to `EmbeddedCheckoutV3Appearance`, but any consumer who imported `PaymentMethodManagementAppearance` as a type will get a compile error on upgrade. Consider adding a line to the changeset noting the removal, e.g. "The `PaymentMethodManagementAppearance` type has been removed — use `EmbeddedCheckoutV3Appearance` directly."

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (2): Last reviewed commit: "demo: add /new-card page and tighten inc..." | Re-trigger Greptile}

When jwt is provided the card is both tokenized and saved as a UserPaymentMethod (onPaymentMethodAdded fires); without a jwt only the BT token is emitted (onCardTokenized fires). Either or both callbacks can be wired independently. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

greptile-apps · 2026-04-21T17:15:41Z

_{Reviews (3): Last reviewed commit: "feat: CrossmintNewCard accepts optional ..." | Re-trigger Greptile}

mPaella · 2026-04-23T15:22:11Z

-    appearance?: PaymentMethodManagementAppearance;
+    jwt?: string;
+    mode?: PaymentMethodManagementMode;
+    allowedPaymentMethodTypes?: PaymentMethodManagementAllowedType[];


can u make this an object instead
i think its like:

allowedPaymentMethodTypes?: Partial<Record<PaymentMethodManagementAllowedType, boolean>>

mPaella · 2026-04-23T15:22:38Z

 export interface CrossmintPaymentMethodManagementProps {
-    jwt: string;
-    appearance?: PaymentMethodManagementAppearance;
+    jwt?: string;


for now lets just keep jwt as required, we will tackl non-authenticated cases later

mPaella · 2026-04-23T15:23:00Z

+export type CrossmintCardToken = {
+    id: string;
+    billing?: {
+        name?: string;
+    };
 };
+
+export type CrossmintPaymentMethod =
+    | { type: "card"; paymentMethod: CrossmintCardPaymentMethod }
+    | { type: "card-token"; cardToken: CrossmintCardToken };


since jwt required, remove card-token case

mPaella · 2026-04-23T15:23:07Z

+export interface CrossmintNewCardProps {
+    jwt?: string;
+    appearance?: EmbeddedCheckoutV3Appearance;
+    onCardTokenized?: (cardToken: CrossmintCardToken) => void | Promise<void>;


same, remove

mPaella · 2026-04-23T15:23:12Z

+import { CrossmintPaymentMethodManagement } from "./CrossmintPaymentMethodManagement";
+
+export interface CrossmintNewCardProps {
+    jwt?: string;


make required

mPaella · 2026-04-23T15:23:28Z

+    jwt?: string;
+    appearance?: EmbeddedCheckoutV3Appearance;
+    onCardTokenized?: (cardToken: CrossmintCardToken) => void | Promise<void>;
+    onPaymentMethodAdded?: (paymentMethod: CrossmintCardPaymentMethod) => void | Promise<void>;


onCardAdded

mPaella · 2026-04-23T15:23:41Z

+                if (result.type === "card-token") {
+                    return props.onCardTokenized?.(result.cardToken);
+                }


greptile-apps Bot reviewed Apr 21, 2026

View reviewed changes

mPaella reviewed Apr 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: PMM mode/allowedPaymentMethodTypes + NewCard wrapper#1807

feat: PMM mode/allowedPaymentMethodTypes + NewCard wrapper#1807
VeniaminC wants to merge 3 commits into
mainfrom
feat/pmm-mode-and-new-card

VeniaminC commented Apr 21, 2026

Uh oh!

changeset-bot Bot commented Apr 21, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented Apr 21, 2026

Uh oh!

greptile-apps Bot Apr 21, 2026

Uh oh!

greptile-apps Bot commented Apr 21, 2026

Uh oh!

greptile-apps Bot commented Apr 21, 2026

Uh oh!

mPaella Apr 23, 2026

Uh oh!

mPaella Apr 23, 2026

Uh oh!

mPaella Apr 23, 2026

Uh oh!

mPaella Apr 23, 2026

Uh oh!

mPaella Apr 23, 2026

Uh oh!

mPaella Apr 23, 2026

Uh oh!

mPaella Apr 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

VeniaminC commented Apr 21, 2026

Description

Test plan

Package updates

Uh oh!

changeset-bot Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

greptile-apps Bot commented Apr 21, 2026

Uh oh!

greptile-apps Bot Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot commented Apr 21, 2026

Uh oh!

greptile-apps Bot commented Apr 21, 2026

Uh oh!

mPaella Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

mPaella Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

mPaella Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

mPaella Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

mPaella Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

mPaella Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

mPaella Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Apr 21, 2026 •

edited

Loading