# Whop Elements: what they are and how to use them on WooCommerce

> Whop Elements are Whop's embeddable UI components: Checkout, Payment, Express Checkout and more. Which one fits a store, and how WooCommerce uses them.

Updated: 2026-11-11 · Canonical: https://whopforwoo.com/whop-elements

**Whop Elements are Whop's embeddable UI components: drop-in pieces of Whop (checkout, payment fields, wallets, payouts, KYC, chat) that run on your own page.** For a store, two families matter: the Checkout element, which embeds Whop's full checkout, and the payment elements, which only collect a payment method so your server can charge it. WhopForWoo uses the Checkout element inside the WooCommerce checkout.

## The Whop Elements a store can use

| Element | What it does | Server code needed to charge |
|---|---|---|
| **CheckoutElement** | Whop's whole checkout in one component: email, payment method, pay button | No (fulfil from the webhook) |
| **PaymentElement** (+ EmailElement, AddressElement) | Collects the payment method in PCI-isolated fields and returns a `ctok_` confirmation token | Yes: Payments API call with the token |
| **ExpressCheckoutElement** | One-press Apple Pay and Google Pay buttons, for a product page | No (fulfil from the webhook) |
| Card fields (number, expiry, CVC) | Separate card inputs for a fully custom layout | Yes |

Whop's catalogue also includes elements for KYC and verification, balances and withdrawals, reports, ads and chat. Those are for building on top of Whop, not for taking a payment.

## Checkout element vs payment elements

**Checkout element.** You mount it with a plan; it opens the session, prices the order, offers the methods allowed for that buyer, and completes the payment. You pass `metadata` (your order ID) and a `returnUrl`. Fulfilment comes from the `payment.succeeded` webhook.

**Payment elements.** You build the form layout. On submit, `createConfirmationToken` turns what the elements collected into a single-use token. Your server sends it to the Payments API with the variant or an inline amount, gets back a `client_secret`, and the browser calls `handleNextAction` for 3D Secure or a bank redirect if needed. More control, more code.

For a WooCommerce store, the Checkout element is the shorter path: WooCommerce already owns the layout around it, and Whop handles the payment step end to end.

## How WhopForWoo uses Whop Elements

1. Loads the Whop Elements script from `cdn.whop.com` on the checkout and order-pay pages.
2. Creates a checkout configuration for the WooCommerce order (exact total, order ID and site in metadata).
3. Mounts the Checkout element in the payment box with your appearance settings (theme, button colour, background colour, corner radius, language) and hides Whop's summary header.
4. Enables Apple Pay and Google Pay on the configuration.
5. Confirms the payment server-side, from Whop's API and the signed webhook, before the order is marked paid.

![Whop Checkout element mounted inside the WooCommerce payment box](https://whopforwoo.com/img/whop-elements-checkout-element-woo.png)

The element's locales supported by the plugin: English, Spanish, Chinese, Dutch, Portuguese, German, Hungarian, Italian, French, Japanese, Polish, Turkish.

## Using Whop Elements without WooCommerce

Any site that can load a script can mount the Checkout element. Whop documents React (`@whop/elements-react`) and plain JavaScript. You still need an `https` return page and a server that verifies the webhook signature before granting access or shipping anything. Whop's own guide warns that the return URL alone proves nothing, since anyone can type `status=succeeded`.

If your products live in WooCommerce, the [embedded checkout](https://whopforwoo.com/whop-embedded-checkout) page shows what the plugin takes care of.

Get WhopForWoo: https://whopforwoo.com/pricing

## FAQ

### What are Whop Elements?

Whop's library of embeddable UI components, loaded by script or through the @whop/elements packages. They cover checkout and payments, but also payouts, KYC, reporting and chat.

### What is the difference between the Checkout element and payment elements?

The Checkout element is Whop's whole checkout in one component and needs no server code to charge. Payment elements only collect the payment method and return a confirmation token that your server charges through the Payments API.

### Do Whop Elements support Apple Pay and Google Pay?

Yes. The Express Checkout element shows one-press Apple Pay and Google Pay buttons, and wallets can also be offered inside the checkout form.

### Which Whop Element does WhopForWoo use?

The Checkout element, mounted in the WooCommerce payment box with a checkout configuration created for each order.

## Related

- [Whop embedded checkout: keep customers on your WooCommerce checkout](https://whopforwoo.com/whop-embedded-checkout): How to embed Whop checkout on a website: the Checkout element, what you must build around it, and how WhopForWoo does it inside WooCommerce.
- [Whop custom checkout: make Whop's form look like your store](https://whopforwoo.com/whop-custom-checkout): Customise the Whop checkout page: Whop's branding settings, plus theme, colours, radius, language and hidden header of the embedded form on WooCommerce.
- [Whop payment integration: connect Whop checkout to WooCommerce](https://whopforwoo.com/whop-payment-integration): How a Whop payment integration works end to end: API key, checkout configuration, Whop Elements, signed webhooks and server-side checks, on WooCommerce.
- [Whop WooCommerce plugin: Whop checkout inside your store](https://whopforwoo.com/): Connect Whop to WooCommerce. Whop's payment form sits inside your checkout, every payment is verified server-side, and orders exist before anyone pays.