Whop × CatchBack Cards

Integration Guide

Whop runs alongside Coinflow in production — no rip-and-replace. One provider replaces Coinflow for both payins and payouts, with 100+ payment methods and unified seller disbursements. Seven days to first live dollar.

Coinflow Payins → Whop Checkout Coinflow Payouts → Whop Payouts Next.js 15 stays Supabase stays Vercel stays No new infra Stripe & PayPal already legacy

Start Here — Drop This Into Your Repo

This file gives Cursor and Claude Code full context about your Whop migration. Every file path, schema change, and code example — ready to implement.

Save as CLAUDE.md in your project root. Open Cursor. Say “implement the Whop migration.”

You are migrating CatchBack Cards from Coinflow to Whop. Coinflow currently handles all payins and payouts. Stripe and PayPal code in the codebase is legacy/dead code — do not modify it. Read CLAUDE.md in the project root for the full migration spec. Start with app/lib/whop.ts (Whop client) and app/lib/payments.ts (provider router), then update the 4 checkout routes to add Whop alongside Coinflow, then create the 5 Whop seller routes under app/api/whop-connect/, then add the webhook handler at app/api/whop/webhook/route.ts, then run the Supabase migration. Both providers coexist — Coinflow stays default until you flip PAYMENT_PROVIDER=whop.

Codebase Context

The codebase contains legacy payment code that is no longer active. Understanding what’s live vs dead is critical before making changes.

Coinflow is the active provider for both payins and payouts. The 28 Stripe files and 3 PayPal files in the codebase are legacy/dead code from a previous integration. Do not modify or remove them during this migration.

Active (Coinflow) — being replaced

  • Coinflow checkout (payins)
  • Coinflow disbursements (payouts)
  • app/api/coinflow-webhook/route.ts
  • app/api/onramp/webhook/route.ts

Legacy (Dead Code) — do not touch

  • Stripe checkout (28 files)
  • Stripe Connect Express (7 routes)
  • PayPal SDK (3 routes)
  • app/lib/stripe.ts

Rollout Strategy

Whop runs alongside Coinflow in production. No staging needed, no new dependencies. Routing is controlled by env vars.

PAYMENT_PROVIDER env var defaults to "coinflow". Per-user override: WHOP_TEST_USER_IDS=uuid1,uuid2. All routing lives in one file — app/lib/payments.ts — not scattered across files.
1

Build

Whop client, webhook controller, seller routes, Supabase migration. Coinflow stays default. Deploy with zero behavior change.

2

Internal Test

Add your admin UUIDs to WHOP_TEST_USER_IDS. Buy packs, purchase CatchCoins, do a cashout — all with real money via Whop.

3

Small Cohort

Add 5–10 trusted users to the test list. Verify pack fulfillment, CatchCoins crediting, seller payouts, and webhook reliability.

4

Full Rollout

Set PAYMENT_PROVIDER=whop globally. Coinflow code stays as fallback until you’re confident. First live dollar.

Money Flows

Coinflow → Whop. All flows go through app/lib/payments.ts for provider routing.

Customer Payments (Packs, CatchCoins, Base Packs, Exercise)

Buyer CatchBack UI
Checkout Whop Checkout
Confirm payment.succeeded
Fulfill Assign Cards / Credit CatchCoins

Replaces Coinflow payment sessions in 4 checkout routes. Whop supports cards, PayPal, crypto, ACH, and 100+ local methods natively — same breadth as Coinflow with better global coverage.

Seller Cashout (CatchCoins → USD)

Seller Convert CatchCoins
Platform Whop Transfer
Seller Account Whop Company
Withdraw Bank / Crypto / Venmo

Replaces Coinflow disbursements. Sellers self-serve withdrawals via the embedded Whop payout portal — no more admin-only payouts. Supports ACH, crypto wallets, wire, and more.

Seller Onboarding

Seller Click “Set Up Payouts”
Create Whop Company
Verify Whop KYC
Payout Method ACH / Crypto / Wire

Replaces Coinflow’s payout enrollment. Unified KYC verification + self-service payout method management via embedded Whop portal on the /portfolio/account page.

Your Code → Whop

How your existing schemas map to Whop. New columns are added alongside existing ones — nothing removed.

Your SchemaFile / TableWhop EntityNew Columns
profiles Supabase — profiles table Company (connected account) whop_company_id TEXT, whop_payout_status VARCHAR(20)
catchback_transactions Supabase — catchback_transactions Payment / Transfer whop_payment_id TEXT, whop_transfer_id TEXT
cashout_transactions Supabase — cashout_transactions Transfer / Withdrawal whop_transfer_id TEXT, whop_withdrawal_id TEXT
(new table) whop_webhook_events Idempotency tracking event_id, event_type, payload

What Changes

Side-by-side: Coinflow today vs. the Whop equivalents.

