1

Add the button, watch it decide

A few lines add the button. It checks which wallets this browser can pay with and shows only those.

<WhopElements elements={loadWhop()} environment="sandbox">
  <Checkout plan="plan_wJDUgFCSe8uSz" returnUrl="https://nextjs-whop-express-checkout-demo.vercel.app/">
    <ExpressCheckoutElement />
  </Checkout>
</WhopElements>
Safari or iPhone with Apple Pay set up→ Apple Pay button
Chrome or Android with Google Pay→ Google Pay button
Any browser, when the seller accepts PayPal→ PayPal button
Everything else, including this demo→ Nothing, so the page offers Pay with card
2

Pay with card

No wallet button shows on this demo, so every visitor pays through Whop's card form. Open it and pay with the test card below.

Pays successfully
Gets declined, for step 5
Any future expiry date, any CVC, and any name and address.
Paying with a brand-new email moves this tab to Whop's own Payment complete page. Press your browser's Back button to return here, and your receipt will be waiting.
3

Verify on the server

The demo already checked this payment with Whop before showing the receipt. Ask Whop again and read its full answer, which comes from payments.retrieve.

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

Come back from Whop

When a payment finishes, Whop can send the buyer back to your page with the result in the address bar. These buttons open this page at the same address Whop would use.

5

Break it on purpose

Part A: give the button a plan that doesn't exist and see how Whop answers. A plan is the price of a product on Whop.

Part B: pay in the step 2 form with the decline card 4000 0000 0000 0002. The form shows the error itself, and onComplete never runs, so this page and the server never hear about a payment.

6

Same product, two shapes

Pick a shape to load it for Demo pass.
Activity loglive

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