Embedded, Popup or Redirect: Choosing Your WooCommerce Checkout Mode

Most WooCommerce payment gateways give you one payment experience and expect you to live with it. This one gives you three, so the useful question becomes which one should you actually run. Here is what each does, what it costs you, and how to pick without guessing.

Mode 1: Embed on Checkout (the default)

The card form lives on your checkout page. Fields appear inside the payment method box, where a customer expects to find them. They type their card, press Place Order, done. One button, no modal, no redirect.

Choose this if: you want the highest-trust experience and your checkout is reasonably conventional. Which is most stores.

What you get:

• WooCommerce's own Place Order button takes the payment, so there is one button
• The customer never leaves the page or sees another domain
• Card details stay inside Whop's secure iframe, so nothing touches your server
• The billing address they already typed gets reused, so duplicate fields disappear
• A progress indicator narrates the payment so nobody thinks it froze

What it costs you: it is the most sensitive to unusual checkout markup, because it renders inside your theme's payment area. Test it in your theme. Background in WooCommerce checkout without redirecting.

Mode 2: Embedded Checkout Popup

Place Order opens the Whop form in a modal on your page. Nobody navigates away, but payment is visually separated from the rest of the checkout.

Choose this if: your checkout page is busy with upsells, trust badges and order bumps, and you want full attention on paying. Also a decent middle ground if embedded mode fights your theme but you do not want to give up staying on-site.

What you get: your checkout stays loaded behind the modal, plus an optional custom payment button with your own label, background colour, text colour and alignment.

What it costs you: two visual steps instead of one, and modals can be awkward in some mobile browsers. Test on a real phone, not a narrow desktop window.

Mode 3: Direct Redirect

Sends the tab to Whop's hosted checkout. The dependable fallback for unusual themes and heavily customised checkouts.

Choose this if: a page builder owns your checkout, another plugin rearranges the payment area, or you are isolating a conflict and want the iframe out of the equation. This used to be the recommended mode back when browsers were more hostile to third-party payment frames, which we covered in fixing sandbox clickjacking and iframe blocks.

What you get: maximum compatibility, no iframe requirements, and exactly the same webhook confirmation and order sync as the other two.

What it costs you: your customer sees another domain, and your brand leaves the address bar at the moment they are handing over card details. That is a real conversion cost, and it is why this is no longer the default.

A decision table

How to choose properly, in one afternoon

1. Turn on sandbox mode.
2. Place an order in embedded mode on desktop and on a real phone. Look for layout breakage in your theme's payment area.
3. If something looks wrong, try popup mode before reaching for redirect.
4. Whichever mode you land on, submit once with a deliberately invalid billing field and confirm validation fires before any charge.
5. Confirm the order reaches a paid status by itself via webhook. This is identical in all three modes.

Changing your mind later is one dropdown, and it does not affect your credentials, your webhook or any existing orders.

What does not change between modes

Worth saying plainly, because it takes most of the risk out of the decision. All three use the same cart-total pricing with no plan IDs, the same 47 native currencies, the same 28 payment-form languages, the same server-side payment verification and the same signed webhook confirmation. You are choosing a customer experience, not a feature set.