mailinapp
Documentation menu

Bloc Produit

Une fiche produit avec un bouton Acheter maintenant. Son champ Paiement choisit où mène un tap. Paiement MailInApp (Stripe) porte un vrai flux de paiement : pas de boutique à construire, pas de page de paiement séparée, et les détails de carte ne touchent jamais les serveurs de MailInApp. Lien vers le paiement d'une boutique externe envoie plutôt l'acheteur directement vers une page produit de votre propre boutique Shopify/WooCommerce, pour quand vous préférez garder la vente (et son stock, sa taxe, ses réductions) sur la boutique que vous exploitez déjà.

Paiement MailInApp (Stripe)

C'est le mode par défaut du bloc, et tout ce qui suit dans cette section s'y applique spécifiquement — voir Créer un lien vers le paiement de votre propre boutique ci-dessous pour l'autre mode. Connectez d'abord votre propre compte Stripe sous Paramètres → Paiements (Stripe Connect, Standard/OAuth) ; chaque paiement se règle directement sur ce compte.

Contrairement à un vote ou une notation, un achat ne peut se conclure en toute sécurité que sur la propre page de paiement hébergée de Stripe, donc ce bloc n'a aucun niveau cinétique dans l'email. Acheter maintenant est toujours un lien en premier, y compris dans le courrier. Y toucher ouvre toujours d'abord la vue en direct hébergée sur une page de confirmation (/v/[token]/act?blockId=...&blockType=product&action=buy), qui réaffiche le nom et le prix du produit et demande un tap de plus (« Continuer vers le paiement ») avant de créer quoi que ce soit réellement.

Cette forme « confirmer puis POST » est délibérée : un scanner de sécurité ou un proxy d'entreprise qui précharge chaque lien d'un email ne doit jamais déclencher une vraie session Stripe Checkout sur un simple GET. Seul le POST explicite depuis la page de confirmation atteint POST /api/checkout. Cette route résout le prix, le nom et le stock à partir de la configuration propre du bloc stockée côté serveur, jamais depuis ce que le client envoie. Elle crée ensuite une session Checkout sur le compte Stripe connecté du propriétaire, écrit une commande pending, et redirige en 303 vers Stripe.

Rien dans une commande pending ne compte encore comme une vente. Seul POST /api/webhooks/stripe fait passer une commande à paid. Cette route est authentifiée par la propre signature de Stripe, le même modèle de confiance que les URL HMAC des endpoints de compte à rebours et de suivi des ouvertures, puisque la redirection d'URL de succès sur laquelle atterrit le navigateur de l'acheteur n'est qu'une question d'expérience utilisateur et ne peut pas être considérée comme une preuve de paiement.

Sur ce webhook, MailInApp revérifie le stock de manière transactionnelle avant de confirmer. Si deux acheteurs se disputaient la dernière unité et que les deux sont passés par Stripe, le paiement du perdant est automatiquement remboursé et un avis lui est envoyé par email plutôt que de survendre silencieusement le produit. Un achat confirmé écrit aussi un événement d'interaction purchase, afin que le revenu circule dans les mêmes synthèses et le même pipeline de webhook de projet que les réponses de tout autre bloc. Voir Interactions et analytique.

Le Traitement de la commande dépend du champ Traitement :

  • Numérique — vous saisissez directement sur le bloc le contenu de livraison (un lien ou un code de téléchargement) ; dès que le webhook confirme le paiement, ce contenu est envoyé automatiquement par email à l'acheteur.
  • Physique — Stripe Checkout collecte une adresse de livraison dans le cadre du flux de paiement ; la commande reste dans le tableau des Commandes du projet jusqu'à ce que vous cliquiez sur Marquer comme traité, ce qui envoie à l'acheteur un avis d'expédition par email.

