Paiements dans CrocoVibe : vos apps encaissent avec votre catalogue
Vos apps CrocoVibe gagnent en autonomie et en simplicité : elles encaissent des paiements avec les produits de votre catalogue, sans code de paiement à écrire.
Vous connectez vos produits, vous demandez à l'agent d'« ajouter les paiements », et la vitrine arrive avec son tunnel de paiement. Vos produits, commandes, fournisseurs de paiement et abonnements déjà configurés dans CrocoClick servent de base.
Aucune configuration supplémentaire n'est nécessaire.
🧭 Qu'est-ce qui change ?
- 💳 Un nouvel onglet Paiements apparaît dans les réglages du projet (Plus > Paiements).
- 🏷️ Chaque produit a son mode de tarification : prix fixe, variations choisies ou catalogue complet du produit.
- 🛒 L'agent crée la vitrine et le tunnel de paiement dès que vous demandez « ajouter les paiements ».
- 🔒 Le checkout est hébergé : les données de carte ne passent jamais par le code de votre app.
- 🅿️ PayPal (paiement express), codes promo et abonnements fonctionnent dans ce checkout.
- 🎯 Les upsells post-achat se valident en un clic, sans que l'acheteur ressaisisse sa carte.
- 🖼️ Les pages produits affichent listes et fiches détaillées tirées de votre catalogue, avec miniatures et descriptions mises en forme.
⚙️ Comment ça fonctionne
Les réglages de l'onglet Paiements
Dans Plus > Paiements, vous activez les paiements et basculez du mode test au mode live.
Vous choisissez aussi les produits du catalogue que l'app peut vendre. Seuls les produits et prix autorisés s'affichent et se facturent.
Chaque produit prend l'un de ces trois modes de tarification :
- Prix fixe : un seul prix, celui que vous désignez.
- Variations sélectionnées : seulement les tailles, niveaux ou forfaits que vous cochez.
- Catalogue complet du produit : toutes les variations existantes.
L'agent monte le tunnel de paiement
Après votre demande, l'agent affiche une carte. Vous l'approuvez pour autoriser la connexion, puis il crée la vitrine et le checkout.
Le code de paiement appartient à la plateforme. Si vous le modifiez, il est restauré au tour suivant.
Un checkout hébergé
La carte est saisie et traitée sur le checkout hébergé. PayPal en paiement express est pris en charge. Pour accepter les cartes, pensez à connecter Stripe à CrocoClick.
Les coupons de réduction fonctionnent aussi : une commande entièrement remisée se valide sans carte.
Les abonnements marchent, paniers multiples et upsells compris. Le checkout reprend les couleurs de votre site, et une protection anti-bot s'applique à chaque achat.
Les upsells en un clic
Après un achat réussi, une page d'offre peut s'afficher. L'acheteur accepte sans retaper sa carte.
Ça marche avec les cartes enregistrées de ces fournisseurs :
- Stripe (3D Secure pris en charge)
- Square
- Authorize.net
- NMI
- Adyen
- Mercado Pago
Les autres moyens de paiement passent par le formulaire classique. Un upsell n'est facturé qu'après le paiement de la commande initiale, et une seule fois par commande, même si l'acheteur ouvre plusieurs onglets.
Attention : les paiements ne fonctionnent qu'avec les apps construites sur TanStack Start. Les autres types de projets ne voient pas encore l'option.
🛠️ Comment l'utiliser
- Vérifiez que votre projet est construit sur TanStack Start.
- Pour un projet React existant, ouvrez Paramètres du projet > Migrer vers SSR. La migration crée une copie mise à jour, le projet d'origine reste en ligne et inchangé. Testez la copie avant de la publier.
- Ouvrez Plus > Paiements dans votre projet.
- Activez les paiements et démarrez en mode test.
- Sélectionnez les produits à vendre et réglez leur mode de tarification.
- Dans le chat de l'agent, écrivez « ajouter les paiements », puis approuvez la carte de connexion.
- Faites un achat d'essai, puis passez en mode live.
- Si vous voulez une offre après achat, demandez à l'agent d'ajouter une page d'upsell.
Aucun produit dans votre catalogue ? Le guide Créer et paramétrer un produit de paiement dans CrocoClick vous accompagne.
Pourquoi c'est important ?
- ✅ Vos apps vendent avec le catalogue que vous avez déjà, sans second système à tenir à jour.
- ✅ Les données de carte restent hors de votre code.
- ✅ Les upsells en un clic ajoutent du chiffre d'affaires sans friction pour l'acheteur.
- ✅ La copie de migration vous laisse tout tester avant de toucher à votre projet en ligne.
Une app CrocoVibe sait maintenant vendre, pas seulement présenter. Ouvrez Plus > Paiements dans votre projet et lancez un premier achat en mode test.