Aide

Configurer la boutique

Toutes les étapes pour ouvrir votre boutique, dans l'ordre : d'abord dans votre compte Stripe, où arrivent les paiements, puis dans votre administration Tilefolio. Comptez une demi-heure environ, plus le temps que Stripe vérifie votre compte. Seul le propriétaire du site peut le faire : les éditeurs ne voient pas ces réglages.

Avant de commencer

• Votre site est abonné : la boutique s'ouvre après le premier paiement, pas pendant l'essai gratuit. Vous pouvez tout préparer (Stripe, réglages, produits) pendant l'essai.
• Gardez deux onglets ouverts : votre tableau de bord Stripe (dashboard.stripe.com) et votre administration. Vous copierez trois choses de l'un à l'autre : une clé (Stripe → Tilefolio), l'adresse du webhook (Tilefolio → Stripe) et le secret de signature du webhook (Stripe → Tilefolio).
• Les menus de Stripe sont nommés ci-dessous comme Stripe les affiche en français ; leur place peut un peu changer quand Stripe modifie son tableau de bord.

1. Dans Stripe : le compte

1. Créez un compte sur stripe.com, ou utilisez le vôtre. Choisissez le pays où vous, ou votre entreprise, êtes établi : il fixe la monnaie de vos versements et les frais de Stripe.
2. Activez les paiements : Stripe demande ce que vous vendez, votre identité, votre adresse et le compte bancaire où verser l'argent. Tant que le compte n'est pas activé, il ne prend que des paiements de test.
3. Dans Paramètres > Entreprise > Informations publiques, vérifiez le nom public de l'entreprise, l'e-mail d'assistance et le libellé de relevé bancaire (ce que l'acheteur voit sur son relevé de carte) : ils s'affichent sur la page de paiement et les reçus.
4. Dans Paramètres > Image de marque (facultatif) : votre logo, votre icône et vos couleurs, pour la page de paiement et les reçus de Stripe.
5. Dans Paramètres > Moyens de paiement : les façons de payer proposées. Les cartes sont actives ; activez Apple Pay, Google Pay, et TWINT si vous vendez en CHF. La page de paiement propose ceux qui conviennent à l'acheteur et à la monnaie.
6. Dans Paramètres > E-mails clients : activez Paiements réussis, pour que chaque acheteur reçoive un reçu. Tilefolio n'envoie aucun e-mail à l'acheteur.

2. Dans Stripe : la clé restreinte

La clé permet à votre site de demander à Stripe une page de paiement. Une clé restreinte ne peut faire que ce dont la boutique a besoin, contrairement à la clé secrète, qui peut tout faire sur votre compte.

1. Ouvrez Développeurs > Clés API, puis Créer une clé restreinte. Si Stripe demande comment vous allez l'utiliser, choisissez de régler ses autorisations vous-même.
2. Donnez-lui un nom, par exemple « Tilefolio ».
3. Laissez toutes les autorisations sur Aucune, sauf :
   • Checkout Sessions : Écriture (pour créer la page de paiement, et lire ses lignes une fois payée) ;
   • Produits et Prix : Lecture (pour lire les produits de chaque commande payée).
4. Cliquez sur Créer une clé, confirmez avec le code que Stripe vous envoie, puis copiez la clé : elle commence par rk_live_. Stripe ne l'affiche qu'une fois : si vous la perdez, créez-en une autre.

Une clé secrète (sk_live_…) fonctionne aussi, mais donne un accès complet à votre compte Stripe : préférez la clé restreinte.

3. Dans Tilefolio : coller la clé et copier l'adresse du webhook

1. Dans votre administration, sur l'accueil, cliquez sur Modifier mon site (cela ouvre les Réglages du site).
2. Ouvrez le panneau Boutique du formulaire et collez la clé dans Stripe : clé secrète, puis cliquez sur Enregistrer. La clé reste dans l'administration, jamais sur le site ; les espaces copiés par erreur sont retirés.
3. À droite du formulaire, l'encadré Boutique montre l'adresse du webhook Stripe de votre site, de la forme https://…/api/shop/stripe-webhook/…. Cliquez sur Copier.

Cette adresse est propre à votre site : elle ne change pas si vous ajoutez plus tard un nom de domaine.

4. Dans Stripe : le webhook

Le webhook est la façon dont Stripe prévient votre site qu'une commande est payée : sans lui, les paiements passent mais aucune commande n'apparaît dans votre administration et le stock ne baisse pas.

