Add Card Form

Stripe Elements card capture for saving a payment method against a SetupIntent. The host app mints the SetupIntent through payments-api; this component only collects and confirms the card.

Basic

Demo disabled. Set NEXT_PUBLIC_DEMO_STRIPE_PUBLISHABLE_KEY (a test-mode pk_test_... key) and NEXT_PUBLIC_DEMO_STRIPE_CLIENT_SECRET (the client secret of a test-mode SetupIntent) to render the live form.

<AddCardForm
  publishableKey={publishableKey}
  clientSecret={clientSecret}
  onSaved={({ setupIntentId, paymentMethodId }) => recordStripePaymentMethod(...)}
  onError={(message) => toast.error(message)}
/>

Importing without Next.js

The component imports nothing from Next.js. React-only hosts can import it from the dedicated subpath instead of the full barrel: import { AddCardForm } from '@tra/ui/add-card'. Stripe.js is fetched only when the form first mounts (never on import) and once per publishable key. The Elements appearance is derived from the Summit color tokens and follows the .dark class on <html>, re-theming when it flips; the OS color-scheme preference is ignored.