Stock est un plafond facultatif (0 = illimité). Le HTML envoyé est statique au moment de l'envoi, la même convention que suivent l'échéance du bloc compte à rebours et la fenêtre d'ouverture du bloc lien de réunion, donc le stock d'un produit plafonné n'est pas figé en texte. L'email intègre à la place une petite image de pastille de stock rendue côté serveur (« Il en reste 3 » / « Épuisé ») régénérée à chaque ouverture, afin qu'elle n'affiche jamais une disponibilité périmée des jours après l'envoi. Sur la vue en direct hébergée, le stock est vérifié en direct et dynamiquement : une fois que les commandes payées atteignent le plafond, Acheter maintenant est carrément remplacé par un contrôle « Épuisé » désactivé plutôt qu'un simple badge à côté d'un bouton encore cliquable. Dans tous les cas, la revérification transactionnelle du webhook au moment du paiement reste la véritable source de vérité ; le badge et le bouton désactivé ne sont que des commodités d'interface, pas le mécanisme d'application.

Si vous avez connecté une boutique Shopify ou WooCommerce, une zone de recherche Importer depuis la boutique apparaît au-dessus de ces champs, listant les produits du propre catalogue de cette boutique. Elle reste synchronisée automatiquement en arrière-plan, sans bouton séparé à presser. Choisir un produit remplit pour vous Nom, Description, Image et Prix.

Lorsque ce produit synchronisé a une page de boutique connue (le handle propre du produit Shopify, ou l'URL de page WooCommerce), l'importer bascule aussi Paiement vers Lien vers le paiement d'une boutique externe et remplit cette page comme URL de la page produit externe. Un produit importé est alors prêt à être vendu sur votre propre boutique sans plus rien à configurer. Un produit synchronisé avant que votre connexion de boutique ne récupère les URL de page reste sur Paiement MailInApp, sans rien changer sous vos pieds.

C'est une copie ponctuelle, pas un lien en direct. Chaque champ reste éditable ensuite, et le prix réellement facturé au paiement est toujours celui que le bloc contient actuellement, jamais rechargé depuis la boutique. Les champs ci-dessous fonctionnent de la même façon avec ou sans boutique connectée — importer est un raccourci, pas une obligation.

Créer un lien vers le paiement de votre propre boutique

Basculez Paiement vers Lien vers le paiement d'une boutique externe et définissez une URL de la page produit externe — votre page produit Shopify, un lien permanent de panier, une page produit WooCommerce, n'importe quel lien https:// — pour contourner entièrement le propre flux de paiement de MailInApp. Acheter maintenant se comporte alors exactement comme un bouton ou une image liée ordinaire : pas de page de confirmation, pas de /api/checkout, pas de Stripe. Le clic reste suivi (il compte donc dans la carte de chaleur des clics), et l'acheteur atterrit directement sur votre boutique pour finaliser l'achat.

Comme MailInApp ne fait jamais partie de ce paiement, rien de la machinerie du paiement MailInApp ci-dessus ne s'applique à un produit externe. Il n'y a pas de commande pending/paid, pas d'entrée dans le tableau des Commandes, pas d'action de traitement ou de remboursement, pas d'application du stock ni de badge de statut, et pas d'étape de parcours déclenchée par un achat. Suivez ce revenu comme vous suivriez n'importe quelle autre vente sur votre propre boutique. Suivi du revenu des commandes et paiements Shopify explique comment attribuer des achats faits côté boutique à l'email qui les a suscités.

Si URL de la page produit externe est laissée vide, ou n'est pas un lien https:// valide, alors que Paiement est réglé sur externe, le bloc revient discrètement à se comporter exactement comme le mode paiement MailInApp plutôt que d'afficher un bouton mort.

Réduction par produit

Une fois qu'un bloc a été renseigné via Importer depuis la boutique (il porte donc un vrai storeProductId, pas une URL saisie à la main) et que Paiement est réglé sur externe, un bascule Réduction par produit apparaît. Activez-la et définissez un Type de réduction (pourcentage ou montant fixe), une Valeur de la réduction, et une Expiration (jours après l'envoi). Juste avant que l'email de chaque destinataire ne se rende, MailInApp crée un code de réduction à usage unique sur votre boutique Shopify ou WooCommerce connectée — réservé à ce destinataire et à ce seul produit, pas à toute votre boutique — et réécrit Acheter maintenant en un lien de rédemption qui ramène l'acheteur sur la propre page de ce produit avec le code déjà appliqué. Ceci est indépendant de l'Offre de réduction au niveau du projet sur la page Envoi (voir Offre de réduction) : un projet peut utiliser l'une, l'autre, les deux, ou aucune, et chacune garde son propre délai de récupération afin que l'une ne bloque jamais l'autre. Un bloc dont le produit n'a pas été importé depuis une boutique connectée affiche une note expliquant pourquoi le bascule est masqué. Détaillé de bout en bout dans Codes de réduction produit Shopify et Codes de réduction produit WooCommerce.

