mailinapp
Documentation menu

Blocco Prodotto

Una scheda prodotto con un pulsante Acquista ora. Il suo campo Checkout determina dove porta effettivamente un tap. Il Checkout MailInApp (Stripe) gestisce l'intero pagamento in tempo reale: nessun negozio online da creare, nessuna pagina di checkout separata da costruire, nessun dettaglio della carta che tocchi mai i server di MailInApp. Il Link al checkout di un negozio esterno invece porta l'acquirente direttamente a una pagina prodotto sul tuo negozio Shopify/WooCommerce, per quando preferisci mantenere la vendita (con il relativo inventario, tasse e sconti) sul negozio che già gestisci.

Checkout MailInApp (Stripe)

Questa è la modalità predefinita del blocco, e tutto quanto in questa sezione si applica specificamente a essa — vedi Rimandare al checkout del tuo negozio esterno più sotto per l'altra modalità. Collega prima il tuo account Stripe in Impostazioni → Pagamenti (Stripe Connect, Standard/OAuth); ogni addebito viene accreditato direttamente su quell'account.

A differenza di un voto o di una valutazione, un acquisto può concludersi in sicurezza solo sulla pagina di checkout ospitata da Stripe, quindi questo blocco non ha alcun livello cinetico all'interno dell'email. Acquista ora è link-first ovunque, email inclusa. Toccandolo si apre sempre prima la vista live ospitata su una pagina di conferma (/v/[token]/act?blockId=...&blockType=product&action=buy), che mostra di nuovo nome e prezzo del prodotto e chiede un ulteriore tap ("Continua al pagamento") prima di creare effettivamente qualcosa.

Questa struttura di conferma-poi-POST è intenzionale: uno scanner di sicurezza o un proxy aziendale che pre-recupera ogni link in un'email non deve mai poter attivare una vera sessione di Stripe Checkout con una semplice GET. Solo il POST esplicito dalla pagina di conferma raggiunge POST /api/checkout. Quella rotta risolve prezzo, nome e inventario a partire dalla configurazione del blocco memorizzata lato server, mai da ciò che invia il client. Crea poi una Checkout Session sull'account Stripe collegato del proprietario, scrive un ordine pending ed esegue un reindirizzamento 303 verso Stripe.

Un ordine pending non conta ancora come una vendita. Solo POST /api/webhooks/stripe può spostare un ordine allo stato paid. È autenticato dalla firma stessa di Stripe, lo stesso modello di fiducia degli URL HMAC degli endpoint di conto alla rovescia e di tracciamento delle aperture, poiché il reindirizzamento all'URL di successo su cui atterra il browser dell'acquirente è solo UX e non può essere considerato prova di pagamento.

Su quel webhook, MailInApp riverifica l'inventario in modo transazionale prima di confermare. Se due acquirenti si contendono l'ultima unità e entrambi completano il pagamento su Stripe, l'addebito di chi perde viene rimborsato automaticamente e riceve un'email di avviso, invece che il prodotto venga venduto in eccesso silenziosamente. Un acquisto confermato scrive anche un evento di interazione purchase, così i ricavi confluiscono nella stessa pipeline di aggregati e webhook di progetto usata dalle risposte di ogni altro blocco. Vedi Interazioni e analisi.

Il Fulfillment dipende dal campo Fulfillment:

  • Digitale — inserisci il contenuto di consegna (un link o un codice di download) direttamente sul blocco; nel momento in cui il webhook conferma il pagamento, quel contenuto viene inviato via email all'acquirente automaticamente.
  • Fisico — Stripe Checkout raccoglie un indirizzo di spedizione come parte del flusso di pagamento; l'ordine resta nella tabella Ordini del progetto finché non clicchi Contrassegna come spedito, il che invia all'acquirente un'email di avviso di spedizione.

Inventario è un limite facoltativo (0 = illimitato). L'HTML inviato via email è statico al momento dell'invio, la stessa convenzione seguita dalla scadenza del blocco Conto alla rovescia e dalla finestra di accesso del blocco Link della riunione, quindi la disponibilità di un prodotto con limite non viene incorporata come testo fisso. L'email incorpora invece una piccola immagine di disponibilità renderizzata lato server ("Ne restano 3" / "Esaurito") rigenerata a ogni apertura, così non mostra mai una disponibilità obsoleta giorni dopo l'invio. Sulla vista live ospitata, l'inventario viene verificato in tempo reale e dinamicamente: una volta che gli ordini pagati raggiungono il limite, Acquista ora viene sostituito direttamente da un controllo disattivato "Esaurito", anziché un semplice badge accanto a un pulsante ancora cliccabile. In entrambi i casi, la riverifica transazionale del webhook al momento del pagamento è la vera fonte di verità; il badge e il pulsante disattivato sono comodità dell'interfaccia, non il meccanismo di applicazione effettivo.

