공식 Dodo Payments React Native checkout SDK인
@dodopayments/react-native-checkout입니다. 이 SDK는 네이티브 브라우저 뷰에서 Dodo의 호스팅 checkout을 열고 typed result를 반환합니다. 참고: 이와 관련이 없는 이전 패키지 dodopayments-react-native-sdk (unscoped)가 존재하며, API가 완전히 다릅니다. 이 페이지에서는 현재 공식 scoped package만 설명합니다.Checkout Sessions API
백엔드에서 이 SDK가 열 checkout_url을 생성합니다.
Mobile Integration Guide
전체 모바일 결제 흐름에서 어떻게 연동되는지 확인하세요.
SFSafariViewController를, Android에서는 Chrome Custom Tab을 열며, API key를 보유하지 않고 Dodo API를 직접 호출하지도 않습니다. 모든 checkout 로직은 브라우저에서 실행되며, SDK는 뷰 lifecycle을 관리하고 return URL을 캡처하기만 합니다.
설치
1
Install the Package
- Android
- iOS
- Expo
패키지는 autolink되며 Maven에서 추가 설정은 필요하지 않습니다. 네이티브 dependency가 자동으로 resolve됩니다.
com.dodopayments.api:checkout-android를 가져옵니다.2
Register a Callback URL Scheme
앱은 checkout에서 반환되는 return URL을 수신할 수 있도록 URL scheme을 등록해야 합니다.
- Android (Gradle)
- iOS (Info.plist)
- Expo (both platforms)
android/app/build.gradle에서:android/app/build.gradle
"myapp"를 앱의 scheme으로 바꿉니다.사용법
반환 URL 전달
Linking listener는 iOS의 반환 URL 처리에 필요합니다. Android에서는 handleOpenURL가 아무 작업도 하지 않고 false를 resolve합니다. Android core가 redirect를 네이티브로 처리하기 때문입니다. 두 플랫폼 모두에서 listener를 무조건 등록해도 안전합니다.
결과의 의미
CheckoutStatus
필수
succeeded, failed, cancelled, pending, expired 중 하나입니다.string
반환 URL에 해당 값이 포함된 경우 설정됩니다. UI에 표시하되 액세스 권한을 부여하는 데 사용하지 마세요. 자세한 내용은 아래의 결제 확인을 참조하세요.
string
subscription checkout에 대해 설정됩니다.
string[]
checkout에 license key product가 포함된 경우 설정됩니다.
string
checkout에서 이메일을 수집하는 경우 설정됩니다.
Record<string, string>
반환 URL의 모든 query parameter를 원문 그대로 포함합니다.
결제 확인
Webhooks
결제가 성공하거나 subscription이 활성화되면 Dodo Payments가 backend를 호출합니다.
Get Payment Detail
secret key를 사용해
paymentId를 조회하여 상태를 직접 확인합니다.result.status만으로 부여하지 마세요.
외관 사용자 지정
customization를 통해 start(...)에서 checkout 브라우저의 툴바, 버튼 및 색 구성표를 사용자 지정할 수 있습니다. 옵션은 플랫폼별로 그룹화되어 있습니다. Android의 Custom Tab과 iOS의 SFSafariViewController는 서로 다른 네이티브 컨트롤을 제공하기 때문입니다. 모든 필드는 선택 사항이며, customization를 생략하면 각 플랫폼의 기본 외관이 사용됩니다.
Android — Custom Tab
Android — Custom Tab
Color
툴바 배경 색상입니다.
탐색 모음 색상입니다.
탐색 모음 위 구분선의 색상입니다.
'default' | 'back'
default는 시스템 “X” 아이콘을 표시하고, back는 대신 뒤로 가기 화살표를 그립니다.'start' | 'end'
툴바에서 닫기 버튼이 표시될 위치를 지정합니다.
툴바의 공유 아이콘을 표시합니다.
boolean
툴바에서 URL 아래에 페이지 제목을 표시합니다.
boolean
페이지를 스크롤할 때 툴바를 자동으로 숨깁니다.
boolean
오버플로 메뉴에 “이 페이지 북마크”를 표시합니다.
boolean
오버플로 메뉴에 “페이지 다운로드”를 표시합니다.
'system' | 'light' | 'dark'
기기의 시스템 설정과 관계없이 라이트 또는 다크 외관을 강제합니다.
iOS — SFSafariViewController
iOS — SFSafariViewController
'done' | 'close' | 'cancel'
닫기 버튼에 표시할 레이블 또는 아이콘입니다.
'pageSheet' | 'fullScreen'
pageSheet는 스와이프로 닫을 수 있는 카드로 표시되고, fullScreen는 전체 화면을 덮습니다.boolean
스크롤할 때 툴바를 접을 수 있습니다.
presentationStyle가 fullScreen인 경우에만 표시됩니다. 이 설정과 관계없이 pageSheet는 바를 고정된 상태로 유지합니다.'system' | 'light' | 'dark'
기기의 시스템 설정과 관계없이 라이트 또는 다크 외관을 강제합니다.
오류
INLINE_CODE_PLACEHOLDER_6cd4a606826ab9a_END는 오용 또는 플랫폼 오류가 발생한 경우에만CheckoutError와 함께 거부됩니다. 취소되거나 거부된 결제는 항상 결과로 반환되며, 예외가 아닙니다.
INVALID_CHECKOUT_URL:checkout.dodopayments.com세션 URL이 아닙니다.INVALID_RETURN_URL: 유효한 절대 URL이 아닙니다.ALREADY_IN_PROGRESS: checkout이 이미 실행 중입니다.PLATFORM_ERROR: 예기치 않은 플랫폼 오류입니다.
중단된 세션
checkout 도중 앱 또는 JS bundle이 종료되면 promise는 손실되지만 네이티브 레이어는 세션을 유지합니다. 다음 mount 시 세션을 복구하고 backend와 조정하세요.관련 문서
Mobile Integration Guide
Android, iOS 및 Flutter에 동일한 contract를 적용합니다.
Expo Boilerplate
checkout 통합을 포함한 완전한 Expo 예제입니다.