WWooshPayment docs
Iniziare

Onboarding WooshPayment in 6 passi

Guida visiva al wizard onboarding di WooshPayment dopo la registrazione. Brand, spedizioni, pagamenti, anteprima, lancio in 6 step.

8 min di lettura

Onboarding WooshPayment in 6 passi

Dopo aver creato l'account su wooshpayment.com/signup, atterri sul wizard onboarding. Sei step lineari da Piattaforma a Sei live. Ogni step si sblocca dopo aver compilato il precedente — ma puoi sempre tornare indietro o saltare con il link "Salta per ora" in alto a destra.

Tempo totale: ~5 minuti se hai logo, colori e fasce di spedizione pronti.

Se hai chiuso accidentalmente il wizard, puoi riprenderlo cliccando "Continua la configurazione →" nel banner viola in cima alla dashboard. Lo stato è salvato sul server, non perdi nulla.

Passo 1 — Piattaforma

Il primo step è la scelta tra Shopify e WooCommerce:

  • Shopify → click "Connetti Shopify" → inserisci tuo-store.myshopify.com → autorizza l'app sul tuo Admin. Al rientro abbiamo accessToken + ScriptTag installato in automatico.
  • WooCommerce → URL dello store + Consumer Key + Consumer Secret (generabili in WooCommerce → Impostazioni → Avanzate → REST API)

Guide complete: Shopify Dev Dashboard · WooCommerce plugin.

Passo 2 — Brand

WooshPayment onboarding step Brand (Passo 2 di 6, 33% completato). Topbar con logo WooshPayment + "Salta per ora →". Badge viola "Benvenuto, Alba Moretti!". Titolo "Configuriamo il tuo checkout" + sub "Sette passi rapidi e sei live". Progress bar al 33%. Tabs orizzontali: Piattaforma ✓, Brand (attivo blu), Spedizioni, Pagamenti, Anteprima, Lancia. Card "Il tuo brand" con due colonne: sinistra ha campi URL del logo (placeholder cdn.miostore.com/logo.png), Colore principale #3b5bdb con swatch, Colore d'accento #2f4ac9. Destra mostra anteprima del checkout con logo "Il tuo store", placeholder line, e bottone "Paga €78,90". Footer "← Indietro" e "Continua →" blu.

