인앱 결제를 구현하기 전에, 먼저 기존 프로젝트 또는 새 프로젝트에 RevenueCat SDK를 가져와야 합니다. 시작하려면 다음 의존성을 프로젝트에 추가하세요:

GitHub에서 최신 릴리스 버전을 확인할 수 있습니다.

설치

npm 사용:

npm install --save react-native-purchases

또는 yarn 사용:

yarn add react-native-purchases

플랫폼별 구성

iOS 설정

iOS의 경우 "In-App Purchase" capability를 활성화해야 합니다:

1. Xcode에서 프로젝트 열기
2. 프로젝트 타겟 선택
3. "Signing & Capabilities"로 이동
4. "+ Capability" 클릭 후 "In-App Purchase" 추가

Android 설정

Android의 경우 AndroidManifest.xml에 billing 권한을 추가하세요:

<uses-permission android:name="com.android.vending.BILLING" />

또한 AndroidManifest.xml에서 Activity의 launchMode가 standard 또는 singleTop으로 설정되어 있는지 확인하세요:

<activity
  android:name=".MainActivity"
  android:launchMode="standard"
  ...
/>

RevenueCat SDK 초기화

이제 RevenueCat SDK를 초기화해 보겠습니다. 메인 App.js 또는 App.tsx 파일에서 수행합니다.

1. App.js (또는 TypeScript 프로젝트의 경우 App.tsx) 열기
2. 파일 상단에 SDK import
3. API 키를 붙여넣으세요

이것으로 구현의 50%를 완료했습니다!

이제 사용자 Entitlement를 검증하는 방법을 알아보겠습니다.

앞서 언급했듯이, Entitlement는 사용자가 구매 후 잠금 해제하는 접근 수준 또는 기능을 나타냅니다. 이를 통해 광고 배너를 표시할지 또는 프리미엄 접근 권한을 부여할지 등을 결정할 수 있습니다.

아래 코드 스니펫을 사용하여 사용자가 활성 Entitlement를 가지고 있는지 쉽게 확인할 수 있습니다.

이제 광고 없는 경험을 제공하기 위한 인앱 결제를 구현해 보겠습니다. 시작하려면 먼저 RevenueCat 대시보드에서 관련 상품 정보를 가져와야 합니다.

이것으로 단 몇 줄의 코드만으로 완전한 기능을 갖춘 인앱 결제 흐름을 통합했습니다.

이제 React Native에서 Paywall을 구현할 차례입니다.

구성 완료입니다! 이제 사용자가 필요한 Entitlement를 가지고 있지 않을 때마다 Paywall Editor에서 구성한 것과 동일한 디자인으로 페이월을 표시할 수 있습니다.

이 Codelab에서는 RevenueCat의 React Native SDK를 연동하고, 인앱 결제를 구현하고, React Native에서 페이월을 구축하는 방법을 배웠습니다. 이제 앱을 출시하고 더 많은 수익을 올릴 시간입니다!

아래 리소스를 통해 RevenueCat SDK 사용에 대해 더 자세히 알아볼 수 있습니다:

• 제품 튜토리얼
• React Native SDK Reference
• RevenueCat 커뮤니티