Skip to main content

GitHub Repository

Boilerplate för Expo, React Native och Dodo Payments.

Översikt

Expo-boilerplate är en fungerande Expo-app som säljer en prenumerationsplan via Dodo Payments hosted checkout. Den består av två delar: en Expo Router-app i TypeScript och en liten Express-server i server/ som skapar checkout-sessioner med din API-nyckel. Appen ber servern om en checkout-URL, öppnar den i systemets webbläsare med expo-web-browser och tar emot resultatet via en deep link.
Boilerplate använder Expo SDK 54, Expo Router och TypeScript. API-nyckeln stannar på servern. Appen känner bara till serverns URL.

Förutsättningar

  • Node.js 18 eller senare.
  • Expo CLI eller EAS CLI.
  • Ett Dodo Payments-konto med en produkt. Skapa produkten under Products i dashboarden.
  • En iOS-simulator, en Android-emulator eller en fysisk enhet.

Snabbstart

1

Clone the Repository

Klona boilerplate-repositoriet och gå till projektkatalogen:
2

Get Your API Credentials

Hämta din API-nyckel från Dodo Payments dashboard i testläge:
  • API Key: Gå till Developer → API Keys i din dashboard.
Bygg i testläge, som simulerar betalningar utan att riktiga pengar flyttas.
3

Configure Environment Variables

Appen och servern läser varsin .env-fil. Kopiera båda exempelfilerna:
I server/.env lägger du till din API-nyckel. DODOPAYMENTS_RETURN_URL måste använda scheme från app.json, som är dodoexpo i boilerplate:
server/.env
I roten .env anger du EXPO_PUBLIC_BACKEND_URL till serverns URL, till exempel http://localhost:3000. Appen skickar checkout-förfrågningar till EXPO_PUBLIC_BACKEND_URL/checkout.Öppna sedan server/server.js och ersätt your-product-id med ID:t för din produkt. Produkt-ID:n börjar med pdt_.
Checka aldrig in dina .env-filer i versionshanteringen. Rotens .gitignore exkluderar redan .env.Lägg aldrig en Dodo Payments API-nyckel i en EXPO_PUBLIC_*-variabel. Expo bäddar in dessa variabler i JavaScript-bundlen, så alla som laddar ner din app kan läsa dem. Behåll nyckeln på servern, som boilerplate gör, och skicka endast den resulterande checkout_url till appen. Se Mobile Integration.
4

Install Dependencies

Installera paketen för appen och servern:
5

Start the Development Server

Starta backend i en terminal och starta sedan Expo i en andra terminal:
Tryck på i för iOS Simulator eller a för Android Emulator, eller skanna QR-koden på din enhet. Projektet inkluderar expo-dev-client, och returlänken dodoexpo:// behöver appens eget schema, så kör appen i en utvecklingsbuild (npx expo run:ios eller npx expo run:android) i stället för Expo Go.En fysisk enhet kan inte nå localhost på din dator. Om du vill testa på en enhet anger du EXPO_PUBLIC_BACKEND_URL till datorns lokala nätverksadress, till exempel http://192.168.1.10:3000.
På hemskärmen visas ett plankort med en checkout-knapp. Tryck på den för att öppna checkout, betala med testkortet 4242 4242 4242 4242, så öppnar appen sin skärm för betalningsresultat.

Vad som ingår

Boilerplate innehåller:

Checkout Integration

En demoserver som skapar checkout-sessioner och en appservice som begär och öppnar dem.

Payment Handling

En resultatskärm som läser status från deep link-en dodoexpo://payment/result och visar om det lyckades eller misslyckades.

TypeScript Support

TypeScript-konfiguration med typer för checkout-förfrågan och -svaret.

Expo Router

Filbaserad navigering med Expo Router, inklusive en fliklayout och rutten för betalningsresultat.

Projektstruktur

Detta är de viktigaste filerna i repositoriet:

Nästa steg

När boilerplate körs:
1

Create Your Products

Lägg till produkter i din Dodo Payments dashboard och använd deras ID:n i server/server.js.
2

Customize the Integration

Ändra plantexten i config/product.ts och ändra appnamnet, scheme och bundleidentifierarna i app.json. Om du ändrar scheme uppdaterar du DODOPAYMENTS_RETURN_URL så att det matchar.
3

Test on Real Devices

Testa betalningsflödet och deep-link-returen på fysiska iOS- och Android-enheter.
4

Go Live

Ersätt demoservern med din egen backend som autentiserar användare och ger åtkomst baserat på webhooks. Byt sedan till en API-nyckel i live-läge och bygg appen för produktion.

Bygga för produktion

Bygg binärfiler som är redo för appbutiker med EAS Build:
1

Install EAS CLI

2

Configure EAS

Repositoriet har ingen eas.json. Detta kommando skapar en:
3

Build Your App

För iOS:
För Android:

Ytterligare resurser

Mobile Integration Guide

De mobila checkout-SDK:erna, konfiguration av deep links och inställningar för mobil checkout.

Integration Guide

Checkout-sessioner, betalningslänkar och webhooks.

API Reference

Alla Dodo Payments API-endpoints.

Support

Om du behöver hjälp med boilerplate:
Senast ändrad 26 september 2026