> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajouter des paiements avec RevenueCat

> Facturez du contenu aux joueurs dans votre application avec RevenueCat.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const subscriptionPrompt = "Add a monthly subscription to PixelGames that unlocks Snake, Racer, and Pinball.";
export const paywallPrompt = "Show the four unlockable games as cover art on the PixelGames paywall.";

## Qu'est-ce que RevenueCat

Dans PixelGames, Snake, Racer et Pinball sont marqués comme bientôt disponibles. RevenueCat permet à votre application de vendre un abonnement qui les débloque, sans avoir à connecter directement les systèmes d'achat d'Apple et de Google : demandez à Agent d'ajouter un abonnement, connectez RevenueCat, et il s'occupe du reste.

<Warning>
  Apple et Google exigent tous les deux l'utilisation de leur propre système d'achat intégré pour ce type de contenu numérique, et prennent tous les deux une commission sur la vente. Vous ne pouvez pas le contourner avec un lien de paiement externe.
</Warning>

## Avant de commencer

* Un projet Replit configuré comme application mobile.
* Un compte RevenueCat, seuls un e-mail et un mot de passe sont nécessaires, aucun compte bancaire n'est requis pour l'instant.

## Commencer

<Steps>
  <Step title="Demandez à Agent d'ajouter un abonnement">
    <AiPrompt>
      {subscriptionPrompt}
    </AiPrompt>
  </Step>

  <Step title="Connectez votre compte RevenueCat">
    Agent vous invite à connecter RevenueCat, sélectionnez **Connect RevenueCat** pour commencer.

    <Frame caption="Replit demandant de connecter RevenueCat après avoir détecté la fonctionnalité.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/revenuecat.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=880a63197ea3bcc5b1c7ec064674e44f" alt="Fenêtre de configuration Connecter RevenueCat de Replit" data-path="images/pixelgames/mobile/revenuecat.png" width="964" height="297" data-path="images/pixelgames/mobile/revenuecat.png" />
    </Frame>
  </Step>

  <Step title="Autoriser Replit">
    Sur la page d'autorisation de RevenueCat, accordez l'accès **Read & Write**.
  </Step>

  <Step title="Agent construit l'abonnement">
    Agent crée le projet RevenueCat, configure le produit et le droit, et câble le flux d'achat dans votre application.
  </Step>
</Steps>

## Tester les abonnements

Les previews Replit utilisent le mode test de RevenueCat. Tester un achat dans Expo Go affiche une boîte de dialogue d'achat de test, sans frais réels. Une fois qu'Apple approuve votre application pour l'App Store, les achats utilisent de l'argent réel, vérifiez donc bien le prix avant de soumettre.

<Frame caption="Le paywall dans PixelGames, et la boîte de dialogue d'achat de test affichée dans Expo Go.">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/paywall.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=6575d5687f78a783861b52044eb21c14" alt="Écran de paywall PixelGames à côté de la boîte de dialogue d'achat de test de RevenueCat" data-path="images/pixelgames/mobile/paywall.png" width="2274" height="1470" data-path="images/pixelgames/mobile/paywall.png" />
</Frame>

La boîte de dialogue d'achat de test ci-dessus n'est pas ce que les joueurs voient réellement. Expo Go est une application partagée qui prévisualise chaque projet Expo, elle ne peut donc pas résoudre la véritable identité RevenueCat de votre application et affiche à la place un flux de test générique. Une fois que vous avez un vrai build ou que votre application est publiée, le paywall lui-même est l'écran propre à RevenueCat, servi à distance plutôt que codé en dur dans votre application.

## Personnaliser le paywall

Comme le paywall est servi à distance, vous pouvez changer son design sans nouveau build, de deux façons :

**Demandez à Agent**

<AiPrompt>
  {paywallPrompt}
</AiPrompt>

**Ou modifiez-le manuellement**

<Steps>
  <Step title="Ouvrez l'éditeur de paywall">
    Dans votre tableau de bord RevenueCat, allez dans **Paywalls** et créez ou modifiez-en un avec leur éditeur visuel : couleurs, image de fond, texte du titre, style de bouton, tout ce qui correspond à l'apparence de votre application.

    <Frame caption="L'éditeur visuel de paywall de RevenueCat.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/customize-paywall.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=fca147e23db57f4408ad00bec8eab2d1" alt="Éditeur de paywall de RevenueCat affichant la mise en page et les propriétés du paywall premium de PixelGames" data-path="images/pixelgames/mobile/customize-paywall.png" width="1920" height="991" data-path="images/pixelgames/mobile/customize-paywall.png" />
    </Frame>
  </Step>

  <Step title="Rattachez-le à votre offre">
    Connectez le paywall à votre offre actuelle.
  </Step>

  <Step title="Les changements sont déployés à distance">
    Le nouveau design apparaît la prochaine fois que le paywall s'ouvre, sur TestFlight ou après publication, sans mise à jour de l'App Store requise.
  </Step>
