Intégrer la commande sur votre site
Vos clients commandent sans quitter votre site — un bouton qui ouvre une fenêtre, un bloc dans la page, ou un lien direct.
Une fois la commande en ligne activée, vos clients peuvent commander depuis votre propre site, sans être envoyés sur chowple.com au moment de payer. Trois façons de faire, au choix, dans Réglages → Commande, bloc Intégrer sur votre site : un bouton qui ouvre le tunnel de commande dans une fenêtre par-dessus votre page, un bloc inséré dans la page, ou le lien direct.
Le bloc Intégrer sur votre site n'apparaît qu'une fois l'interrupteur Accepter les commandes activé. Il n'y a rien à déclarer : pas de liste de domaines, pas de clé — le code fonctionne sur n'importe quel site, copié tel quel.
Choisissez l'apparence
Thème clair ou sombre, et la couleur d'accent (boutons et liens du tunnel) — pour l'accorder à votre site. Vos choix s'écrivent directement dans les codes à copier. Ils ne sont pas enregistrés : ils vivent dans le code que vous collez.
Le bouton « Commander » (fenêtre superposée)
Le format recommandé. Copiez le bloc Bouton « Commander » et collez-le là où vous voulez le bouton :
<button data-chowple-order="votre-slug">Commander</button>
<script src="https://chowple.com/embed/order.js" async></script>Un clic ouvre le tunnel par-dessus votre page (plein écran sur téléphone) ; votre client choisit, renseigne ses coordonnées, paie, et referme la fenêtre : il n'a jamais quitté votre site. Le bouton lui-même est un bouton ordinaire de votre page : stylez-le comme les autres (le script ne touche ni à son texte ni à son apparence).
Vous pouvez poser plusieurs boutons sur la même page ; le script n'est à inclure qu'une fois.
Le bloc dans la page
Pour une page « Commander » dédiée, copiez le bloc Bloc dans la page :
<div data-chowple-order="votre-slug" data-display="inline"></div>
<script src="https://chowple.com/embed/order.js" async></script>Le tunnel s'affiche directement à l'endroit du <div> et prend la hauteur de son contenu
tout seul (rien à régler). Si votre site a un en-tête collant, votre webmaster peut ajouter
[data-chowple-order] { scroll-margin-top: 80px } pour que le tunnel ne passe jamais dessous.
Le lien direct
Le bloc Lien direct donne l'adresse https://chowple.com/order/votre-slug : le même
tunnel, sur chowple.com. C'est le format d'un QR code, d'un post sur les réseaux sociaux,
ou d'un site qui refuse tout script externe (voir plus bas).
Vérifiez sur votre site
Le lien Voir le tunnel de commande, en bas du bloc, ouvre le tunnel tel que vos clients le verront (c'est le lien direct). Pour voir le rendu du bouton ou du bloc, collez le code sur une page de test de votre site : le résultat est immédiat, sans délai de mise à jour.
Le tunnel, sur votre site comme par le lien, est le vrai tunnel : une commande passée pour tester est une vraie commande, qui arrive sur votre écran Commandes (et, en paiement en ligne, débite réellement la carte). Passez une petite commande, puis annulez-la depuis l'écran Commandes.
Personnaliser sans repasser par Chowple Pro
Les attributs se posent sur le <button> ou le <div> :
| Attribut | Effet |
|---|---|
data-theme="dark" | thème sombre |
data-accent="#1d4ed8" | couleur d'accent (format #rrggbb) |
data-font="Georgia, serif" | police du tunnel |
data-keep-visible | garde le bouton ou le bloc affiché même quand la commande est désactivée |
Les textes du tunnel sont en français.
Ce que vos clients vivent dans le cadre
- Ils ne sortent jamais de votre site. Le suivi de commande, la reprise d'un paiement interrompu et le retour après une authentification bancaire (3-D Secure) restent dans la fenêtre ou le bloc. Un lien « Ouvrir le suivi dans un nouvel onglet » leur permet de garder la page de suivi sous la main.
- Fermer la fenêtre ne perd pas la commande. Une fois la commande envoyée, l'écran de confirmation met en avant le lien de suivi, et fermer la fenêtre demande confirmation.
- Aucun cookie n'est posé sur votre site par le tunnel : vous n'avez pas de bandeau de consentement à ajouter pour lui.
- Paiement en ligne : carte bancaire, avec 3-D Secure quand la banque le demande. Apple Pay et Google Pay s'ajoutent une fois le domaine de votre site déclaré (voir ci-dessous) ; les moyens de paiement qui redirigent vers une autre page (PayPal, Klarna…) ne sont pas proposés dans le cadre.
- Un discret « Powered by Chowple » figure en pied du tunnel.
Apple Pay et Google Pay sur votre site
Sur chowple.com (lien direct, QR code), Apple Pay et Google Pay sont proposés automatiquement dès que votre compte Stripe est connecté — rien à faire.
Dans le cadre sur votre site, Stripe exige en plus que le domaine de votre site soit enregistré sur votre compte Stripe. C'est facultatif : sans cette déclaration, vos clients paient par carte bancaire exactement comme avant. Pour activer les portefeuilles :
Déclarez le domaine de votre site
Dans Réglages → Commande, bloc Apple Pay et Google Pay sur votre site, saisissez le
domaine tel qu'il apparaît dans la barre d'adresse de la page qui porte le bouton ou le bloc
— par exemple www.monresto.fr. Si votre site répond aussi sans www, déclarez les deux.
Chowple enregistre le domaine sur votre compte Stripe ; Google Pay est actif dès cette
étape.
Pour Apple Pay : un fichier à placer sur votre site
Apple vérifie que le domaine vous appartient. Téléchargez le fichier de vérification depuis le
bloc (ou à l'adresse https://chowple.com/.well-known/apple-developer-merchantid-domain-association)
et faites-le servir par votre site, tel quel, sans extension, à l'adresse :
https://www.monresto.fr/.well-known/apple-developer-merchantid-domain-associationIl doit répondre en HTTP 200, sans redirection. Puis cliquez Vérifier à nouveau dans le bloc : le statut Apple Pay passe à Actif. Si Stripe indique un motif (fichier introuvable, redirection…), il s'affiche sous le domaine.
Apple Pay dans le cadre demande Safari 17 ou iOS 17 au minimum, et n'apparaît que sur un appareil qui a une carte dans Wallet ; Google Pay, dans Chrome, avec une carte enregistrée dans le compte Google. Sinon vos clients voient simplement la saisie de carte.
Si votre site envoie un en-tête Permissions-Policy qui restreint payment, ajoutez-y
https://chowple.com — sinon le navigateur refuse au cadre l'accès aux portefeuilles :
Permissions-Policy: payment=(self "https://chowple.com")Si vous placez le cadre vous-même sans le script (voir ci-dessous), ajoutez allow="payment"
à votre <iframe>.
Si le bouton ne fait rien : la CSP de votre site
Certains sites bloquent les scripts externes (règle de sécurité CSP — fréquent chez Wix, Squarespace ou sur un site durci). Deux solutions :
-
soit votre webmaster ajoute à la CSP du site :
script-src https://chowple.com; frame-src https://chowple.com;La première autorise le script ; la seconde, le cadre du tunnel. Le paiement (Stripe) se charge à l'intérieur de ce cadre : rien d'autre à autoriser.
-
soit vous placez le cadre vous-même, sans script — l'iframe seule suffit :
<iframe src="https://chowple.com/embed/order/votre-slug?display=inline" style="width:100%;border:0" allow="payment" height="900" title="Commander"></iframe>Sans le script, la hauteur ne s'ajuste plus toute seule : réglez
heightvous-même. Ajoutez&theme=darkou&accent=%23rrggbbà l'adresse pour l'apparence.
Si rien de tout cela ne passe, il reste le lien direct, qui ne demande aucune autorisation.
Vous pouvez désactiver la commande à tout moment (Accepter les commandes) : sur votre
site, le bouton et le bloc disparaissent d'eux-mêmes dans la minute, sans rien changer
à votre page. Ils réapparaissent de la même façon à la réactivation — vos codes
d'intégration ne changent pas. Pour garder le bouton visible malgré tout (le tunnel affiche
alors que la commande est indisponible), ajoutez-lui l'attribut data-keep-visible. Le lien
direct, lui, reste toujours accessible.
Cet article vous a-t-il aidé ?