Se hai collegato un negozio Shopify o WooCommerce, sopra questi campi compare una casella di ricerca Importa dal negozio, che elenca i prodotti dal catalogo di quel negozio. Rimane sincronizzata automaticamente in background, senza alcun pulsante separato da premere. Scegliere un prodotto compila per te Nome, Descrizione, Immagine e Prezzo.

Quando quel prodotto sincronizzato ha una pagina nota sul negozio (l'handle del prodotto di Shopify, oppure l'URL della pagina di WooCommerce), importarlo passa anche Checkout a Link al checkout di un negozio esterno e compila quella pagina come URL della pagina prodotto esterna. Un prodotto importato è quindi pronto per essere venduto sul tuo negozio senza nient'altro da configurare. Un prodotto sincronizzato prima che il tuo collegamento al negozio acquisisse gli URL di pagina resta invece su Checkout MailInApp, senza che nulla cambi sotto di te.

Si tratta di una copia una tantum, non di un collegamento live. Ogni campo resta modificabile in seguito, e il prezzo effettivamente addebitato al checkout è sempre quello attualmente presente nel blocco, mai recuperato di nuovo dal negozio. I campi qui sotto funzionano allo stesso modo con o senza un negozio collegato — importare è una scorciatoia, non un obbligo.

Rimandare al checkout del tuo negozio esterno

Passa Checkout a Link al checkout di un negozio esterno e imposta un URL della pagina prodotto esterna — la tua pagina prodotto Shopify, un permalink del carrello, una pagina prodotto WooCommerce, qualsiasi link https:// — per saltare del tutto il flusso di pagamento di MailInApp. Acquista ora si comporta allora esattamente come un pulsante o un'immagine con link semplice: nessuna pagina di conferma, nessuna /api/checkout, nessuno Stripe. Il clic viene comunque tracciato (quindi conta ai fini della mappa di calore dei clic), e l'acquirente atterra direttamente sul tuo negozio per completare lì l'acquisto.

Poiché MailInApp non fa mai parte di quel pagamento, nessuno dei meccanismi del checkout MailInApp descritti sopra si applica a un prodotto esterno. Non c'è alcun ordine pending/paid, nessuna voce nella tabella Ordini, nessuna azione di fulfillment o di rimborso, nessuna applicazione dell'inventario o badge di disponibilità, e nessun passaggio di percorso attivato dall'acquisto. Traccia quel ricavo nello stesso modo in cui tracceresti qualsiasi altra vendita sul tuo negozio. Tracciamento dei ricavi di ordini e checkout Shopify illustra come attribuire gli acquisti effettuati sul negozio all'email che li ha generati.

Se URL della pagina prodotto esterna viene lasciato vuoto, o non è un link https:// valido, mentre Checkout è impostato su esterno, il blocco torna silenziosamente a comportarsi esattamente come la modalità di checkout MailInApp, invece di renderizzare un pulsante non funzionante.

Sconto per prodotto

