> ## Documentation Index > Fetch the complete documentation index at: https://docs.taap.it/llms.txt > Use this file to discover all available pages before exploring further. # Stripe > Suivi automatique des conversions pour les paiements Stripe import { Steps, Step } from "fumadocs-ui/components/steps"; L'intégration Stripe de Taapit suit automatiquement tous vos paiements Stripe comme des conversions de vente. Installez le SDK, connectez l'app, et passez l'ID de suivi à Stripe. ## Comment ça marche Taapit Visual Stripe integration ## Prérequis **Important** : Pour que le suivi des conversions fonctionne, les utilisateurs doivent arriver sur votre site via un **deeplink Taapit**. C'est ainsi que l'ID de suivi (`ta_tid`) est généré et transmis à votre site. Avant de commencer : 1. **Créez un deeplink Taapit** pointant vers votre site ou landing page 2. **Activez le suivi des conversions** sur votre lien : * Allez dans les paramètres de votre lien dans le dashboard Taapit * Activez **Suivi des conversions** 3. **Configurez l'intégration Stripe** dans [Paramètres → Conversion](https://taap.it/dashboard/settings/conversion) et sélectionnez **Intégration Stripe** ```mermaid theme={null} flowchart LR A[L'utilisateur clique sur le lien Taapit] --> B[Arrive sur votre site avec ta_tid] B --> C[Le SDK stocke ta_tid dans un cookie] C --> D[L'utilisateur effectue un achat] D --> E[ta_tid envoyé à Stripe] E --> F[Taapit track la conversion] ``` ## Installation D'abord, ajoutez le SDK Taapit à votre site web pour capturer l'ID de suivi `ta_tid` : ```bash theme={null} npm install taapit-sdk ``` Puis ajoutez le composant Analytics à votre layout racine : ```tsx app/layout.tsx theme={null} import { Analytics } from 'taapit-sdk/react'; export default function RootLayout({ children }) { return ( {children} ); } ``` Ajoutez ce script dans votre `` HTML ou avant `` : ```html theme={null} ``` Cette étape est **obligatoire**. Sans le SDK, le `ta_tid` ne sera pas capturé et les conversions ne pourront pas être suivies. 1. Allez sur le [Stripe App Marketplace](https://marketplace.stripe.com/) 2. Recherchez "Taapit Conversion" 3. Cliquez sur **Installer** Ou installez directement depuis votre dashboard Taapit : 1. Allez dans **Paramètres** → **Intégrations** → **Stripe** 2. Cliquez sur **Installer l'intégration Stripe** Après avoir installé l'app dans Stripe : **1. Ouvrez l'app Taapit dans votre dashboard Stripe et cliquez sur "Connect workspace"** App Stripe Taapit - Bouton Connect workspace **2. Autorisez la connexion à votre workspace Taapit** Vous serez redirigé vers la page de consentement Taapit. Sélectionnez le workspace que vous souhaitez connecter et cliquez sur **Autoriser**. Page de consentement Taapit **3. Vérifiez que le workspace est connecté** Une fois autorisé, vous verrez votre workspace connecté dans l'app Stripe. App Stripe Taapit - Workspace connecté Passez le `ta_tid` à Stripe lors de la création des customers, sessions de checkout ou payment intents. ### 1. Frontend : Récupérer l'ID de suivi D'abord, récupérez l'ID de suivi depuis votre frontend pour le passer à votre API : ```typescript theme={null} // Utiliser l'objet global taapit (balise script) const trackingId = taapit.getTrackingId(); ``` ```tsx theme={null} import { useTaapitAnalytics } from 'taapit-sdk/react'; function CheckoutButton() { const { trackingId } = useTaapitAnalytics(); const handleCheckout = async () => { const response = await fetch('/api/create-checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ priceId: 'price_xxx', trackingId, }), }); const { url } = await response.json(); window.location.href = url; }; return ; } ``` ```typescript theme={null} // Lire directement depuis le cookie const trackingId = document.cookie .split('; ') .find(row => row.startsWith('ta_tid=')) ?.split('=')[1]; ``` L'ID de suivi peut être récupéré depuis : 1. **SDK Taapit** - `taapit.getTrackingId()` ou hook `useTaapitAnalytics()` 2. **Cookie** (`ta_tid`) - automatiquement défini par le SDK Le backend devrait vérifier le body et les cookies pour une compatibilité maximale. *** ### 2. Tracker les Ventes : Créer une Session de Checkout Quand un utilisateur effectue un achat, passez l'ID de suivi dans les metadata de la session checkout. **Quand `taapitTrackingId` est-il requis pour les Checkout Sessions ?** * Si le customer a **déjà été tracké via un événement lead** (avec `taapitCustomerExternalId`), le `taapitTrackingId` est **optionnel** - vous n'avez besoin que du `taapitCustomerExternalId` pour lier la vente. * Si c'est un **nouveau customer** (pas de lead préalable), `taapitTrackingId` est **requis** pour attribuer la vente. ```typescript app/api/create-checkout/route.ts theme={null} import { NextRequest } from 'next/server'; import Stripe from 'stripe'; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); export async function POST(request: NextRequest) { const body = await request.json(); const { priceId, customerExternalId } = body; // Obtenir l'ID de suivi depuis le cookie OU depuis le body // Optionnel si le customer a déjà été tracké via lead const trackingId = request.cookies.get('ta_tid')?.value || body.trackingId || ''; const session = await stripe.checkout.sessions.create({ mode: 'subscription', line_items: [{ price: priceId, quantity: 1 }], success_url: 'https://votresite.com/success', cancel_url: 'https://votresite.com/cancel', // Passer l'ID de suivi et l'ID client dans les metadata metadata: { taapitTrackingId: trackingId, // Optionnel si le customer existe taapitCustomerExternalId: customerExternalId, // Requis }, // Aussi dans subscription_data pour les abonnements subscription_data: { metadata: { taapitTrackingId: trackingId, taapitCustomerExternalId: customerExternalId, }, }, }); return Response.json({ url: session.url }); } ``` *** ### 3. (Optionnel) Tracker les Leads : Créer un Customer Stripe Si vous voulez tracker les leads séparément des ventes, créez un customer Stripe avec l'ID de suivi quand un utilisateur s'inscrit. Taapit écoute le webhook `customer.created`. ```typescript app/api/stripe/create-customer/route.ts theme={null} import { NextRequest } from 'next/server'; import Stripe from 'stripe'; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); export async function POST(request: NextRequest) { const body = await request.json(); const { email, name, externalId } = body; // Obtenir l'ID de suivi depuis le cookie OU depuis le body const trackingId = request.cookies.get('ta_tid')?.value || body.trackingId || ''; // Créer un customer Stripe avec les metadata Taapit const customer = await stripe.customers.create({ email, name, metadata: { taapitTrackingId: trackingId, taapitCustomerExternalId: externalId, // Votre ID utilisateur interne }, }); return Response.json({ customerId: customer.id }); } ``` Cette étape est **optionnelle**. Utilisez-la si vous voulez tracker les inscriptions utilisateurs comme des leads avant qu'ils n'effectuent un achat. *** ### 4. (Alternative) Utiliser les Stripe Payment Links Si vous utilisez les [Stripe Payment Links](https://stripe.com/docs/payment-links), vous pouvez tracker les ventes automatiquement sans écrire de code backend. Avec les Payment Links, seuls les **événements de vente** sont trackés. Les webhooks lead ne sont pas créés. **Comment configurer :** 1. Obtenez votre URL Stripe Payment Link (ex: `https://buy.stripe.com/xxx`) 2. Ajoutez `?taapit_client_reference_id=1` à l'URL : ``` https://buy.stripe.com/xxx?taapit_client_reference_id=1 ``` 3. Raccourcissez cette URL avec Taapit **Comment ça marche :** Quand un utilisateur clique sur votre deeplink Taapit : 1. Remplace `taapit_client_reference_id=1` par `client_reference_id=taapit_tid_{trackingId}` 2. Stripe reçoit l'ID de suivi comme `client_reference_id` 3. Quand le checkout est complété, Taapit attribue la vente au clic original 1. Allez dans **Paramètres** → **Intégrations** → **Stripe** dans Taapit 2. Vous devriez voir le statut **Connecté** 3. Effectuez un paiement test 4. Vérifiez l'onglet **Analytics** pour la conversion ## Événements suivis | Événement Stripe | Événement Taapit | Description | | ---------------------------- | ---------------- | ------------------------------------------- | | `customer.created` | Lead | Customer créé avec les metadata de tracking | | `checkout.session.completed` | Vente | Session de checkout complétée | | `invoice.paid` | Vente | Facture d'abonnement payée | ## Champs de metadata L'intégration recherche ces champs de metadata sur les objets Stripe : | Champ | Requis | Description | | -------------------------- | --------------- | ---------------------------------- | | `taapitTrackingId` | Voir ci-dessous | L'ID de suivi (`ta_tid` du cookie) | | `taapitCustomerExternalId` | Oui | Votre ID utilisateur interne | Utilisez `taapitTrackingId` (pas `ta_tid`) dans les metadata Stripe. Le `ta_tid` est le nom du cookie, tandis que `taapitTrackingId` est le nom du champ metadata. **Quand `taapitTrackingId` est-il requis ?** - **Événements lead** (`customer.created`) : `taapitTrackingId` est **toujours requis** - **Événements vente** (`checkout.session.completed`, `invoice.paid`) : - Si le customer a **déjà été tracké via un événement lead** (avec `taapitCustomerExternalId`), le `taapitTrackingId` est **optionnel** - Si c'est un **nouveau customer** (pas de lead préalable), `taapitTrackingId` est **requis** pour attribuer la vente ## Dépannage 1. **Vérifiez les metadata** : Assurez-vous que `taapitTrackingId` est dans vos metadata Stripe 2. **Vérifiez la livraison des webhooks** : Dans Stripe → Développeurs → Webhooks 3. **Vérifiez la connexion** : Paramètres → Intégrations → Stripe doit afficher "Connecté" Si l'ID de suivi est vide, l'utilisateur : - N'est pas venu d'un lien Taapit * A les cookies bloqués - Le cookie n'a pas été passé au checkout C'est normal pour le trafic direct/organique. ## Sécurité | Permission | Objectif | | ----------------------- | --------------------------------------- | | `customer_read` | Lire les informations client | | `subscription_read` | Lire les données d'abonnement | | `invoice_read` | Lire les montants des factures | | `checkout_session_read` | Lire les metadata des sessions checkout | | `webhook_read` | Recevoir les événements de paiement | ## FAQ Oui, vous avez besoin du SDK Taapit sur votre site pour capturer le cookie `ta_tid`. L'app Stripe ne gère que le suivi des paiements. Chaque événement `invoice.paid` déclenche une vente. L'ID de suivi du checkout original est utilisé pour l'attribution. Actuellement, les remboursements ne sont pas automatiquement suivis. Nous travaillons sur cette fonctionnalité. ## Prochaines étapes Configurez le suivi automatique pour les boutiques Shopify. Pour les flux de paiement personnalisés.