Si la création échoue pour un destinataire — aucun client de boutique correspondant, un jeton à reconnecter, un incident d'API en direct — son email s'envoie tout de même ; Acheter maintenant revient simplement au lien produit simple et non réduit du bloc.

Champs configurables :

  • Nom, Description, Image — choisis depuis votre bibliothèque de médias plutôt que saisis comme une URL, ou remplis par Importer depuis la boutique ci-dessus.
  • Prix et Devise (USD, EUR ou GBP) — affichés sur la fiche dans les deux cas, même en mode externe, où ils sont purement informatifs.
  • Paiement — Paiement MailInApp (Stripe) ou Lien vers le paiement d'une boutique externe.
  • URL de la page produit externe — mode externe uniquement ; où Acheter maintenant envoie l'acheteur.
  • Réduction par produit, Type de réduction, Valeur de la réduction, Expiration (jours après l'envoi) — mode externe uniquement, et seulement une fois que le produit du bloc provient de Importer depuis la boutique.
  • Traitement — Numérique ou Physique ; mode paiement MailInApp uniquement.
  • Stock — 0 pour illimité ; mode paiement MailInApp uniquement.
  • Contenu de livraison — numérique uniquement ; le lien ou code de téléchargement envoyé après paiement ; mode paiement MailInApp uniquement.
  • Couleur d'arrière-plan, marge intérieure, bordure, rayon de bordure, et des surcharges de style de texte pour le nom et la description.

Exemples

Subject

Back in stock: the Weekender Tote

Un lancement de produit dérivé ou un tirage limité est le cas d'usage direct : plafonnez Stock à la taille du tirage et laissez la pastille de stock communiquer la rareté à mesure qu'elle s'épuise. Voir Ecommerce et lancements de produits pour le motif plus large de vendre directement depuis un envoi promotionnel plutôt que d'acheminer les clics vers une boutique séparée. Le lancement d'un cours numérique ou d'un ebook utilise le traitement Numérique afin que l'acheteur reçoive le lien de téléchargement dès que le paiement est validé, sans aucune étape manuelle de traitement. Une entreprise locale vendant un supplément physique (un article à la marque de l'entreprise, un coffret saisonnier) utilise le traitement Physique et travaille le tableau des Commandes comme une file d'attente de commandes légère, marquant chacune comme traitée à mesure qu'elle est expédiée. Utilisez Contacter l'acheteur pour ouvrir un ticket d'assistance si une adresse doit être confirmée.

À quoi ressemble l'alternative statique

<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'image de statut de stock ne se rend que lorsqu'un plafond de stock est défini ; Acheter maintenant ouvre toujours la page de confirmation plutôt que d'envoyer un paiement directement depuis l'email.

En mode de paiement externe, il n'y a ni page de confirmation ni badge de stock du tout — Acheter maintenant est un simple lien suivi au clic directement vers URL de la page produit externe :

<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>

Voir aussi