Expo 보일러플레이트

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 에뮬레이터 (또는 실제 장치)

빠른 시작

Clone the Repository

보일러플레이트 저장소를 복제하고 프로젝트 디렉터리로 이동하세요:

git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate

Get Your API Credentials

테스트 모드에서 Dodo Payments 대시보드에서 자격 증명을 가져오세요:

API 키: 대시보드에서 개발자 → API 키로 이동합니다.

실제 결제를 처리하지 않고 통합을 안전하게 테스트하려면 테스트 모드부터 시작하세요.

Configure Environment Variables

루트 디렉터리에 .env 파일을 생성하세요:

touch .env

Dodo Payments 자격 증명을 추가합니다:

.env

EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here

.env 파일은 버전 관리 시스템에 절대 커밋하지 마세요. 이 파일은 이미 .gitignore에 포함되어 있습니다.

EXPO_PUBLIC_* 변수는 배포된 JavaScript 번들에 포함되며 앱을 다운로드하는 누구나 읽을 수 있습니다. Dodo Payments API 키는 bearer secret이므로 개발 중에는 Test Mode 키로만 사용하세요. Production에서는 백엔드에서 checkout session을 생성하고 결과로 생성된 checkout_url만 앱에 전달하세요. 자세한 내용은 Mobile Integration을 참조하세요.

Install Dependencies

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

npm install

Start the Development Server

Expo 개발 서버를 시작하세요:

npx expo start

기기에서 Expo Go 앱으로 QR 코드를 스캔하거나, iOS simulator에서는 i를, Android emulator에서는 a를 누르세요.

이제 빌드를 시작할 준비가 되었습니다! 보일러플레이트에는 integration을 이해하는 데 도움이 되는 예제 화면과 component가 포함되어 있습니다.

포함된 항목

보일러플레이트에는 다음과 같이 사전 구성된 필수 항목이 포함되어 있습니다:

Checkout Integration

checkout session을 생성하고 처리하는 예제 implementation

Payment Handling

success 및 error 처리를 포함한 전체 payment flow

TypeScript Support

적절한 type definition이 포함된 전체 TypeScript configuration

Expo Router

원활한 routing을 위한 Expo Router 기반 navigation 설정

프로젝트 구조

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

다음 단계

보일러플레이트를 실행한 후 다음을 진행하세요:

Create Your Products

checkout 기능을 활성화하려면 Dodo Payments dashboard에 product를 추가하세요.

Customize the Integration

예제 코드를 애플리케이션의 요구 사항과 design에 맞게 수정하세요.

Test on Real Devices

모든 기능이 올바르게 작동하는지 확인하기 위해 실제 device에서 payment flow를 테스트하세요.

Go Live

준비가 되면 Live Mode API 키로 전환하고 production용으로 앱을 build하세요.

Production용 빌드

Install EAS CLI

npm install -g eas-cli

Configure EAS

eas build:configure

Build Your App

iOS의 경우:

eas build --platform ios

Android의 경우:

eas build --platform android

추가 리소스

Mobile Integration Guide

mobile app에서 payment를 구현하는 자세한 guide

Integration Guide

one-time payment 구현에 대한 자세한 guide

API Reference

전체 Dodo Payments API documentation 살펴보기

지원

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

질문과 논의를 위해 Discord community에 참여하세요
문제와 업데이트는 GitHub repository에서 확인하세요
도움이 필요하면 support team에 문의하세요

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

개요

필수 조건

빠른 시작

포함된 항목

Checkout Integration

Payment Handling

TypeScript Support

Expo Router

프로젝트 구조

다음 단계

Production용 빌드

추가 리소스

Mobile Integration Guide

Integration Guide

API Reference

지원

GitHub Repository

​개요

​필수 조건

​빠른 시작

​포함된 항목

Checkout Integration

Payment Handling

TypeScript Support

Expo Router

​프로젝트 구조

​다음 단계

​Production용 빌드

​추가 리소스

Mobile Integration Guide

Integration Guide

API Reference

​지원

개요

필수 조건

빠른 시작

포함된 항목

프로젝트 구조

다음 단계

Production용 빌드

추가 리소스

지원