1

Add the button, watch it decide

One line of code adds the button. Watch it pick the best way to pay for this browser.

<WhopExpressCheckoutButton
  planId="plan_wJDUgFCSe8uSz"
  returnUrl="https://nextjs-whop-express-checkout-demo.vercel.app/"
  onComplete={(planId, receiptId) => verify(receiptId)}
/>
Safari / iOS with Apple Pay→ Native Apple Pay button
Chrome / Android with Google Pay→ Native Google Pay button
Everything else (and all of sandbox)→ Whop Pay button + dialog
2

Buy through the popup

Click the button above and pay with 4242 4242 4242 4242 (any future expiry, any CVC). Checkout opens in a popup and you never leave this page.

3

Verify on the server

The demo already double-checked this payment with Whop before showing the receipt. Run that check again and read the raw answer.

On a live site Whop can also send this confirmation straight to your server.
4

Leave the page and come back

This copy of the button works the other way. After you pay, the browser leaves the page and comes back with the result in the address bar, so buy again with 4242 4242 4242 4242 and watch it happen.

5

Break it on purpose

Part A: the button will not appear without returnUrl, an address to send you back to. Leave it out and see what happens.

Part B: pay in the step 1 popup with the decline card 4000 0000 0000 0002. The failure lands in the log and right here:

No payment errors caught yet.
6

Same product, two shapes

Picking a payment method...
One button that opens a popup checkout, best for pricing cards.
Activity loglive

Everything the demo does shows up here as you click through.