Una volta che un blocco è stato popolato tramite Importa dal negozio (quindi porta con sé un vero storeProductId, non un URL digitato a mano) e Checkout è impostato su esterno, compare un interruttore Sconto per prodotto. Attivalo e imposta un Tipo di sconto (percentuale o importo fisso), un Valore dello sconto e una Scadenza (giorni dopo l'invio). La tela dello Studio si aggiorna immediatamente con lo stesso badge di sconto e il prezzo barrato che vedranno i destinatari — senza bisogno di aprire la vista live per verificarlo. Poco prima che l'email di ciascun destinatario venga renderizzata, MailInApp genera un codice sconto monouso sul tuo negozio Shopify o WooCommerce collegato — limitato a quel destinatario e a questo solo prodotto, non all'intero negozio — e riscrive Acquista ora in un link di riscatto che riporta l'acquirente sulla pagina di questo stesso prodotto con il codice già applicato. Questo è indipendente dall'Offerta di sconto a livello di progetto nella pagina Invio (vedi Offerta di sconto): un progetto può usare l'una, l'altra, entrambe o nessuna delle due, e ciascuna mantiene il proprio periodo di raffreddamento così che l'una non blocchi mai l'altra. Un blocco il cui prodotto non è stato importato da un negozio collegato mostra invece una nota che spiega perché l'interruttore è nascosto. Illustrato passo passo in Codici sconto prodotto Shopify e Codici sconto prodotto WooCommerce.

Per i negozi Shopify, un blocco app facoltativo può mostrare questo stesso badge direttamente sulla pagina prodotto live, prima del checkout — vedi Mostrare lo sconto sulla tua pagina prodotto (Shopify) per i passaggi di configurazione.

Se la generazione fallisce per un destinatario — nessun cliente corrispondente sul negozio, un token da ricollegare, un intoppo momentaneo dell'API — la sua email viene comunque inviata; Acquista ora torna semplicemente al link prodotto semplice, senza sconto, del blocco.

Campi configurabili:

  • Nome, Descrizione, Immagine — scelte dalla tua libreria multimediale invece di essere digitate come URL, oppure compilate da Importa dal negozio sopra.
  • Prezzo e Valuta (USD, EUR o GBP) — mostrati sulla scheda in ogni caso, anche in modalità esterna, dove hanno solo valore informativo.
  • Checkout — Checkout MailInApp (Stripe) oppure Link al checkout di un negozio esterno.
  • URL della pagina prodotto esterna — solo in modalità esterna; dove Acquista ora indirizza l'acquirente.
  • Sconto per prodotto, Tipo di sconto, Valore dello sconto, Scadenza (giorni dopo l'invio) — solo in modalità esterna, e solo dopo che il prodotto del blocco proviene da Importa dal negozio.
  • Fulfillment — Digitale o Fisico; solo in modalità di checkout MailInApp.
  • Inventario — 0 per illimitato; solo in modalità di checkout MailInApp.
  • Contenuto di consegna — solo digitale; il link o il codice di download inviato dopo il pagamento; solo in modalità di checkout MailInApp.
  • Colore di sfondo, padding, bordo, raggio del bordo, e sostituzioni dello stile del testo per nome e descrizione.

Esempi

Subject

Back in stock: the Weekender Tote

Un merchandise drop o una tiratura limitata sono il caso d'uso diretto: imposta Inventario sulla dimensione della tiratura e lascia che la pillola di disponibilità comunichi la scarsità man mano che si esaurisce. Vedi Ecommerce e drop di prodotto per lo schema più ampio di vendere direttamente da un invio promozionale invece di instradare i clic verso un negozio separato. Il lancio di un corso digitale o di un ebook usa il fulfillment Digitale, così l'acquirente riceve il link di download nell'istante in cui il pagamento viene confermato, senza alcun passaggio manuale di fulfillment. Un'attività locale che vende un componente aggiuntivo fisico (un articolo brandizzato, una scatola stagionale) usa il fulfillment Fisico e gestisce la tabella Ordini come una coda ordini leggera, contrassegnando ciascuno come evaso man mano che viene spedito. Usa Contatta l'acquirente per aprire un ticket di supporto se un indirizzo va confermato.

Come appare il fallback statico

<div style="margin:12px 0;padding:16px;border:1px solid #e5e7eb;
            border-radius:8px;background-color:#ffffff">
  <p style="margin:0 0 4px;font-weight:600;font-size:16px;color:#111827">
    Limited edition tote bag
  </p>
  <p style="margin:0 0 10px;font-weight:700;font-size:18px">$29.00</p>
  <img src="https://mailinapp.com/api/product-status?p=proj123&b=prod-1&s=..."
       width="180" height="30" alt="" style="display:block;margin-bottom:8px" />
  <a href="https://mailinapp.com/v/eyJhbGci.../act?blockId=prod-1&blockType=product&action=buy"
     style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
            color:#ffffff;border-radius:6px;text-decoration:none;
            font-size:14px;font-weight:600">
    Buy now
  </a>
</div>

L'immagine di stato della disponibilità viene renderizzata solo quando è impostato un limite di inventario; Acquista ora apre sempre la pagina di conferma invece di inviare un pagamento direttamente dall'interno dell'email.

In modalità di checkout esterna non c'è alcuna pagina di conferma né badge di disponibilità — Acquista ora è un semplice link tracciato dai clic diretto a URL della pagina prodotto esterna:

<div style="margin:12px 0;padding:16px;border:1px solid #e5e7eb;
            border-radius:8px;background-color:#ffffff">
  <p style="margin:0 0 4px;font-weight:600;font-size:16px;color:#111827">
    Limited edition tote bag
  </p>
  <p style="margin:0 0 10px;font-weight:700;font-size:18px">$29.00</p>
  <a href="https://mailinapp.com/v/eyJhbGci.../click?blockId=prod-1&blockType=product&dest=https%3A%2F%2Fshop.example.com%2Fproducts%2Ftote-bag"
     style="display:inline-block;border:none;border-radius:6px;
            background-color:#4f46e5;color:#ffffff;padding:10px 20px;
            font-size:14px;font-weight:600;text-decoration:none">
    Buy now
  </a>
</div>

Vedi anche