WWooshPayment docs
Getting started

WooshPayment onboarding in 6 steps

Visual guide to the WooshPayment onboarding wizard after signup. Brand, shipping, payments, preview, launch in 6 steps.

8 min read

WooshPayment onboarding in 6 steps

After signup at wooshpayment.com/signup, you land on the onboarding wizard. Six linear steps from Platform to You're live. Each step unlocks after the previous one is filled — but you can always go back or skip with the "Skip for now" link in the top right.

Total time: ~5 minutes if you have logo, colors and shipping rates ready.

If you accidentally closed the wizard, you can resume it by clicking "Continue setup →" in the purple banner at the top of the dashboard. State is saved server-side, you lose nothing.

Step 1 — Platform

The first step is the choice between Shopify and WooCommerce:

  • Shopify → click "Connect Shopify" → enter your-store.myshopify.com → authorize the app on your Admin. On return we have accessToken + ScriptTag installed automatically.
  • WooCommerce → store URL + Consumer Key + Consumer Secret (generate them in WooCommerce → Settings → Advanced → REST API)

Full guides: Shopify Dev Dashboard · WooCommerce plugin.

Step 2 — Brand

WooshPayment onboarding Brand step (Step 2 of 6, 33% completed). Topbar with WooshPayment logo + "Skip for now →". Purple badge "Welcome, Alba Moretti!". Title "Let's set up your checkout" + sub "Seven quick steps and you're live". Progress bar at 33%. Horizontal tabs: Platform ✓, Brand (active blue), Shipping, Payments, Preview, Launch. Card "Your brand" with two columns: left has Logo URL field (placeholder cdn.mystore.com/logo.png), Primary color #3b5bdb with swatch, Accent color #2f4ac9. Right shows checkout preview with "Your store" logo, placeholder lines, and "Pay €78.90" button. Footer "← Back" and "Continue →" blue.

