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

# Expo Boilerplate

> Erstellen Sie React Native Mobile-Apps mit Dodo Payments unter Verwendung unseres Expo-Boilerplates. Enthält Checkout-Integration, Zahlungsabwicklung und TypeScript-Unterstützung.

<Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/expo-boilerplate">
  Vollständiges Expo + React Native + Dodo Payments-Boilerplate
</Card>

## Übersicht

Ein produktionsbereites Boilerplate zur Integration von Dodo Payments in Expo/React Native-Anwendungen. Diese Vorlage umfasst die Erstellung von Checkout-Sitzungen, die Zahlungsabwicklung und eine ordnungsgemäße TypeScript-Konfiguration, um Ihnen zu helfen, schnell Zahlungen in Ihrer mobilen App zu akzeptieren.

<Info>
  Dieses Boilerplate nutzt das Expo SDK mit TypeScript und enthält Beispielimplementierungen für Checkout-Sitzungen und Zahlungsabwicklung.
</Info>

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/78N1qw14m0Y" title="Expo Boilerplate Demo | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

## Voraussetzungen

* Node.js 18+
* Expo CLI oder EAS CLI
* Dodo Payments-Konto (API-Schlüssel aus dem Dashboard)
* iOS-Simulator oder Android-Emulator (oder physisches Gerät)

## Schnellstart

<Steps>
  <Step title="Clone the Repository">
    Klonen Sie das Boilerplate-Repository und wechseln Sie in das Projektverzeichnis:

    ```bash theme={null}
    git clone https://github.com/dodopayments/expo-boilerplate.git
    cd expo-boilerplate
    ```
  </Step>

  <Step title="Get Your API Credentials">
    Holen Sie sich Ihre Zugangsdaten vom Dodo Payments Dashboard im Testmodus:

    * **API-Schlüssel**: Navigieren Sie zu **Entwickler → API-Schlüssel** in Ihrem [Dashboard](https://app.dodopayments.com)

    <Tip>
      Beginnen Sie im Testmodus, um Ihre Integration sicher zu testen, ohne echte Zahlungen abzuwickeln.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Erstellen Sie eine `.env` Datei im Stammverzeichnis:

    ```bash theme={null}
    touch .env
    ```

    Fügen Sie Ihre Dodo Payments-Anmeldeinformationen hinzu:

    ```bash .env theme={null}
    EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
    ```

    <Warning>
      Committen Sie Ihre `.env` Datei niemals in die Versionskontrolle. Sie ist bereits in `.gitignore` enthalten.
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    Installieren Sie die erforderlichen npm-Pakete:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Start the Development Server">
    Starten Sie den Expo-Entwicklungsserver:

    ```bash theme={null}
    npx expo start
    ```

    Scannen Sie den QR-Code mit der Expo Go-App auf Ihrem Gerät oder drücken Sie `i` für den iOS-Simulator oder `a` für den Android-Emulator.

    <Check>
      Sie können mit der Entwicklung beginnen! Das Boilerplate enthält Beispielbildschirme und -komponenten, die Ihnen helfen, die Integration zu verstehen.
    </Check>
  </Step>
</Steps>

## Was ist enthalten

Das Boilerplate kommt mit vorab konfigurierten Essentials:

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    Beispielimplementierung zum Erstellen und Verwalten von Checkout-Sitzungen
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    Vollständiger Zahlungsablauf mit Erfolgs- und Fehlerbehandlung
  </Card>

  <Card title="TypeScript Support" icon="code">
    Vollständige TypeScript-Konfiguration mit korrekten Typdefinitionen
  </Card>

  <Card title="Expo Router" icon="route">
    Navigationseinrichtung mit Expo Router für nahtloses Routing
  </Card>
</CardGroup>

## Projektstruktur

```
expo-boilerplate/
├── app/
│   ├── (tabs)/
│   │   └── index.tsx          # Home screen with examples
│   └── checkout.tsx           # Checkout screen
├── components/
│   └── PaymentButton.tsx      # Payment button component
├── lib/
│   └── dodo.ts                # Dodo Payments client setup
├── .env.example               # Environment variables template
└── package.json
```

## Nächste Schritte

Sobald Sie das Boilerplate ausgeführt haben:

<Steps>
  <Step title="Create Your Products">
    Fügen Sie Produkte in Ihrem [Dodo Payments dashboard](https://app.dodopayments.com) hinzu, um die Checkout-Funktionalität zu aktivieren.
  </Step>

  <Step title="Customize the Integration">
    Passen Sie den Beispielcode an die Anforderungen und das Design Ihrer Anwendung an.
  </Step>

  <Step title="Test on Real Devices">
    Testen Sie den Zahlungsablauf auf physischen Geräten, um sicherzustellen, dass alles korrekt funktioniert.
  </Step>

  <Step title="Go Live">
    Wenn Sie bereit sind, wechseln Sie zu den Live-Mode-API-Schlüsseln und bauen Sie Ihre App für den Produktionsbetrieb.
  </Step>
</Steps>

## Produktion erstellen

<Steps>
  <Step title="Install EAS CLI">
    ```bash theme={null}
    npm install -g eas-cli
    ```
  </Step>

  <Step title="Configure EAS">
    ```bash theme={null}
    eas build:configure
    ```
  </Step>

  <Step title="Build Your App">
    Für iOS:

    ```bash theme={null}
    eas build --platform ios
    ```

    Für Android:

    ```bash theme={null}
    eas build --platform android
    ```
  </Step>
</Steps>

## Zusätzliche Ressourcen

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Detaillierte Anleitung zur Implementierung von Zahlungen in mobilen Apps
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    React Native-spezifische Integrationsdokumentation
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Detaillierte Anleitung zur Implementierung von Einmalzahlungen
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    Entdecken Sie die vollständige Dodo Payments API-Dokumentation
  </Card>
</CardGroup>

## Unterstützung

Brauchen Sie Hilfe mit dem Boilerplate?

* Treten Sie unserer [Discord-Community](https://discord.gg/bYqAp4ayYh) für Fragen und Diskussionen bei
* Überprüfen Sie das [GitHub-Repository](https://github.com/dodopayments/expo-boilerplate) auf Probleme und Updates
* Kontaktieren Sie unser [Support-Team](mailto:support@dodopayments.com) für Unterstützung