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

> Bygg React Native mobilappar med Dodo Payments med hjälp av vår Expo boilerplate. Inkluderar checkout-integration, betalningshantering och TypeScript-stöd.

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

## Översikt

En produktionsklar boilerplate för att integrera Dodo Payments i Expo/React Native-applikationer. Denna mall inkluderar skapande av checkout-sessioner, betalningshantering och korrekt TypeScript-konfiguration för att hjälpa dig att snabbt börja ta emot betalningar i din mobilapp.

<Info>
  Detta boilerplate använder Expo SDK med TypeScript och inkluderar exempelimplementationer för kassasessioner och betalningshantering.
</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>

## Förutsättningar

* Node.js 18+
* Expo CLI eller EAS CLI
* Dodo Payments-konto (API-nyckel från instrumentpanelen)
* iOS Simulator eller Android Emulator (eller fysisk enhet)

## Snabbstart

<Steps>
  <Step title="Clone the Repository">
    Klona boilerplate-förvaret och gå till projektkatalogen:

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

  <Step title="Get Your API Credentials">
    Hämta dina uppgifter från Dodo Payments-instrumentpanelen i Testläge:

    * **API-nyckel**: Navigera till **Utvecklare → API-nycklar** i din [instrumentpanel](https://app.dodopayments.com)

    <Tip>
      Börja i Testläge för att säkert testa din integration utan att hantera riktiga betalningar.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Skapa en `.env`-fil i rotkatalogen:

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

    Lägg till dina Dodo Payments-referenser:

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

    <Warning>
      Begå aldrig din `.env`-fil till versionshantering. Den ingår redan i `.gitignore`.
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    Installera de nödvändiga npm-paketen:

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

  <Step title="Start the Development Server">
    Starta Expo-utvecklingsservern:

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

    Skanna QR-koden med Expo Go-appen på din enhet, eller tryck `i` för iOS-simulatorn eller `a` för Android-emulatorn.

    <Check>
      Du är redo att börja bygga! Boilerplaten innehåller exempel på skärmar och komponenter som hjälper dig förstå integrationen.
    </Check>
  </Step>
</Steps>

## Vad som ingår

Boilerplate kommer med förkonfigurerade nödvändigheter:

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    Exempelimplementation för att skapa och hantera kassasessioner
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    Komplett betalflöde med hantering av framgång och fel
  </Card>

  <Card title="TypeScript Support" icon="code">
    Fullständig TypeScript-konfiguration med korrekta typdefinitioner
  </Card>

  <Card title="Expo Router" icon="route">
    Navigationsuppsättning med Expo Router för smidig routning
  </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ästa Steg

När du har boilerplate igång:

<Steps>
  <Step title="Create Your Products">
    Lägg till produkter i din [Dodo Payments dashboard](https://app.dodopayments.com) för att aktivera kassafunktionalitet.
  </Step>

  <Step title="Customize the Integration">
    Anpassa exempel-koden så att den matchar din applikations behov och design.
  </Step>

  <Step title="Test on Real Devices">
    Testa betalflödet på fysiska enheter för att säkerställa att allt fungerar korrekt.
  </Step>

  <Step title="Go Live">
    När du är redo, byt till Live Mode API-nycklar och bygg din app för produktion.
  </Step>
</Steps>

## Bygga för Produktion

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

## Ytterligare Resurser

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Detaljerad guide för att implementera betalningar i mobilappar
  </Card>

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

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Detaljerad guide för att implementera engångsbetalningar
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    Utforska hela Dodo Payments API-dokumentationen
  </Card>
</CardGroup>

## Support

Behöver du hjälp med boilerplate?

* Gå med i vår [Discord-community](https://discord.gg/bYqAp4ayYh) för frågor och diskussioner
* Kolla in [GitHub-repositoriet](https://github.com/dodopayments/expo-boilerplate) för problem och uppdateringar
* Kontakta vårt [supportteam](mailto:support@dodopayments.com) för hjälp