1. Ouvrez Développeurs > Webhooks, puis Ajouter une destination.
2. Événements provenant de : Votre compte. Laissez la version d'API que Stripe propose.
3. Sélectionnez exactement ces deux événements (tapez leur nom dans le champ de recherche) :
   • checkout.session.completed : une page de paiement a été payée ;
   • checkout.session.async_payment_succeeded : un paiement qui arrive plus tard (prélèvement…) a abouti.
   Votre site ignore les autres événements : inutile de les ajouter.
4. Type de destination : Endpoint de webhook. Dans URL de l'endpoint, collez l'adresse copiée de l'encadré Boutique, puis créez la destination.
5. Sur la page de la destination, affichez son secret de signature et copiez-le : il commence par whsec_.

5. Dans Tilefolio : les réglages de la boutique

De retour dans les Réglages du site :

1. Stripe : secret du webhook : collez le secret de signature (whsec_…).
2. Boutique : monnaie : CHF, EUR, USD (dollar) ou GBP (livre). C'est la monnaie de tous vos prix et frais de port ; l'acheteur paie dans cette monnaie.
3. Boutique : pays de livraison : où vous livrez, en codes de pays à deux lettres séparés par des virgules (CH, FR, DE, US…), ou EU pour toute l'Union européenne. Chacun peut être suivi de ses propres frais de port. Par exemple CH, EU 15, FR 12, US 25 : la France à 12, le reste de l'UE à 15, les États-Unis à 25, la Suisse aux frais de port ci-dessous. Un pays écrit seul l'emporte sur EU. Il faut au moins un pays. Dans le panier, l'acheteur choisit son pays, et la page de Stripe n'accepte qu'une adresse dans ce pays.
4. Boutique : frais de port : ceux des pays qui n'ont pas les leurs, ajoutés une fois à chaque commande quelle que soit sa taille. 0 ou vide : livraison offerte.
5. Boutique : livraison offerte dès (facultatif) : à partir de ce montant d'achats, la livraison est offerte partout. Vide : jamais.
6. Boutique : e-mail de contact (facultatif) : affiché dans le panier, pour qu'on puisse vous écrire avant d'acheter. Vide : le panier renvoie à votre page Contact.
7. Cliquez sur Enregistrer. Si une valeur est fausse, l'enregistrement est refusé avec un message qui dit laquelle : une clé qui ne commence pas par rk_live_, rk_test_, sk_live_ ou sk_test_, un secret qui ne commence pas par whsec_, ou un code de pays inconnu.

Et si vous le souhaitez : Menu : boutique renomme le menu de la boutique (« Boutique » par défaut), et Page d'accueil réglée sur products ouvre votre site sur la boutique (voir Pages, menus et textes).

6. Ajouter vos produits

Créez vos tuiles produit, avec leur prix, leur stock, leurs photos et leur description : voir Ajouter un produit. Avant l'ouverture de la boutique, elles s'affichent déjà sur votre site avec leur prix, et leur bouton indique « Achat désactivé ».

7. Nous demander d'ouvrir la boutique

1. Écrivez à contact@tilefolio.com depuis l'adresse e-mail de votre compte, avec l'adresse de votre site et ce que vous souhaitez vendre.
2. Nous vérifions que la clé, le secret du webhook et au moins un pays de livraison sont réglés, et ouvrons la boutique. Le panier apparaît alors en haut de votre site.

Une fois la boutique ouverte, la clé, le secret du webhook et les pays de livraison peuvent être changés mais pas vidés. Pour fermer la boutique, écrivez-nous : le panier et les tuiles produit disparaissent du site, les commandes passées restent dans l'administration.

8. Vérifier avec une première commande

1. Sur votre site, mettez un produit bon marché dans le panier, choisissez votre pays et payez.
2. Après le paiement, vous arrivez sur la page de remerciement de votre site et Stripe vous envoie le reçu par e-mail.
3. Dans votre administration, la commande apparaît dans Commandes en quelques secondes, et le stock du produit a baissé d'une unité.
4. Remboursez-la depuis Stripe (Paiements, retrouvez le paiement, Rembourser), puis remontez le stock dans le produit.

L'essayer d'abord avec le mode test de Stripe

Pour essayer la boutique sans argent réel, faites les étapes 2 et 4 dans le mode test de Stripe (un environnement de test) : la clé commence alors par rk_test_, et le webhook de test a son propre secret de signature. Précisez-le dans votre e-mail. Payez avec la carte de test 4242 4242 4242 4242, une date future et n'importe quel code. Quand tout fonctionne, remplacez la clé et le secret du webhook par ceux du mode réel : une clé et un secret de modes différents ne fonctionnent pas ensemble.

Si quelque chose ne marche pas

Toujours bloqué ? Écrivez-nous à contact@tilefolio.com, sans jamais envoyer votre clé ni vos secrets par e-mail.