메인 콘텐츠로 건너뛰기

GitHub Repository

Expo + React Native + Dodo Payments 보일러플레이트 완성

​
개요

Dodo Payments를 Expo/React Native 애플리케이션에 통합하기 위한 프로덕션 준비 완료 보일러플레이트입니다. 이 템플릿은 체크아웃 세션 생성, 결제 처리 및 적절한 TypeScript 구성을 포함하여 모바일 앱에서 빠르게 결제를 수락할 수 있도록 도와줍니다.
이 보일러플레이트는 Expo SDK와 TypeScript를 사용하며 체크아웃 세션 및 결제 처리 예제 구현을 포함합니다.

​
필수 조건

  • Node.js 18+
  • Expo CLI 또는 EAS CLI
  • Dodo Payments 계정 (대시보드에서 API 키)
  • iOS 시뮬레이터 또는 Android 에뮬레이터 (또는 실제 장치)

​
빠른 시작

1

Clone the Repository

보일러플레이트 저장소를 복제하고 프로젝트 디렉터리로 이동하세요:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

Get Your API Credentials

테스트 모드에서 Dodo Payments 대시보드에서 자격 증명을 가져오세요:
  • API 키: 대시보드에서 개발자 → API 키로 이동합니다.
실제 결제를 처리하지 않고 통합을 안전하게 테스트하려면 테스트 모드부터 시작하세요.
3

Configure Environment Variables

루트 디렉터리에 .env 파일을 생성하세요:
touch .env
Dodo Payments 자격 증명을 추가합니다:
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
.env 파일을 버전 관리에 절대 커밋하지 마세요. 이 파일은 .gitignore에 이미 포함되어 있습니다.
4

Install Dependencies

필요한 npm 패키지를 설치하세요:
npm install
5

Start the Development Server

Expo 개발 서버를 시작하세요:
npx expo start
Expo Go 앱으로 QR 코드를 스캔하거나 iOS 시뮬레이터용 i 또는 Android 에뮬레이터용 a를 누르세요.
준비가 되었습니다! 보일러플레이트에는 통합을 이해하는 데 도움이 되는 예제 화면과 구성 요소가 포함되어 있습니다.

​
포함된 내용

보일러플레이트에는 미리 구성된 필수 요소가 포함되어 있습니다:

Checkout Integration

체크아웃 세션을 생성하고 처리하는 예제 구현

Payment Handling

성공 및 오류 처리를 갖춘 전체 결제 흐름

TypeScript Support

적절한 타입 정의를 포함한 전체 TypeScript 구성

Expo Router

원활한 라우팅을 위한 Expo Router 기반 네비게이션 설정

​
프로젝트 구조

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

​
다음 단계

보일러플레이트가 실행되면:
1

Create Your Products

체크아웃 기능을 사용하려면 Dodo Payments 대시보드에 제품을 추가하세요.
2

Customize the Integration

예제 코드를 애플리케이션의 요구 사항과 디자인에 맞게 조정하세요.
3

Test on Real Devices

모든 것이 제대로 작동하는지 확인하려면 실제 기기에서 결제 흐름을 테스트하세요.
4

Go Live

준비가 되면 라이브 모드 API 키로 전환하고 앱을 프로덕션용으로 빌드하세요.

​
프로덕션을 위한 빌드

1

Install EAS CLI

npm install -g eas-cli
2

Configure EAS

eas build:configure
3

Build Your App

iOS의 경우:
eas build --platform ios
Android의 경우:
eas build --platform android

​
추가 리소스

Mobile Integration Guide

모바일 앱에서 결제를 구현하기 위한 자세한 가이드

React Native Integration

React Native 전용 통합 문서

Integration Guide

일회성 결제 구현을 위한 자세한 가이드

API Reference

전체 Dodo Payments API 문서를 확인하세요

​
지원

보일러플레이트에 대한 도움이 필요하신가요?