Coinflow (Today)

  • Coinflow payment sessions for checkout
  • Coinflow disbursements for seller payouts
  • Coinflow KYC for payout enrollment
  • Coinflow webhook at /api/coinflow-webhook
  • Crypto-first, limited traditional payment support

Whop (After)

  • whop.checkoutConfigurations.create() for checkout
  • whop.transfers.create() for seller payouts
  • whop.companies.create() + KYC for enrollment
  • Whop webhook at /api/whop/webhook
  • 100+ methods: cards, crypto, ACH, PayPal, local rails

Seller Payout (Today)

  • Coinflow payout enrollment
  • Admin-triggered disbursements only
  • Crypto-focused payout methods

Seller Payout (After)

  • Whop connected account + KYC
  • Self-service via embedded payout portal
  • ACH, crypto, wire, Venmo — seller chooses

Webhook Mapping

Coinflow webhook events map to Whop events. Both endpoints run simultaneously during transition.

Coinflow PatternWhop EventWhat Happens
/api/coinflow-webhook (payment complete) payment.succeeded Assign cards, credit CatchCoins, create transaction record
/api/onramp/webhook (onramp complete) payment.succeeded Same fulfillment — unified under one event
Coinflow payout status check withdrawal.created Track seller withdrawal initiation
Coinflow KYC status verification.succeeded Auto-update whop_payout_status to “completed”
(none) payment.failed Log failure, show retry UI
Coinflow webhooks stay live. The /api/coinflow-webhook and /api/onramp/webhook endpoints remain active during the transition. They only become dead code after the global cutover to Whop.

Architecture

Where Whop fits. Orange is new, green stays, gray is legacy dead code. Coinflow and Whop coexist during transition.

                    ┌─────────────────────────────┐
                    │    CatchBack Web App          │
                    │    Next.js 15 / Vercel         │
                    └──────────────┬──────────────┘
                                   │
                    ┌──────────────▼──────────────┐
                    │    app/lib/payments.ts        │
                    │    Provider Router (NEW)       │
                    │    PAYMENT_PROVIDER env var    │
                    └───────┬──────────────┬──────┘
                            │              │
           ┌────────────────▼───┐   ┌──────▼─────────────────┐
           │  Coinflow (active)  │   │  Whop (NEW)             │
           │  ├ Payins           │   │  ├ Checkout API         │
           │  ├ Payouts          │   │  ├ Companies API        │
           │  └ Webhooks         │   │  ├ Transfers API        │
           └────────────────────┘   │  └ Webhooks             │
                                    └──────────────────────────┘
  ┌─────────────────────┐
  │  Legacy (dead code)  │       ┌──────────────────────────┐
  │  ├ Stripe (28 files) │Supabase (PostgreSQL)│  └ PayPal (3 files)  │Auth, DB, RLS — unchanged└─────────────────────┘       └──────────────────────────┘

Seller Onboarding States

Tracks seller readiness in profiles.whop_payout_status.

StateMeaningCan DoBlocked
pending Whop Company created, KYC not started List cards, earn CatchCoins Withdraw to bank/crypto
in_progress KYC started but not verified List cards, earn CatchCoins Withdraw to bank/crypto
completed KYC verified, payout method added Everything — list, earn, withdraw Nothing
failed KYC rejected List cards, earn CatchCoins Withdraw — must retry KYC

Timeline

One week to first live dollar. Coinflow stays live the entire time.

Day 1–2
Build
  • Whop client + payments router
  • 4 checkout route updates
  • 5 seller routes + portal component
  • Webhook handler + Supabase migration
  • Deploy — Coinflow still default
Day 3–4
Internal Test
  • Admin UUIDs in WHOP_TEST_USER_IDS
  • Buy packs with real money
  • Test seller onboarding + cashout
  • Verify webhook fulfillment
Day 5–6
Small Cohort
  • 5–10 trusted users added
  • All payment types tested
  • Seller payout portal verified
  • Analytics parity confirmed
Day 7
Full Rollout
  • Flip PAYMENT_PROVIDER=whop
  • Coinflow stays as fallback
  • First live dollar on Whop

What Stays the Same

Most of your stack is unchanged. Whop replaces only the Coinflow payment layer.

Next.js 15.5.7
Supabase (DB + Auth)
Vercel hosting
Tailwind CSS
React Query
PostHog analytics
TikTok / Meta pixels
Resend email
CatchCoins system
Store credit system
Card ownership logic
Marketplace listings
Admin whitelist auth
All page URLs
RLS policies
No new dependencies
~ Account page (adds Whop portal)
~ Success pages (adds DB check)
Bottom line: Your Next.js app, Supabase database, Vercel deployment, auth, card trading logic, CatchCoins virtual currency, and all frontend pages stay exactly as they are. Coinflow code remains as fallback. Legacy Stripe and PayPal code is untouched. No new infra, no new libraries beyond the Whop SDK.