</Steps>

<Frame caption="Le paywall personnalisé en direct sur TestFlight, avec la véritable confirmation d'achat système.">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/paywall-testflight.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=fc8a548efa85548a37065c4ff41f54a6" alt="Paywall PixelGames sur TestFlight à côté de la véritable feuille de confirmation d'achat TestFlight" data-path="images/pixelgames/mobile/paywall-testflight.png" width="2274" height="1470" data-path="images/pixelgames/mobile/paywall-testflight.png" />
</Frame>

C'est ce que les joueurs voient réellement : une véritable confirmation d'achat au lieu de la boîte de dialogue de test d'Expo Go, et votre design personnalisé au lieu de la mise en page par défaut.

## Synchroniser avec App Store Connect

La synchronisation vous permet de créer ou modifier un abonnement ou un produit intégré directement depuis RevenueCat ou Replit Agent.

Avant de pouvoir connecter App Store Connect, trois éléments doivent être en place :

* **Inscrivez-vous** au Apple Developer Program, si vous ne l'avez pas déjà fait. Il implique des frais d'adhésion annuels.
* **Soumettez** votre application à l'App Store, consultez [téléverser votre application](/build/mobile-upload-ios) si vous ne l'avez pas encore fait, RevenueCat a besoin d'une fiche d'application pour synchroniser les produits.
* **Connectez** un compte bancaire et **signez** l'Accord sur les applications payantes d'Apple, les deux se font dans App Store Connect, Apple ne traitera aucun paiement sans cela.