Tre campi:

  • URL del logo: link pubblico a PNG/SVG trasparente (es. ospitato su CDN, S3, Imgur). Max altezza 60px consigliata.
  • Colore principale: hex code (es. #3b5bdb). Applicato a bottoni CTA, link, accenti.
  • Colore d'accento (hover): secondo hex, di solito una variante più scura del principale.

L'anteprima a destra si aggiorna live mentre digiti. Vedi come sarà il bottone "Paga €X" del checkout reale.

Se non hai un logo ospitato online, lo puoi caricare temporaneamente su Imgur, copiare il link diretto (.png/.jpg/.svg), e incollarlo. Più avanti dalla Dashboard → Checkout → Branding puoi sostituirlo con un asset definitivo.

Passo 3 — Spedizioni

WooshPayment onboarding step Spedizioni (Passo 3 di 6, 50% completato). Tabs Piattaforma ✓, Brand ✓, Spedizioni (attivo blu), Pagamenti, Anteprima, Lancia. Card "Tariffe di spedizione" + sub "Aggiungi una o più tariffe. Il cliente sceglie al checkout — la spedizione viene aggiunta al totale e processata da Whop". Riga con NOME TARIFFA "Spedizione standard", toggle "Spedizione gratuita" Off, PREZZO (€) "4.90". Link blu "+ Aggiungi tariffa". Banner info azzurro "Il cliente vedrà queste tariffe nel checkout, in ordine di prezzo crescente. Puoi modificarle in qualsiasi momento da Dashboard → Spedizioni". Footer "← Indietro" e "Continua →".

Definisci almeno una tariffa di spedizione:

  • Nome tariffa: visibile al cliente (es. "Spedizione standard", "Express 24h", "Ritiro in negozio")
  • Spedizione gratuita (toggle): se ON, il prezzo è ignorato e mostriamo "Gratis" al cliente
  • Prezzo (€): importo in euro (o nella tua valuta principale)

Puoi aggiungere più tariffe col link + Aggiungi tariffa. Esempio tipico:

NomePrezzo
Spedizione standard€4,90
Express 24h€9,90
Spedizione gratuita sopra €50€0,00 (toggle ON, condizionata da soglia in dashboard)

Al checkout, le tariffe vengono mostrate in ordine di prezzo crescente. Il cliente sceglie quella che preferisce.

La spedizione viene sommata al totale carrello e processata da Whop come un'unica transazione. Whop non distingue prodotto da spedizione — è tutto un unico amount. Se hai bisogno di reportistica separata, esportala dalla tua dashboard Shopify/WooCommerce.

Passo 4 — Pagamenti

WooshPayment onboarding step Pagamenti (Passo 4 di 6, 67% completato). Tabs Piattaforma ✓, Brand ✓, Spedizioni ✓, Pagamenti (attivo blu), Anteprima, Lancia. Card "Metodi di pagamento" + sub "Whop è il processor card. Puoi aggiungere Contrassegno come opzione alternativa". Riga "Whop Payments" con avatar viola "W", sub "Carte Visa/Mastercard/Amex, Apple Pay, Google Pay", badge verde "✓ Connesso" a destra, bordo verde su tutta la card. Riga "Contrassegno (Cash on Delivery)" con sub "Il cliente paga al corriere alla consegna. Molto popolare in Italia", checkbox vuoto a destra. Banner info azzurro "💡 Whop è già stato connesso nello step precedente. Se hai bisogno di rifare il collegamento, vai su Dashboard → Integrazioni dopo il lancio". Footer "← Indietro" e "Continua →".

Due metodi disponibili:

  • Whop Payments (richiesto, già connesso): processa carte, Apple Pay, Google Pay. Se vedi il badge ✓ Connesso significa che l'hai già collegato — altrimenti torna allo step Piattaforma o segui la guida Whop Connect.
  • Contrassegno (opzionale): checkbox da spuntare. Il cliente paga al corriere alla consegna. Molto popolare in Italia per dropshipping prodotti sotto i €50.

Il contrassegno funziona così: il cliente conferma l'ordine sul checkout, lo store crea l'ordine in stato pending payment, il corriere riscuote i contanti, tu marchi manualmente l'ordine come pagato sul backend Shopify/WooCommerce.

Passo 5 — Anteprima

WooshPayment onboarding step Anteprima (Passo 5 di 6, 83% completato). Tabs Piattaforma ✓, Brand ✓, Spedizioni ✓, Pagamenti ✓, Anteprima (attivo blu), Lancia. Card "Anteprima del checkout" + sub "Apri l'anteprima del tuo checkout in una nuova scheda e prova a navigare. Quando sei soddisfatto, procedi al lancio". Box URL ANTEPRIMA "https://alba-moretti-2.wooshpayment.com/checkout/prev_a8f3..." + bottone "🔗 Apri anteprima" blu primary a destra. Testo verde sotto "✓ Anteprima aperta". Banner info azzurro "Cosa stai guardando: • Checkout con il TUO branding • 2 prodotti finti per simulare un carrello reale • Tariffa di spedizione configurata • Pagamento non processato — è solo anteprima visuale". Footer "← Indietro" e "Procedi al lancio →" blu.

L'anteprima apre il tuo checkout su {slug}.wooshpayment.com/checkout/prev_xxx con:

  • Il tuo branding (logo, colori, dominio)
  • 2 prodotti finti precaricati nel carrello
  • La tariffa di spedizione che hai configurato
  • Pagamento finto — anche se digiti 4242 4242 4242 4242 (la carta test di Whop), non viene processato

Click su "Apri anteprima" → si apre in una nuova scheda. Verifica:

  • ✅ Logo a posizione e dimensione giusta
  • ✅ Colori CTA come previsto
  • ✅ Spedizione visibile nello step shipping
  • ✅ Step Whop con iframe carta correttamente caricato

Quando ti soddisfa il risultato, torna su questa pagina e clicca Procedi al lancio →.

Devi cliccare almeno una volta "Apri anteprima" prima di poter procedere — è una protezione anti-launch-blind. Lo testo verde "✓ Anteprima aperta" appare solo dopo il click. Altrimenti il bottone "Procedi al lancio →" resta disabilitato.

Passo 6 — Lancia

WooshPayment onboarding step Lancia (Passo 6 di 6, 100% completato). Tutti i tab marchiati ✓ tranne Lancia attivo. Card "Pronto al lancio 🚀" + sub "Hai configurato tutto. Conferma per attivare il checkout sul tuo store. Potrai sempre disattivarlo o modificarlo dalla dashboard". Checklist con 5 voci tutte verdi: ✓ Store collegato, ✓ Brand e colori configurati, ✓ Subdomain assegnato, ✓ Almeno una tariffa di spedizione, ✓ Metodi di pagamento scelti. Banner verde "Tutti i controlli sono verdi. Premi Conferma e vai live → per attivare il checkout in produzione". Footer "← Indietro" e "Conferma e vai live →" blu.

Checklist finale dei 5 prerequisiti:

  • ✓ Store collegato
  • ✓ Brand e colori configurati
  • ✓ Subdomain assegnato (auto-generato dal nome store, es. tuo-slug.wooshpayment.com)
  • ✓ Almeno una tariffa di spedizione
  • ✓ Metodi di pagamento scelti

Quando tutti i check sono verdi, premi Conferma e vai live →. WooshPayment in background:

  1. Marca lo store come LIVE=true sul DB
  2. Provisiona/conferma il subdomain {slug}.wooshpayment.com su Vercel
  3. Installa lo Script Tag sul tema Shopify (o conferma l'installazione plugin per WooCommerce)
  4. Registra il subdomain come Apple Pay domain sul tuo Whop (fire-and-forget)
  5. Manda email di lancio al merchant via Resend

"Sei live!"

WooshPayment schermata finale "Sei live!" con card centrata. Icona ✓ verde grande in cerchio light green. Titolo "Sei live!" + sub "Il tuo checkout WooshPayment è attivo. Vai alla dashboard per gestire ordini, configurazioni e statistiche in tempo reale". Bottoni "Apri Dashboard →" (blu primary) + "Vai agli ordini" (secondary). Sezione sotto "Cosa è successo:" con elenco: Subdomain alba-moretti-2.wooshpayment.com provisionato su Vercel con SSL automatico, Script tag installato sul tuo tema Shopify 1hcfze-ut.myshopify.com, I click su Checkout del carrello reindirizzeranno al tuo checkout brandizzato, Apple Pay domain registrato sul tuo Whop in background.

Lo schermo "Sei live!" riassume cosa è successo dietro le quinte:

  • Subdomain provisionato (es. alba-moretti-2.wooshpayment.com) con SSL automatico Vercel
  • Script tag installato sul tuo tema Shopify (per WooCommerce: plugin già attivo)
  • Apple Pay domain registrato sul tuo Whop
  • I click su "Checkout" del carrello reindirizzano al tuo checkout brandizzato

Due bottoni:

  • Apri Dashboard → ti porta su wooshpayment.com/dashboard (overview con grafici live)
  • Vai agli ordini ti porta direttamente alla lista ordini (vuota fino al primo acquisto)

Cosa fa WooshPayment dietro le quinte

Quando premi "Conferma e vai live" il backend esegue una sequenza atomica:

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

Se uno step intermedio fallisce, lo stato resta isLive=false e ti compare un banner di errore con istruzioni per recuperare manualmente.

Dopo il lancio

Ogni click "Checkout" dal cart Shopify/WooCommerce viene intercettato dal nostro ScriptTag e reindirizzato al tuo checkout brandizzato su {slug}.wooshpayment.com/checkout/{token}. Da lì:

  1. Il cliente compila email + indirizzo
  2. Sceglie la spedizione tra quelle che hai configurato
  3. Sceglie il metodo di pagamento (Carte/Apple Pay/Google Pay via Whop, o Contrassegno)
  4. Conferma → Whop processa → webhook al nostro backend → ordine creato su Shopify/WooCommerce
  5. Email "ordine confermato" parte dal tuo store (non da noi)
  6. Email notifica al merchant parte da WooshPayment

Posso modificare le configurazioni dopo il lancio?

Sì, sempre. Dalla Dashboard trovi tutto in queste pagine:

  • Checkout → Branding: modifica logo, colori, font
  • Spedizioni: aggiungi/rimuovi/edita tariffe
  • Pagamenti: attiva/disattiva contrassegno, gestisci Whop
  • Mercati & Lingue: aggiungi paesi e valute (multi-currency)
  • Integrazioni: rinnova Whop o cambia store collegato
  • Account → Dominio custom: mappa checkout.tuostore.com al posto del subdomain default

Problemi?

Prossimi step

  • Quickstart — overview rapida del primo ordine end-to-end
  • Come funziona — architettura del checkout + flusso cliente
  • Checklist pre-lancio — lista esaustiva di cose da verificare prima di mandare traffico vero
  • Dominio custom — sostituisci {slug}.wooshpayment.com con checkout.tuostore.com