Three fields:

  • Logo URL: public link to transparent PNG/SVG (e.g. hosted on a CDN, S3, Imgur). Max height 60px recommended.
  • Primary color: hex code (e.g. #3b5bdb). Applied to CTA buttons, links, accents.
  • Accent color (hover): secondary hex, usually a darker variant of the primary.

The right-side preview updates live as you type. You see how the real checkout's "Pay €X" button will look.

If you don't have a logo hosted online yet, you can temporarily upload to Imgur, grab the direct link (.png/.jpg/.svg), and paste it. Later from Dashboard → Checkout → Branding you can swap it for a final asset.

Step 3 — Shipping

WooshPayment onboarding Shipping step (Step 3 of 6, 50% completed). Tabs Platform ✓, Brand ✓, Shipping (active blue), Payments, Preview, Launch. Card "Shipping rates" + sub "Add one or more rates. The customer picks one at checkout — shipping is added to the total and processed by Whop". Row with RATE NAME "Standard shipping", "Free shipping" toggle Off, PRICE (€) "4.90". Blue "+ Add rate" link. Light-blue info banner "The customer will see these rates at checkout, sorted from cheapest to most expensive. You can edit them anytime from Dashboard → Shipping". Footer "← Back" and "Continue →".

Define at least one shipping rate:

  • Rate name: visible to the customer (e.g. "Standard shipping", "Express 24h", "In-store pickup")
  • Free shipping (toggle): if ON, the price is ignored and we show "Free" to the customer
  • Price (€): amount in euro (or your main currency)

You can add more rates via the + Add rate link. Typical example:

NamePrice
Standard shipping€4.90
Express 24h€9.90
Free shipping over €50€0.00 (toggle ON, threshold-gated in dashboard)

At checkout, rates are shown sorted from cheapest to most expensive. The customer picks one.

Shipping is summed into the cart total and processed by Whop as a single transaction. Whop doesn't distinguish product from shipping — it's a single amount. For separate reporting, export from your Shopify/WooCommerce dashboard.

Step 4 — Payments

WooshPayment onboarding Payments step (Step 4 of 6, 67% completed). Tabs Platform ✓, Brand ✓, Shipping ✓, Payments (active blue), Preview, Launch. Card "Payment methods" + sub "Whop is the card processor. You can add Cash on Delivery as an alternative option". Row "Whop Payments" with purple "W" avatar, sub "Visa/Mastercard/Amex cards, Apple Pay, Google Pay", green "✓ Connected" badge on the right, green border on the whole card. Row "Cash on Delivery" with sub "The customer pays the courier on delivery. Very popular in Italy", empty checkbox on the right. Light-blue info banner "💡 Whop was already connected in the previous step. If you need to reconnect, go to Dashboard → Integrations after launch". Footer "← Back" and "Continue →".

Two methods available:

  • Whop Payments (required, already connected): processes cards, Apple Pay, Google Pay. If you see the ✓ Connected badge it means you already linked it — otherwise go back to the Platform step or follow the Whop Connect guide.
  • Cash on Delivery (optional): checkbox to tick. The customer pays the courier on delivery. Very popular in Italy for dropshipping items below €50.

COD works like this: the customer confirms the order on checkout, the store creates the order in pending payment state, the courier collects cash, you manually mark the order as paid in your Shopify/WooCommerce backend.

Step 5 — Preview

WooshPayment onboarding Preview step (Step 5 of 6, 83% completed). Tabs Platform ✓, Brand ✓, Shipping ✓, Payments ✓, Preview (active blue), Launch. Card "Checkout preview" + sub "Open the preview of your checkout in a new tab and play with it. When you're happy, proceed to launch". PREVIEW URL box "https://alba-moretti-2.wooshpayment.com/checkout/prev_a8f3..." + "🔗 Open preview" blue primary button on the right. Green text below "✓ Preview opened". Light-blue info banner "What you're looking at: • Checkout with YOUR branding • 2 fake products simulating a real cart • Configured shipping rate • Payment is NOT processed — visual preview only". Footer "← Back" and "Proceed to launch →" blue.

The preview opens your checkout at {slug}.wooshpayment.com/checkout/prev_xxx with:

  • Your branding (logo, colors, domain)
  • 2 fake products preloaded in the cart
  • The shipping rate you configured
  • Fake payment — even if you type 4242 4242 4242 4242 (Whop's test card), nothing is processed

Click "Open preview" → opens in a new tab. Verify:

  • ✅ Logo placement and size correct
  • ✅ CTA colors as expected
  • ✅ Shipping visible in the shipping step
  • ✅ Whop step with card iframe loaded correctly

When happy with the result, come back to this page and click Proceed to launch →.

You must click "Open preview" at least once before being able to proceed — it's an anti-launch-blind safety. The green "✓ Preview opened" text appears only after the click. Otherwise the "Proceed to launch →" button stays disabled.

Step 6 — Launch

WooshPayment onboarding Launch step (Step 6 of 6, 100% completed). All tabs marked ✓ except Launch active. Card "Ready to launch 🚀" + sub "You've configured everything. Confirm to activate the checkout on your store. You can always deactivate or edit from the dashboard". Checklist with 5 green items: ✓ Store connected, ✓ Brand and colors set, ✓ Subdomain assigned, ✓ At least one shipping rate, ✓ Payment methods picked. Green banner "All checks are green. Press Confirm and go live → to activate the checkout in production". Footer "← Back" and "Confirm and go live →" blue.

Final checklist of the 5 prerequisites:

  • ✓ Store connected
  • ✓ Brand and colors set
  • ✓ Subdomain assigned (auto-generated from store name, e.g. your-slug.wooshpayment.com)
  • ✓ At least one shipping rate
  • ✓ Payment methods picked

When all checks are green, press Confirm and go live →. WooshPayment behind the scenes:

  1. Marks the store as LIVE=true in the DB
  2. Provisions/confirms the subdomain {slug}.wooshpayment.com on Vercel
  3. Installs the Script Tag on the Shopify theme (or confirms the plugin install for WooCommerce)
  4. Registers the subdomain as Apple Pay domain on your Whop (fire-and-forget)
  5. Sends launch email to the merchant via Resend

"You're live!"

WooshPayment final "You're live!" screen with centered card. Large green ✓ icon in light-green circle. Title "You're live!" + sub "Your WooshPayment checkout is active. Open the dashboard to manage orders, settings and real-time stats". Buttons "Open Dashboard →" (blue primary) + "Go to orders" (secondary). Section below "What just happened:" with list: Subdomain alba-moretti-2.wooshpayment.com provisioned on Vercel with automatic SSL, Script tag installed on your Shopify theme 1hcfze-ut.myshopify.com, "Checkout" clicks from the cart will redirect to your branded checkout, Apple Pay domain registered on your Whop in the background.

The "You're live!" screen summarizes what happened behind the scenes:

  • Subdomain provisioned (e.g. alba-moretti-2.wooshpayment.com) with automatic Vercel SSL
  • Script tag installed on your Shopify theme (for WooCommerce: plugin already active)
  • Apple Pay domain registered on your Whop
  • "Checkout" clicks from the cart redirect to your branded checkout

Two buttons:

  • Open Dashboard → takes you to wooshpayment.com/dashboard (overview with live charts)
  • Go to orders takes you straight to the orders list (empty until first purchase)

What WooshPayment does behind the scenes

When you press "Confirm and go live" the backend runs an atomic sequence:

1. UPDATE merchants SET isLive=true WHERE id=...
2. POST https://api.vercel.com/v9/projects/PRJ/domains  → provisions subdomain
3. Wait DNS+SSL ready (1s polling × max 60s)
4. POST https://api.shopify.com/.../script_tags        → installs script-tag
5. POST https://api.whop.com/v5/apple-pay/domains       → registers Apple Pay domain
6. POST resend.com/emails  → "You're live" email to merchant

If an intermediate step fails, state remains isLive=false and an error banner with manual-recovery instructions appears.

After launch

Every "Checkout" click from the Shopify/WooCommerce cart is intercepted by our ScriptTag and redirected to your branded checkout at {slug}.wooshpayment.com/checkout/{token}. From there:

  1. The customer fills email + address
  2. Picks shipping from the ones you configured
  3. Picks the payment method (Cards/Apple Pay/Google Pay via Whop, or COD)
  4. Confirms → Whop processes → webhook to our backend → order created on Shopify/WooCommerce
  5. "Order confirmed" email goes from your store (not from us)
  6. Merchant notification email goes from WooshPayment

Can I change settings after launch?

Yes, always. From the Dashboard you find everything in these pages:

  • Checkout → Branding: edit logo, colors, fonts
  • Shipping: add/remove/edit rates
  • Payments: enable/disable COD, manage Whop
  • Markets & Languages: add countries and currencies (multi-currency)
  • Integrations: refresh Whop or change linked store
  • Account → Custom domain: map checkout.yourstore.com instead of the default subdomain

Problems?

Next steps

  • Quickstart — quick overview of the first end-to-end order
  • How it works — checkout architecture + customer flow
  • Pre-launch checklist — exhaustive list of things to verify before sending real traffic
  • Custom domain — replace {slug}.wooshpayment.com with checkout.yourstore.com