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

# Plugin Framer

> Intégrez la fonctionnalité de paiement Dodo Payments dans vos projets Framer avec notre puissant plugin. Acceptez les paiements avec des expériences de paiement personnalisables.

## Aperçu

Le plugin Framer Dodo Payments intègre parfaitement le traitement des paiements dans vos sites Web Framer. Créez des expériences de paiement personnalisables avec un support pour les environnements de test et de production.

<Card title="Official Plugin" icon="link" href="https://www.framer.com/marketplace/plugins/dodo-payments">
  Accédez au plugin officiel Dodo Payments sur le marketplace Framer.
</Card>

## Fonctionnalités

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    Choisissez un flux en plein écran ou une superposition inline qui semble natif sur votre site.
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    Ajoutez le composant, collez vos clés, publiez.
  </Card>

  <Card title="Instant Digital Delivery" icon="envelope">
    Envoyez les liens de téléchargement sécurisés ou les clés de licence par e-mail dès que le paiement est validé.
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    Acquisition de niveau bancaire sur six continents, méthodes locales intégrées.
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    TVA, GST, taxe de vente et reçus gérés pour chaque commande.
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    Activez un interrupteur pour vendre des plans d’abonnement pour vos produits.
  </Card>
</CardGroup>

## Guide d'Installation

<Steps>
  <Step title="Generate API Key">
    Visitez le [Tableau de bord Dodo Payments](https://app.dodopayments.com/developer/api-keys) et créez une nouvelle clé API.

    <Tabs>
      <Tab title="Live Mode">
        Pour une utilisation en production avec un traitement réel des paiements.
      </Tab>

      <Tab title="Test Mode">
        Parfait pour le développement et les tests sans frais réels.
      </Tab>
    </Tabs>

    <Check>
      Copiez votre clé API en toute sécurité : vous en aurez besoin pour l’étape suivante.
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    1. Ouvrez le plugin Dodo Payments dans Framer
    2. Accédez à la page Authentification
    3. Collez votre clé API
    4. Sélectionnez le mode approprié (Test ou Live)
    5. Cliquez sur **Continuer** pour vous authentifier

    <Warning>
      Gardez vos clés API sécurisées et ne les partagez jamais publiquement.
    </Warning>
  </Step>

  <Step title="Manage Products">
    Après authentification, vous verrez la liste de vos produits :

    * **Produits existants** : Affichés automatiquement
    * **Aucun produit** : Cliquez sur le bouton **Plus (+)** à côté de 'Produits'

    <Info>
      Vous serez redirigé vers le Tableau de bord Dodo Payments pour créer des produits avec tarifications, descriptions et paramètres.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. Sélectionnez un produit dans votre liste disponible
    2. Cliquez sur le bouton `Add Buy Button`
    3. Un bouton d’achat avec le texte `Buy {product_name}` sera ajouté à votre canevas

    <Warning>
      Le bouton Ajouter un achat sera désactivé si vous n’avez pas les autorisations de projet appropriées.
    </Warning>
  </Step>
</Steps>

## Personnalisation

<Steps>
  <Step title="Select Checkout Experience">
    Choisissez votre expérience de paiement préférée :

    * **Overlay (intégré)** : le paiement s’affiche en superposition dans votre projet Framer, en maintenant les utilisateurs sur votre site.
    * **Hosted** : les utilisateurs sont redirigés vers une page de paiement hébergée par Dodo Payments pour une expérience fluide.
  </Step>

  <Step title="Customize Appearance Options">
    Personnalisez votre expérience de paiement avec les paramètres d’apparence suivants :

    * **Thème du checkout** : choisissez entre des thèmes clairs ou sombres pour correspondre à l’esthétique de votre marque.
    * **Libellé du bouton** : personnalisez le texte (par exemple, « Buy Now », « Purchase », « Get Started »).
    * **Styles de bouton** : ajustez les couleurs, polices, tailles et autres propriétés de style.
    * **URL de retour** : définissez une page Framer vers laquelle l’utilisateur revient après le paiement.
  </Step>
</Steps>

## Dépannage

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **Problème** : le plugin ne s’authentifie pas

    **Solutions** :

    * Vérifiez que votre clé API est correcte
    * Assurez-vous d’utiliser le bon mode (Test/Live)
    * Vérifiez votre connexion Internet
  </Accordion>

  <Accordion title="Button Creation Issues">
    **Problème** : le bouton Ajouter un achat est désactivé

    **Solutions** :

    * Vérifiez que vous avez les autorisations appropriées dans votre projet Framer
    * Assurez-vous d’être correctement authentifié
    * Essayez de rafraîchir le plugin
  </Accordion>

  <Accordion title="Product Display Issues">
    **Problème** : les produits ne s’affichent pas

    **Solutions** :

    * Assurez-vous d’avoir créé des produits dans votre tableau de bord Dodo Payments
    * Vérifiez que votre clé API dispose des autorisations appropriées
    * Essayez de vous réauthentifier
  </Accordion>
</AccordionGroup>