<Steps>
  <Step title="Démarrez la synchronisation depuis Replit">
    Dans Replit, ouvrez **Publishing → Manage**, et sélectionnez **Sync RevenueCat to App Store Connect**. Ce bouton apparaît une fois votre application soumise à TestFlight.

    <Frame caption="Démarrage de la synchronisation depuis le panneau Publishing de Replit.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step1.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=db78d8d81b07f88f65b5e0d689ed1427" alt="Panneau Publishing de Replit avec l'onglet Manage ouvert et le bouton Sync RevenueCat to App Store Connect" data-path="images/pixelgames/mobile/rev-co-step1.png" width="997" height="420" data-path="images/pixelgames/mobile/rev-co-step1.png" />
    </Frame>
  </Step>

  <Step title="Ouvrez la page API App Store Connect">
    Dans App Store Connect, allez dans **Users and Access → Integrations → App Store Connect API**
    ([ouvrez-la directement](https://appstoreconnect.apple.com/access/integrations/api)) et
    sélectionnez le **+** pour ajouter une nouvelle clé.

    <Frame caption="Navigation vers les clés API App Store Connect.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step2.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=3ee0f35c3bf64afebaeb6c4f64a172ba" alt="Page Users and Access d'App Store Connect, onglet Integrations, section App Store Connect API" data-path="images/pixelgames/mobile/rev-co-step2.png" width="1466" height="657" data-path="images/pixelgames/mobile/rev-co-step2.png" />
    </Frame>
  </Step>

  <Step title="Générez la clé">
    Nommez-la (par exemple « RevenueCat »), réglez **Access** sur **App Manager**, et sélectionnez
    **Generate**.

    <Frame caption="Génération d'une clé API App Store Connect pour RevenueCat.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step3.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=5711ebfa2d1bab0e108e944598bc5da9" alt="Fenêtre Generate API Key avec le champ de nom et l'accès App Manager sélectionné" data-path="images/pixelgames/mobile/rev-co-step3.png" width="1453" height="436" data-path="images/pixelgames/mobile/rev-co-step3.png" />
    </Frame>
  </Step>

  <Step title="Copiez les informations de la clé">
    Copiez le **Key ID** et téléchargez le fichier de clé.

    <Frame caption="Copie du Key ID et téléchargement de la clé API App Store Connect.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step4.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=2d1f05ed614a71e51d1425ee4d7b6c43" alt="Liste des clés API App Store Connect avec la nouvelle clé RevenueCat, actions Copy et Download" data-path="images/pixelgames/mobile/rev-co-step4.png" width="1522" height="695" data-path="images/pixelgames/mobile/rev-co-step4.png" />
    </Frame>
  </Step>

  <Step title="Ajoutez-la à Replit">
    De retour dans la fenêtre de synchronisation de Replit (étape 1 sur 2), téléversez le fichier
    de clé, collez le **Key ID** et l'**Issuer ID**, puis sélectionnez **Continue**.

    <Frame caption="Saisie de la clé API App Store Connect dans Replit.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step5.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=5a0cdf7dbf416d708b5e8c3a6b691f21" alt="Fenêtre Replit étape 1 sur 2, téléversement de la clé API App Store Connect et saisie de ses informations" data-path="images/pixelgames/mobile/rev-co-step5.png" width="995" height="591" data-path="images/pixelgames/mobile/rev-co-step5.png" />
    </Frame>
  </Step>

  <Step title="Répétez pour la clé In-App Purchase">
    Même emplacement dans App Store Connect, l'onglet **In-App Purchase** cette fois
    ([ouvrez-le directement](https://appstoreconnect.apple.com/access/integrations/api/subs)),
    générez une autre clé et copiez ses informations.

    <Frame caption="Génération et copie d'une clé API In-App Purchase.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step6.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=9ca61ec4c150cb443dc4b0b02531bd6d" alt="Liste des clés In-App Purchase d'App Store Connect avec les actions Download et Copy" data-path="images/pixelgames/mobile/rev-co-step6.png" width="1547" height="593" data-path="images/pixelgames/mobile/rev-co-step6.png" />
    </Frame>
  </Step>

  <Step title="Ajoutez-la à Replit">
    De retour dans la fenêtre de synchronisation de Replit (étape 2 sur 2), téléversez aussi ce
    fichier de clé, collez son **Key ID** et son **Issuer ID**, puis sélectionnez **Continue**.

    <Frame caption="Saisie de la clé API In-App Purchase dans Replit.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step7.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=d6006070e16940bc3c0db0d09557dd0c" alt="Fenêtre Replit étape 2 sur 2, téléversement de la clé API In-App Purchase et saisie de ses informations" data-path="images/pixelgames/mobile/rev-co-step7.png" width="997" height="591" data-path="images/pixelgames/mobile/rev-co-step7.png" />
    </Frame>
  </Step>

  <Step title="Confirmez et synchronisez">
    Une fois synchronisé, vous pouvez modifier manuellement le prix de votre produit à tout
    moment depuis le même panneau **Publishing → Manage** dans Replit.

    <Frame caption="Confirmation des produits avant la synchronisation avec App Store Connect.">
      <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/rev-co-step8.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=0748e90c6246378f73f129cbc1f8d0e5" alt="Écran Products to Sync de Replit avec l'abonnement mensuel premium prêt à synchroniser" data-path="images/pixelgames/mobile/rev-co-step8.png" width="996" height="550" data-path="images/pixelgames/mobile/rev-co-step8.png" />
    </Frame>
  </Step>
</Steps>

## Dépannage

* **L'achat réussit mais rien ne se débloque :** vérifiez que le droit dans RevenueCat est bien
  associé au bon ID de produit.
* **Fonctionne en test, pas après publication :** vérifiez que les produits sont synchronisés
  avec App Store Connect et que l'Accord sur les applications payantes d'Apple est signé.

## Questions fréquentes

<AccordionGroup>
  <Accordion title="Ai-je besoin d'un compte bancaire pour utiliser RevenueCat ?">
    Non. Seuls un e-mail et un mot de passe sont nécessaires pour créer le compte. Un compte
    bancaire est connecté séparément, via Apple ou Google, une fois que vous êtes prêt à recevoir
    des paiements.
  </Accordion>

  <Accordion title="Les achats de test sont-ils facturés ?">
    Non. Les previews Replit utilisent le mode test de RevenueCat, les achats sont simulés. Les
    frais réels ne commencent qu'une fois qu'Apple approuve votre application pour l'App Store.
  </Accordion>

  <Accordion title="Que puis-je configurer avec RevenueCat ?">
    Les tarifs, les droits, et le paywall lui-même. Demandez à Agent d'effectuer un changement,
    il met à jour à la fois la configuration RevenueCat et le code de votre application.
  </Accordion>
</AccordionGroup>

## Prochaines étapes

<CardGroup cols={2}>
  <Card title="Collecter des avis et des notes" icon="star" href="/fr/build/mobile-collect-reviews">
    Invitez les joueurs satisfaits à noter PixelGames.
  </Card>
</CardGroup>

## En relation

* [Stocker des images dans votre application mobile](/fr/build/mobile-store-images)
* [Soumettre à l'App Store](/build/mobile-publish-ios)
* [Soumettre à Google Play](/build/mobile-publish-android)
