This page documents
@whop/elements@1.0.0-beta.0 and @whop/elements-react@1.0.0-beta.0.Payments resource without mounting an element: whop.payments.paymentRequest.create({ … }) in vanilla or useWhop().payments.paymentRequest.create({ … }) in React.
Options
Pass these towhop.payments.paymentRequest.create({ … }).
string
required
Account ID, prefixed
biz_, that scopes every client-side call.string
required
Three-letter ISO 4217 payment currency code.
number
required
Payment amount in minor units.
"off_session" | "on_session"
Set only after displaying save consent. Marks the token for
off_session or on_session use.boolean
Ask the sheet for the payer’s email — the confirmation token requires one. Defaults to
true.boolean
Ask the sheet for a shipping address (and offer
shippingOptions when given). Defaults to false.string
Account ISO 3166-1 alpha-2 country code for the Apple Pay sheet. Omit it to use the account’s published registration country. The sheet defaults to
US when neither is available.PaymentRequestLineItem[]
Line items the sheet lists under the total.
PaymentRequestShippingOption[]
Shipping options the sheet offers when
requestShipping is set. Display-only — update amount from your change handler.Methods
Call these on the resource.canMakePayment
Returns availability for each wallet when the account offers it and the device supports it. Google Pay also requires origin approval. This primes show(). Always await it first.
Signature: () => Promise<WalletAvailability>
show
Open the selected wallet sheet after awaiting canMakePayment(). Apple requires session creation within the gesture stack. If requestPayerEmail is false, pass email from your form. Otherwise, the sheet refuses to open because confirmation tokens require an email. Call synchronously during user activation. Await prerequisites first because browsers revoke activation across asynchronous steps.
Signature: (type: "apple_pay" | "google_pay", provided?: { email?: string | undefined; } | undefined) => Promise<PaymentRequestResult>
Events
Subscribe to events below. Each method returns an unsubscribe function.onShippingAddressChange
The sheet’s shipping address changed (redacted pre-authorization: city/state/postal/country only). Call updateWith(…) exactly once per event or the flow waits until the vendor times out. Returns the unsubscribe function.
Signature: (handler: (ev: ShippingAddressChangeEvent) => void) => () => void
onShippingOptionChange
The buyer picked a shipping option. Amount-only contract: updateWith carries amount/lineItems/shippingOptions/errors. Call updateWith(…) exactly once per event or the flow waits until the vendor times out. Returns the unsubscribe function.
Signature: (handler: (ev: ShippingOptionChangeEvent) => void) => () => void
onBillingAddressChange
Fires at sheet open and on card switches with the selected card’s redacted billing address (city/state/postal/country only) — reprice the total for the address the charge taxes off. Answer updateWith({ amount }) in minor units, or updateWith({}) to keep the current total. Every event is answered exactly once: a slow, thrown, or superseded handler answers keep-current. Call updateWith(…) exactly once per event or the flow waits until the vendor times out. Returns the unsubscribe function.
Signature: (handler: (ev: BillingAddressChangeEvent) => void) => () => void
onConfirmationToken
The sheet created a confirmation token. This is the same result that show() returns. Returns the unsubscribe function.
Signature: (handler: (ev: PaymentRequestResult) => void) => () => void
onCancel
The buyer dismissed the sheet. Returns the unsubscribe function.
Signature: (handler: () => void) => () => void