Hoppa till huvudinnehåll

GitHub Repository

Komplett Expo + React Native + Dodo Payments boilerplate

​
Ö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.
Denna boilerplate använder Expo SDK med TypeScript och inkluderar exempelimplementationer för checkout-sessioner och betalningsbehandling.

​
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

1

Klona Repositoriet

Klona boilerplate-repositoriet och navigera till projektkatalogen:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

Få Ditt API-Referenser

Få dina referenser från Dodo Payments-instrumentpanelen i Testläge:
  • API-nyckel: Navigera till Utvecklare → API-nycklar i din instrumentpanel
Börja med Testläge för att säkert testa din integration utan att behandla riktiga betalningar.
3

Konfigurera Miljövariabler

Skapa en .env fil i rotkatalogen:
touch .env
Lägg till dina Dodo Payments-referenser:
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
Kom ihåg att aldrig begå din .env fil till versionskontroll. Den är redan inkluderad i .gitignore.
4

Installera Beroenden

Installera de nödvändiga npm-paketen:
npm install
5

Starta Utvecklingsservern

Starta Expo utvecklingsservern:
npx expo start
Skanna QR-koden med Expo Go-appen på din enhet, eller tryck på i för iOS-simulatorn eller a för Android-emulatorn.
Du är redo att börja bygga! Boilerplate inkluderar exempel på skärmar och komponenter för att hjälpa dig förstå integrationen.

​
Vad som ingår

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

Checkout Integration

Exempelimplementation för att skapa och hantera checkout-sessioner

Betalningshantering

Fullständig betalningsflöde med framgångs- och felhantering

TypeScript-stöd

Fullständig TypeScript-konfiguration med korrekta typdefinitioner

Expo Router

Navigeringsinställning med Expo Router för sömlös routing

​
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:
1

Skapa Dina Produkter

Lägg till produkter i din Dodo Payments-instrumentpanel för att aktivera checkout-funktionalitet.
2

Anpassa Integrationen

Anpassa exempel-koden för att matcha din applikations behov och design.
3

Testa på Riktiga Enheter

Testa betalningsflödet på fysiska enheter för att säkerställa att allt fungerar korrekt.
4

Gå Live

När du är redo, byt till Live-läge API-nycklar och bygg din app för produktion.

​
Bygga för Produktion

1

Installera EAS CLI

npm install -g eas-cli
2

Konfigurera EAS

eas build:configure
3

Bygg Din App

För iOS:
eas build --platform ios
För Android:
eas build --platform android

​
Ytterligare Resurser

Mobilintegrationsguide

Detaljerad guide för att implementera betalningar i mobilappar

React Native Integration

Dokumentation för React Native-specifik integration

Integrationsguide

Detaljerad guide för att implementera engångsbetalningar

API-referens

Utforska den fullständiga Dodo Payments API-dokumentationen

​
Support

Behöver du hjälp med boilerplate?