메인 콘텐츠로 건너뛰기

GitHub 리포지토리

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

​
개요

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

​
필수 조건

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

​
빠른 시작

1

리포지토리 복제

보일러플레이트 리포지토리를 복제하고 프로젝트 디렉토리로 이동합니다:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

API 자격 증명 받기

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

환경 변수 구성

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

의존성 설치

필요한 npm 패키지를 설치합니다:
npm install
5

개발 서버 시작

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

​
포함된 내용

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

체크아웃 통합

체크아웃 세션 생성 및 처리에 대한 예제 구현

결제 처리

성공 및 오류 처리가 포함된 완전한 결제 흐름

TypeScript 지원

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

Expo 라우터

원활한 라우팅을 위한 Expo 라우터로 내비게이션 설정

​
프로젝트 구조

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

제품 생성

체크아웃 기능을 활성화하기 위해 Dodo Payments 대시보드에서 제품을 추가합니다.
2

통합 사용자 정의

예제 코드를 애플리케이션의 요구 사항 및 디자인에 맞게 조정합니다.
3

실제 장치에서 테스트

모든 것이 올바르게 작동하는지 확인하기 위해 실제 장치에서 결제 흐름을 테스트합니다.
4

라이브로 전환

준비가 되면 라이브 모드 API 키로 전환하고 프로덕션을 위해 앱을 빌드합니다.

​
프로덕션을 위한 빌드

1

EAS CLI 설치

npm install -g eas-cli
2

EAS 구성

eas build:configure
3

앱 빌드

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

​
추가 리소스

모바일 통합 가이드

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

React Native 통합

React Native 전용 통합 문서

통합 가이드

일회성 결제를 구현하기 위한 자세한 가이드

API 참조

전체 Dodo Payments API 문서를 탐색하세요

​
지원

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