> ## Documentation Index > Fetch the complete documentation index at: https://docs.whop.com/llms.txt > Use this file to discover all available pages before exploring further. # CheckoutElement > The full checkout surface — order summary with the live quote, promo code entry, the currency the buyer pays in, everything this checkout has to collect from the buyer, the composed payment methods surface, and the pay flow. What it collects is whatever the seller set up (email, their own questions, a phone number, an explicit agreement to their terms), rendered together on one screen in the order they chose — so a seller who starts asking for something new needs no change here. Renders the whole purchase; the checkout controller owns the session and the credential. After a payment that needs an off-site step, this same surface renders the outcome the server reports when the buyer comes back. **Upcoming.** These docs cover unreleased development, ahead of any published release. Use the channel picker at the top of the sidebar for the docs of a published release. *In development, not yet part of a stable release.* Belongs to the [`Checkout`](/elements/upcoming/checkout/overview) group. Render `` inside it (React), or call `checkout.create('checkout', { … })` on the handle (vanilla). Consumer props and `on` callbacks both go in the create options / JSX props. ## Preview A live, interactive demo of this element with sample data:
## Usage
```tsx React theme={null} import { WhopElements, Checkout, CheckoutElement } from "@whop/elements-react"; import { loadWhop } from "@whop/elements"; function Example() { return ( ); } ``` ```html Vanilla theme={null} ```
## Props *This element takes no consumer props.* ## Events Pass a callback in the create options (or React prop) to receive these. ### `onLoaderStart` Fired the moment the element's own loading skeleton has painted inside its frame. This is the earliest point a consumer-managed loading state can hand off without ever exposing a blank. Always precedes `onReady`; most consumers only need `onReady`. **Signature:** `(() => void)` ### `onReady` Fired once the element has booted and painted its first complete frame. **Signature:** `(() => void)` ### `onError` Fired when the element fails to load or crashes; the element shows its own error fallback. `message` is human-readable; framework refusals also carry `code` (e.g. `HOST_SOURCE_FAILED`, with `sourceKey` naming the failed hostState key) so hosts can switch on codes, never message text. **Signature:** `((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)` ## Methods Call these on the element handle, which is the return of `create` (vanilla) or the component `ref` (React). ### `mount` Place the element on the page: appends its container to `target` (a CSS selector or an element) and starts loading. Nothing renders until this is called. React consumers never call it; the component mounts itself. **Signature:** `(target: string | HTMLElement) => void` ### `destroy` Remove the element from the page and release its frame and subscriptions. Safe to call more than once. React consumers never call it; unmounting the component does it. **Signature:** `() => void` ### `update` Change this element's consumer props after mount, and it re-renders with the merged props. React consumers never call it; updating the JSX props does the same. **Signature:** `(options: Partial) => void` ## Styling Each part below is a stable class name, safe to depend on. Restyle a part by mapping its class to a **style declaration object** under `appearance.classes` (properties camelCase or kebab-case, values as strings with units, the same shape as React's `style` prop). The element renders in its own frame, so page stylesheets can't reach it: these declarations are sanitized against a safe-property allowlist and injected inside the frame for you. | Class | Targets | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `.whop-Address` | The address form root | | `.whop-AddressErrorSummary` | The summary line shown when validation reveals missing or invalid fields | | `.whop-AddressField` | One field cell in the address form | | `.whop-AddressFieldError` | The error line under an address field (full layout) | | `.whop-AddressFieldInput` | A text input in the address form | | `.whop-AddressFieldInputInvalid` | Added to an address input while it fails validation | | `.whop-AddressFieldInvalid` | Added to a compact field cell while it fails validation | | `.whop-AddressFieldLabel` | The label above an address field (full layout) | | `.whop-AddressFieldSelect` | A select (country, state, organization type) in the address form | | `.whop-AddressLine2Toggle` | The "Add address line 2" text button shown while line 2 is collapsed | | `.whop-AddressManualEntry` | The "Enter address manually" text button below the collapsed form — expands the full country format | | `.whop-AddressSuggestion` | One suggestion row in the autocomplete overlay | | `.whop-AddressSuggestionActive` | Added to the keyboard/pointer-active suggestion row | | `.whop-AddressSuggestionManual` | The "Enter address manually" row closing the suggestions list | | `.whop-AddressSuggestions` | The autocomplete suggestions overlay anchored to the address line 1 field | | `.whop-AddressSuggestionsEmpty` | The quiet line shown when the query settled with no address matches | | `.whop-Card` | The card element root | | `.whop-CardError` | The error pane shown when the card configuration cannot load | | `.whop-CardField` | One card field cell — number, expiry, or CVC | | `.whop-CardFieldError` | The Invalid / Incomplete message under a card field | | `.whop-CardFieldGroup` | The grouped card fields — number on top, expiry and CVC below | | `.whop-CardFieldInput` | The bordered input container around a PCI field | | `.whop-CardFieldInputFocused` | Added to the input container while its field is focused | | `.whop-CardFieldInputInvalid` | Added to the input container while its field is invalid or incomplete | | `.whop-CardFieldRow` | The compact single-row card field group — number flexing, expiry and CVC fixed-width to the right | | `.whop-CardLabel` | The "Card information" label above the field group | | `.whop-CardSaveNotice` | The save-for-future-purchases consent line | | `.whop-Checkout` | The checkout element root | | `.whop-CheckoutBreakdown` | The itemized rows under the total — discounts, tax, and anything else that changes the price | | `.whop-CheckoutBreakdownPending` | The placeholder shown for a row whose figure is still being calculated | | `.whop-CheckoutBreakdownRow` | One itemized row under the total | | `.whop-CheckoutCollection` | The collection column — email, payment methods, and the pay flow | | `.whop-CheckoutCompleted` | The success face shown once the checkout completed | | `.whop-CheckoutCurrencyNote` | The conversion disclosure — what the charge converted from, and at what rate | | `.whop-CheckoutCurrencyRow` | The pay-in-currency row — the conversion disclosure, the switch affordance, and its refusal line | | `.whop-CheckoutCurrencyToggle` | The "pay in another currency" affordance | | `.whop-CheckoutDetails` | The order-details column — summary, currency, promo. Sits beside the collection column in wide containers, above it in narrow ones | | `.whop-CheckoutDetailsToggle` | The narrow-container affordance that opens the order-details sheet | | `.whop-CheckoutDueToday` | The "due today" qualifier on the total, shown when something is charged today and later charges follow | | `.whop-CheckoutError` | The retryable error line under the payment surface | | `.whop-CheckoutExpired` | The face shown when the session expired before completing | | `.whop-CheckoutFieldError` | Every inline field-level error line (email, promo, currency) | | `.whop-CheckoutLayout` | The two-column/stacked layout row — order details and collection side by side in wide containers, stacked in narrow ones | | `.whop-CheckoutNextActionNotice` | The line explaining a step the server requires before this checkout can be paid | | `.whop-CheckoutPayButton` | The pay button | | `.whop-CheckoutPolicyLink` | Each link to a seller-published policy document in the terms disclosure | | `.whop-CheckoutPrice` | The price block — centered under the seller line in a narrow container, left-aligned beside the collection column | | `.whop-CheckoutPromoActions` | The apply/remove button pair | | `.whop-CheckoutPromoApplied` | The applied-promo confirmation line | | `.whop-CheckoutPromoApply` | The apply-promo button | | `.whop-CheckoutPromoInput` | The promo code input | | `.whop-CheckoutPromoRemove` | The remove-promo button | | `.whop-CheckoutPromoRow` | The promo code affordance — a pill that grows into the input | | `.whop-CheckoutQuantity` | The quantity line, shown above 1 | | `.whop-CheckoutRequirementInput` | A collected value’s input | | `.whop-CheckoutRequirementLabel` | A collected value’s label | | `.whop-CheckoutRequirementRequired` | The marker beside a value an answer is required for | | `.whop-CheckoutRequirementRow` | One collected value — its label, its input, and its inline error | | `.whop-CheckoutRequirements` | The requirements form — every value this checkout collects, rendered as one block in the order the server declared | | `.whop-CheckoutSchedule` | The billing-terms block under the total — trial length, renewal price and period, installment count, initial fee, and access window | | `.whop-CheckoutScheduleLine` | Each line of the billing-terms block | | `.whop-CheckoutSecurity` | The secured-by-Whop footer shown in the checkout-branding preview | | `.whop-CheckoutSeller` | The seller title line | | `.whop-CheckoutSummary` | The order summary block — seller, items, and the live total | | `.whop-CheckoutSummaryHead` | The seller line, with the order-details trigger opposite it in a narrow container | | `.whop-CheckoutTerms` | The terms disclosure under the pay button — the seller policies and the Whop buyer terms | | `.whop-CheckoutTermsAccept` | The explicit terms-acceptance row, rendered only when the session requires an explicit act of acceptance | | `.whop-CheckoutTermsCheckbox` | The terms-acceptance checkbox | | `.whop-CheckoutTotal` | The quoted total the buyer pays | | `.whop-CheckoutTotalOriginal` | The pre-promo total, struck through beside the discounted one | | `.whop-CheckoutUncollectable` | The line shown when the checkout requires something this surface cannot collect | | `.whop-CompletePayment` | The completion surface root | | `.whop-CompletePaymentError` | The error pane | | `.whop-CompletePaymentFrame` | The framed PSP step | | `.whop-CompletePaymentHint` | The auto-update hint line | | `.whop-CompletePaymentInstructions` | The bank-transfer instruction rows | | `.whop-CompletePaymentSettled` | The resting-state pane shown as the dialog closes | | `.whop-CompletePaymentSpinner` | The waiting spinner | | `.whop-CompletePaymentTitle` | The dialog title | | `.whop-Email` | The email element root | | `.whop-EmailError` | The invalid-email message under the field | | `.whop-EmailInput` | The email input | | `.whop-EmailInputInvalid` | Added to the input while the value is not a plausible email | | `.whop-EmailLabel` | The label above the email field | | `.whop-EmailSignedIn` | The signed-in row under the locked field | | `.whop-EmailSignIn` | The Welcome back sign-in affordance shown for a recognized email | | `.whop-EmailSignInError` | The sign-in failure message under the affordance | | `.whop-EmailSignOut` | The control that returns the field to a different email | | `.whop-Payment` | The payment element root | | `.whop-PaymentBillingBlock` | The payment element's internal billing address block | | `.whop-PaymentCardFields` | The inline card fields panel | | `.whop-PaymentDetailIcon` | The template icon beside the detail region's explainer | | `.whop-PaymentDetailRegion` | The expanded detail region for a selected method — collection surfaces first (inline card fields, declared inputs), then the explainer and disclosure lines as the bottom block | | `.whop-PaymentDetailSubtext` | The consent subtext under the explainer on wallet methods | | `.whop-PaymentDetailText` | The detail region's explainer line | | `.whop-PaymentError` | The error pane shown when methods cannot load or none are available | | `.whop-PaymentFieldError` | The Invalid message under a declared input | | `.whop-PaymentFieldInput` | A declared method input in the detail region | | `.whop-PaymentFieldInputInvalid` | Added to a declared input while its value fails the declared format | | `.whop-PaymentFieldLabel` | The label above a declared method input in the detail region | | `.whop-PaymentMandateLink` | The mandate terms link inside the mandate notice | | `.whop-PaymentMandateNotice` | The mandate authorization notice on methods whose matrix config declares a mandate | | `.whop-PaymentMethod` | One payment method — the row plus its expanding detail region | | `.whop-PaymentMethodDetail` | The expanding region that reveals the selected method's detail — inline card fields, explainer, or declared inputs | | `.whop-PaymentMethodIcon` | The method icon on a row | | `.whop-PaymentMethodLabel` | The method display name on a row | | `.whop-PaymentMethodMoreSelect` | The invisible native select stretched over the More tile | | `.whop-PaymentMethodMoreTile` | The compact overflow tile ending the capped tile row — stacked overflow-method icons over a chevron, its native select lists the remaining methods | | `.whop-PaymentMethodPanel` | The selected method's detail panel below the tile row (horizontal layout) | | `.whop-PaymentMethodRadio` | The radio indicator on a method row | | `.whop-PaymentMethodRadioSelected` | Added to the radio indicator while its method is selected | | `.whop-PaymentMethodRow` | The clickable payment method row | | `.whop-PaymentMethodRowSelected` | Added to the method row while it is the selected method | | `.whop-PaymentMethods` | The payment method list | | `.whop-PaymentMethodSeparated` | Added to a method item while it renders as its own separated card | | `.whop-PaymentMethodsSeparated` | Added to the method list while separated accordion items are on | | `.whop-PaymentMethodTile` | One method tile in the horizontal tile row | | `.whop-PaymentMethodTileRow` | The method tile row (horizontal layout) — never scrolls; beyond the tile cap the overflow methods live in the compact More tile | | `.whop-PaymentMethodTileSelected` | Added to a method tile while it is the selected method | | `.whop-PaymentMoreRow` | The "N more payment methods" expander row | | `.whop-PaymentSavedMethod` | One saved payment method specifically — carries PaymentMethod too | | `.whop-PaymentSavedMethodHint` | The saved method's trailing detail — a card's expiry | | `.whop-PaymentSavedMethodRow` | The clickable saved method row specifically — carries PaymentMethodRow too | | `.whop-PaymentSavedMethodRowSelected` | The selected marker on a saved method row specifically | | `.whop-PaymentSavedMethods` | The saved-methods list specifically — carries PaymentMethods too, so one rule styles both lists | | `.whop-PaymentSavedMethodSeparated` | The separated marker on a saved method specifically | | `.whop-PaymentSavedMore` | The control that fetches the next page of saved payment methods | | `.whop-PaymentSavedMoreSpinner` | The spinner shown while the next page of saved payment methods loads | | `.whop-PaymentSaveNotice` | The save-for-future-purchases consent line closing the detail region | | `.whop-PaymentSettlementNotice` | The settlement-window hint on methods whose matrix config declares one | | `.whop-Verification` | The verification-code dialog body | | `.whop-VerificationDismiss` | The continue-as-guest control shown when sign-in cannot be completed here | | `.whop-VerificationError` | The failure message in the dialog | | `.whop-VerificationExpired` | The expired pane — shown when the sign-in attempt can no longer be verified | | `.whop-VerificationHeading` | The title and explainer block above the code row | | `.whop-VerificationHint` | The where-the-code-went explainer line | | `.whop-VerificationInput` | The one-time-code input | | `.whop-VerificationInputInvalid` | Added to the code input after a failed attempt | | `.whop-VerificationInputSlot` | One digit box of the one-time-code input | | `.whop-VerificationInputSlotActive` | Added to the code slot the buyer is typing into | | `.whop-VerificationPending` | The verifying… line while a submit is in flight | | `.whop-VerificationResend` | The resend-code control, counting down the resend window | | `.whop-VerificationRestart` | The start-over control on the expired pane | | `.whop-VerificationTitle` | The dialog's header wordmark | ```ts theme={null} const checkout = whop.checkout.create({ appearance: { classes: { 'whop-Address': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressErrorSummary': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressField': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressFieldError': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressFieldInput': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressFieldInputInvalid': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressFieldInvalid': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressFieldLabel': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressFieldSelect': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressLine2Toggle': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressManualEntry': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressSuggestion': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressSuggestionActive': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressSuggestionManual': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressSuggestions': { borderRadius: '8px', fontWeight: '600' }, 'whop-AddressSuggestionsEmpty': { borderRadius: '8px', fontWeight: '600' }, 'whop-Card': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardError': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardField': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardFieldError': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardFieldGroup': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardFieldInput': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardFieldInputFocused': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardFieldInputInvalid': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardFieldRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardLabel': { borderRadius: '8px', fontWeight: '600' }, 'whop-CardSaveNotice': { borderRadius: '8px', fontWeight: '600' }, 'whop-Checkout': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutBreakdown': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutBreakdownPending': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutBreakdownRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutCollection': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutCompleted': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutCurrencyNote': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutCurrencyRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutCurrencyToggle': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutDetails': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutDetailsToggle': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutDueToday': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutError': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutExpired': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutFieldError': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutLayout': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutNextActionNotice': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutPayButton': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutPolicyLink': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutPrice': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutPromoActions': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutPromoApplied': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutPromoApply': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutPromoInput': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutPromoRemove': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutPromoRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutQuantity': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutRequirementInput': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutRequirementLabel': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutRequirementRequired': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutRequirementRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutRequirements': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutSchedule': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutScheduleLine': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutSecurity': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutSeller': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutSummary': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutSummaryHead': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutTerms': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutTermsAccept': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutTermsCheckbox': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutTotal': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutTotalOriginal': { borderRadius: '8px', fontWeight: '600' }, 'whop-CheckoutUncollectable': { borderRadius: '8px', fontWeight: '600' }, 'whop-CompletePayment': { borderRadius: '8px', fontWeight: '600' }, 'whop-CompletePaymentError': { borderRadius: '8px', fontWeight: '600' }, 'whop-CompletePaymentFrame': { borderRadius: '8px', fontWeight: '600' }, 'whop-CompletePaymentHint': { borderRadius: '8px', fontWeight: '600' }, 'whop-CompletePaymentInstructions': { borderRadius: '8px', fontWeight: '600' }, 'whop-CompletePaymentSettled': { borderRadius: '8px', fontWeight: '600' }, 'whop-CompletePaymentSpinner': { borderRadius: '8px', fontWeight: '600' }, 'whop-CompletePaymentTitle': { borderRadius: '8px', fontWeight: '600' }, 'whop-Email': { borderRadius: '8px', fontWeight: '600' }, 'whop-EmailError': { borderRadius: '8px', fontWeight: '600' }, 'whop-EmailInput': { borderRadius: '8px', fontWeight: '600' }, 'whop-EmailInputInvalid': { borderRadius: '8px', fontWeight: '600' }, 'whop-EmailLabel': { borderRadius: '8px', fontWeight: '600' }, 'whop-EmailSignedIn': { borderRadius: '8px', fontWeight: '600' }, 'whop-EmailSignIn': { borderRadius: '8px', fontWeight: '600' }, 'whop-EmailSignInError': { borderRadius: '8px', fontWeight: '600' }, 'whop-EmailSignOut': { borderRadius: '8px', fontWeight: '600' }, 'whop-Payment': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentBillingBlock': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentCardFields': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentDetailIcon': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentDetailRegion': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentDetailSubtext': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentDetailText': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentError': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentFieldError': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentFieldInput': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentFieldInputInvalid': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentFieldLabel': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMandateLink': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMandateNotice': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethod': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodDetail': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodIcon': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodLabel': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodMoreSelect': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodMoreTile': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodPanel': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodRadio': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodRadioSelected': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodRowSelected': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethods': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodSeparated': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodsSeparated': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodTile': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodTileRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMethodTileSelected': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentMoreRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSavedMethod': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSavedMethodHint': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSavedMethodRow': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSavedMethodRowSelected': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSavedMethods': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSavedMethodSeparated': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSavedMore': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSavedMoreSpinner': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSaveNotice': { borderRadius: '8px', fontWeight: '600' }, 'whop-PaymentSettlementNotice': { borderRadius: '8px', fontWeight: '600' }, 'whop-Verification': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationDismiss': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationError': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationExpired': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationHeading': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationHint': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationInput': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationInputInvalid': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationInputSlot': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationInputSlotActive': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationPending': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationResend': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationRestart': { borderRadius: '8px', fontWeight: '600' }, 'whop-VerificationTitle': { borderRadius: '8px', fontWeight: '600' } } } }); // restyle live at any point, the same shape through update() checkout.update({ appearance: { classes: { 'whop-Address': { fontWeight: '700' } } } }); ``` In React, pass the same object as the `appearance` prop on ``; `appearance` also applies globally at `WhopElements({ appearance })`.