Mounts inside
Payments. Pass props and callbacks through the create options or React props. Keep the created handle, or React ref, to call select().Exclusive.
PaymentElement is an alternative to CardElement or CardFields in this Payments handle. Mount one at a time. Destroy it before mounting another.Example data. Open the Playground.
Props
string[]
Controls display order in either layout. Listed types appear first in order. Unlisted types retain their relative order. Does not affect availability. Defaults to
[].{ billingDetails?: "full" | "minimal" | "never" | undefined; }
Controls billing-details collection.
billingDetails: 'minimal' (default) follows each method’s matrix. Methods collect name and the complete country format by default. An override may collect only the declared minimum or nothing. For cards, the minimum is name on card, country, and postal code. 'full' requires name and the complete country format for every fresh method. 'never' hides the block. Pass the address to createConfirmationToken instead. The country selector includes only countries supported by the method and payment currency. With an installment plan selected, it narrows to the countries the plan serves — the billing country is the transaction country the charge processes under. It locks when only one is available. Defaults to {"billingDetails":"minimal"}."accordion" | "horizontal"
Picker layout.
accordion (default) stacks methods and expands details inline. horizontal shows equal-width, non-scrolling tiles with selected details below. After four methods, a More tile opens a native selector. The method picked there occupies the final tile until the next selection. Selection and confirmation behave identically. Defaults to "accordion".boolean
accordion only. Adds spacing and separate card styling between methods. Ignored when layout is horizontal. Defaults to false.boolean
Whether to select the first offered method after resolution. The default
true respects order and emits selected and change like a buyer interaction. It runs once before buyer interaction and does nothing when no method is offered. Set false to mount unselected. Independently, if an update removes the selected method, selection falls back to the first offered method. An already unselected element stays unselected. Defaults to true.Events
Pass callbacks in the create options or React props.onChange
Fires when selection changes. complete: true means the buyer selected a method and completed its card fields or required inputs. Use it to enable confirmation. method provides category, per-currency countries, and amount bounds for dependent UI such as country fields. supportsBuyerFee indicates whether to include Whop’s buyer service fee in the displayed total.Signature: ((payload: { complete: boolean; type?: string | undefined; supportsBuyerFee?: boolean | undefined; method?: { type: string; category: string; template: string; display_name: string; countries: ({ country: string; min_amount: number | null; max_amount: number | null; })[]; min_amount: number | null; max_amount: number | null; } | undefined; }) => void)onAddressChange
Fires about 300 ms after the internal billing address changes. Use it for tax, shipping, or other address-dependent updates. country is an ISO 3166-1 alpha-2 code. The payload omits other address keys when empty or unused for that country. complete: true means the billing block is valid and complete. This event fires only while the payment element owns address collection. With fields.billingDetails: 'never', use your address source. With a mounted AddressElement, use its change event.Signature: ((payload: { complete: boolean; address: { line1?: string | undefined; line2?: string | undefined; city?: string | undefined; state?: string | undefined; postal_code?: string | undefined; country: string; }; }) => void)onLoaderStart
Runs after the loading skeleton first paints and before onReady.Signature: (() => void)onReady
Runs after the element’s first complete paint.Signature: (() => void)onError
Runs when the element fails to load or crashes. The fallback remains visible. Use code for programmatic handling. sourceKey identifies a failed host-state source.Signature: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)Methods
Call these on the handle returned bycreate, or through a React ref.select
Select a method through the same path as a buyer interaction. For example, select('cashapp') expands the tile and emits selected and change. Cards remain complete: false until their fields are complete. Unknown, unavailable, or amount-gated methods reject with code METHOD_NOT_OFFERED. select(null) clears selection and emits change with complete: false. Use with autoSelect={false} for full external control.Signature: (input: string | null) => Promise<void>mount
Mounts the element in target and starts loading. React components mount themselves.Signature: (target: string | HTMLElement) => voiddestroy
Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.Signature: () => voidupdate
Merges new props into the mounted element. In React, change the component props instead.Signature: (options: Partial<PaymentElementProps>) => voidStyling
Style these parts throughappearance.classes. Use camel case or kebab case for property names and include units. Page stylesheets can’t reach the element’s frame. The framework validates each declaration before injecting it.appearance to <Payments>. Set it globally with WhopElements({ appearance }).