> ## 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.

# Framer Plugin

> Integrieren Sie die Checkout-Funktionalität von Dodo Payments in Ihre Framer-Projekte mit unserem leistungsstarken Plugin. Akzeptieren Sie Zahlungen mit anpassbaren Checkout-Erlebnissen.

## Übersicht

Das Dodo Payments Framer Plugin integriert nahtlos die Zahlungsabwicklung in Ihre Framer-Websites. Erstellen Sie anpassbare Checkout-Erlebnisse mit Unterstützung für Test- und Produktionsumgebungen.

<Card title="Official Plugin" icon="link" href="https://www.framer.com/marketplace/plugins/dodo-payments">
  Greifen Sie auf das offizielle Dodo Payments Plugin im Framer-Marktplatz zu.
</Card>

## Funktionen

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    Wählen Sie einen Seitenflow oder ein Inline-Overlay, das sich natürlich auf Ihrer Website anfühlt.
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    Fügen Sie die Komponente hinzu, fügen Sie Ihre Schlüssel ein, veröffentlichen Sie.
  </Card>

  <Card title="Instant Digital Delivery" icon="envelope">
    Sichere Download-Links oder Lizenzschlüssel werden sofort nach Zahlungseingang per E-Mail versendet.
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    Bankenähnliches Acquiring auf sechs Kontinenten, lokale Zahlungsmethoden integriert.
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    MwSt., GST, Umsatzsteuer und Belege werden für jede Bestellung abgewickelt.
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    Aktivieren Sie ein einstellbares Umschalten, um Abonnementpläne für Ihre Produkte zu verkaufen.
  </Card>
</CardGroup>

## Einrichtungsanleitung

<Steps>
  <Step title="Generate API Key">
    Besuchen Sie das [Dodo Payments Dashboard](https://app.dodopayments.com/developer/api-keys) und erstellen Sie einen neuen API-Schlüssel.

    <Tabs>
      <Tab title="Live Mode">
        Für den Produktionseinsatz mit echten Zahlungen.
      </Tab>

      <Tab title="Test Mode">
        Perfekt für Entwicklung und Tests ohne echte Belastungen.
      </Tab>
    </Tabs>

    <Check>
      Kopieren Sie Ihren API-Schlüssel sicher – Sie benötigen ihn für den nächsten Schritt.
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    1. Öffnen Sie das Dodo Payments Plugin in Framer
    2. Navigieren Sie zur Authentifizierungsseite
    3. Fügen Sie Ihren API-Schlüssel ein
    4. Wählen Sie den entsprechenden Modus (Test oder Live)
    5. Klicken Sie auf **Continue**, um sich zu authentifizieren

    <Warning>
      Halten Sie Ihre API-Schlüssel sicher und teilen Sie sie niemals öffentlich.
    </Warning>
  </Step>

  <Step title="Manage Products">
    Nach der Authentifizierung sehen Sie Ihre Produktliste:

    * **Vorhandene Produkte**: Automatisch angezeigt
    * **Keine Produkte**: Klicken Sie auf die **Plus (+)**-Schaltfläche neben 'Produkte'

    <Info>
      Sie werden zum Dodo Payments Dashboard weitergeleitet, um Produkte mit Preisen, Beschreibungen und Einstellungen zu erstellen.
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. Wählen Sie ein Produkt aus Ihrer verfügbaren Liste
    2. Klicken Sie auf die `Add Buy Button` Schaltfläche
    3. Ein Kauf-Button mit dem Text `Buy {product_name}` wird Ihrer Leinwand hinzugefügt

    <Warning>
      Die Schaltfläche "Add Buy Button" ist deaktiviert, wenn Sie nicht die richtigen Projektberechtigungen haben.
    </Warning>
  </Step>
</Steps>

## Anpassung

<Steps>
  <Step title="Select Checkout Experience">
    Wählen Sie Ihre bevorzugte Checkout-Erfahrung:

    * **Overlay (Embedded)**: Der Checkout erscheint als Overlay innerhalb Ihres Framer-Projekts und hält Nutzer auf Ihrer Seite.
    * **Hosted**: Nutzer werden zu einer von Dodo Payments gehosteten Checkout-Seite weitergeleitet für eine nahtlose Erfahrung.
  </Step>

  <Step title="Customize Appearance Options">
    Passen Sie Ihre Checkout-Erfahrung mit den folgenden Darstellungseinstellungen an:

    * **Checkout Theme**: Wählen Sie zwischen hellem und dunklem Thema, um zu Ihrer Markenästhetik zu passen.
    * **Button Label**: Passen Sie den Text an (z. B. 'Buy Now', 'Purchase', 'Get Started').
    * **Button Styles**: Passen Sie Farben, Schriftarten, Größen und andere Stil-Eigenschaften an.
    * **Return URL**: Legen Sie eine Framer-Seite fest, zu der der Nutzer nach dem Checkout zurückkehrt.
  </Step>
</Steps>

## Fehlersuche

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **Problem**: Plugin authentifiziert nicht

    **Solutions**:

    * Überprüfen Sie, ob Ihr API-Schlüssel korrekt ist
    * Stellen Sie sicher, dass Sie den richtigen Modus verwenden (Test/Live)
    * Überprüfen Sie Ihre Internetverbindung
  </Accordion>

  <Accordion title="Button Creation Issues">
    **Problem**: "Add Buy Button" ist deaktiviert

    **Solutions**:

    * Überprüfen Sie, ob Sie die richtigen Berechtigungen in Ihrem Framer-Projekt haben
    * Stellen Sie sicher, dass Sie korrekt authentifiziert sind
    * Versuchen Sie, das Plugin zu aktualisieren
  </Accordion>

  <Accordion title="Product Display Issues">
    **Problem**: Produkte werden nicht angezeigt

    **Solutions**:

    * Stellen Sie sicher, dass Sie Produkte in Ihrem Dodo Payments Dashboard erstellt haben
    * Prüfen Sie, ob Ihr API-Schlüssel die richtigen Berechtigungen hat
    * Versuchen Sie, sich erneut zu authentifizieren
  </Accordion>
</AccordionGroup>