This page documents
@whop/elements@1.0.0-beta.0 and @whop/elements-react@1.0.0-beta.0.Payments. Create it to get a handle, then mount its elements on that handle. Call destroy() to remove the sub-controller and free its slot. Create it again to get a fresh handle.
Exclusive.
CardFields is an alternative to PaymentElement or CardElement in this Payments handle. Mount one at a time. Destroy it before mounting another.Preview
A live, interactive demo of this sub-controller’s default arrangement with example data:Options
Pass these topayments.create('cardFields', { … }), or as props on <CardFields> in React. Parent-injected props never appear here.
"compact" | "stacked"
stacked (default) shapes composed fields as a number row above expiration and security code. compact shapes one row. Separately mounted fields ignore this layout and render with full borders and rounded corners. Defaults to "stacked".string
Advanced Basis Theory publishable key. Omit it to fetch the key automatically.
CardNetworkArt[]
The seller’s accepted card networks in display order — the matrix card entry’s
networks objects, whose API-served icons drive the number field’s brand art. Omit it to fetch alongside the key.Events
Pass callbacks in the create options or React props.onChange
Fires when completeness changes. complete becomes true after the buyer fills all three fields. Use it to enable confirmation. brand is the detected card network.
Signature: ((payload: { complete: boolean; brand: string; }) => void)
onLoadingChange
Runs when the grouped loading state changes. The value is true while any mounted element is still loading.
Signature: ((loading: boolean) => void)
Methods
Call these on the sub handle frompayments.create('cardFields', { … }).
tokenize
Advanced method that tokenizes the three fields without creating a confirmation token. It emits tokenized to the payments controller. Validation errors appear on the failing field, and the method throws. Use payments.createConfirmationToken() to confirm a payment.
Signature: (input: { accountId?: string | undefined; }) => Promise<{ token: string; }>
collect
payments.createConfirmationToken() calls this action for cardFields. Don’t call it directly. It tokenizes the fields and returns the data used to create the confirmation token.
Signature: (input: { billingDetails?: { email?: string | undefined; name?: string | undefined; address?: { country?: string | undefined; line1?: string | undefined; city?: string | undefined; postal_code?: string | undefined; } | undefined; } | undefined; }) => Promise<{ paymentMethod: { type: string; category: string; card: { token: string; }; }; billingDetails: { email: string; name?: string | undefined; address?: { country?: string | undefined; line1?: string | undefined; city?: string | undefined; postal_code?: string | undefined; } | undefined; }; }>
update
Merges new props and callbacks into the sub-controller.
Signature: (options: Partial<CardFieldsSubOptions>) => void
destroy
Destroys the sub-controller and its elements, then frees its exclusive slot. A later create("cardFields") starts fresh.
Signature: () => void
Elements
The elements this sub-controller mounts. Each has its own page:CardNumberElement
PCI-isolated hosted card number field. Card numbers never reach the host page.
CardExpiryElement
PCI-isolated hosted card expiration field.
CardCvcElement
PCI-isolated hosted card security code field.