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

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

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.

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 page shows what the plugin takes care of.