React Native에서 In-App Purchase 구현하기

React Native에서 In-App Purchase 구현하기

목차

1. In-App Purchase란?
2. React Native에서 In-App Purchase 구현 방법
   • react-native-iap 설치
   • 2. iOS 및 Android 설정
     • iOS 설정
     • Android 설정
   • 3. 인앱 구매 기능 구현
     • 3.1 인앱 상품 목록 가져오기
     • 3.2 인앱 구매 처리
     • 3.3 구매 복원
3. In-App Purchase를 사용하는 이유
4. 관련 문서

In-App Purchase란?

 

In-App Purchase(IAP, 인앱 구매)는 모바일 앱 내에서 추가 콘텐츠나 프리미엄 기능을 구매할 수 있도록 지원하는 기능입니다. 이를 통해 앱 내 결제를 통해 수익을 창출할 수 있습니다. 다양한 앱에서 해당 기능을 접할 수 있는데요, 첨부한 사진과 같은 구매 방식입니다. 

React Native에서 In-App Purchase 구현 방법

1. react-native-iap 설치

yarn add react-native-iap
cd ios && pod install

2. iOS 및 Android 설정

iOS 설정

• Xcode에서 App Store Connect 계정을 연결해야 합니다.
• App Store Connect에서 인앱 구매 항목을 생성하고, 앱에서 사용할 수 있도록 설정합니다.
• Capabilities에서 In-App Purchase를 활성화합니다.
• Info.plist 파일에 아래 내용을 추가합니다.

<key>SKAdNetworkItems</key>
<array>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>f38h382jlk.skadnetwork</string>
    </dict>
</array>

 

 

위 설정은 Apple의 SKAdNetwork를 사용하여 광고 네트워크에서 앱 설치와 관련된 데이터를 추적할 수 있도록 하는 항목입니다. 이를 통해 앱 설치와 인앱 구매 이벤트를 보다 효과적으로 분석하고 최적화할 수 있습니다.

Android 설정

• Google Play Console에서 인앱 구매 항목을 등록해야 합니다.
• android/app/build.gradle 파일에서 billing 라이브러리를 추가합니다.

dependencies {
    implementation 'com.android.billingclient:billing:6.0.1'
}

 

또는 아래 설정으로도 가능합니다. 

dependencies {
        ...중략,
        classpath 'com.google.gms:google-services:4.4.2'
    }

• AndroidManifest.xml에 결제 권한을 추가합니다.

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

3. 인앱 구매 기능 구현

3.1 인앱 상품 목록 가져오기

import { useEffect, useState } from 'react';
import * as RNIap from 'react-native-iap';

const itemSkus = ['product_id_1', 'product_id_2'];

const fetchProducts = async () => {
  try {
    await RNIap.initConnection();
    const products = await RNIap.getProducts({ skus: itemSkus });
    console.log(products);
  } catch (error) {
    console.error(error);
  }
};

useEffect(() => {
  fetchProducts();
}, []);

 

3.2 인앱 구매 처리

const purchaseProduct = async (sku) => {
  try {
    const purchase = await RNIap.requestPurchase({ sku });
    console.log('Purchase success:', purchase);
  } catch (error) {
    console.error('Purchase failed:', error);
  }
};

3.3 구매 복원

const restorePurchases = async () => {
  try {
   const purchases = await RNIap.getAvailablePurchases();
   console.log('Restored purchases:', purchases);
  } catch (error) {
    console.error('Restore failed:', error);
  }
};

 

구매 복원이 필요한 이유

• 사용자가 새로운 기기에서 앱을 다시 설치하거나, 앱을 삭제 후 재설치하는 경우, 이전에 구매한 아이템을 다시 사용할 수 있어야 합니다.
• **비소모성 상품(예: 프리미엄 기능 해제)**이나 구독 상품의 경우, 앱이 정상적으로 구매 내역을 복원할 수 있어야 합니다.
• Apple과 Google의 앱스토어 정책에 따라, 구매 복원 기능을 반드시 제공해야 하는 경우가 있습니다.

In-App Purchase를 사용하는 이유

1. 수익 창출: 무료 앱에서도 추가 기능을 판매하여 수익을 얻을 수 있습니다.
2. 구독 모델: 정기 결제를 통해 지속적인 수익을 창출할 수 있습니다.
3. 사용자 경험 향상: 광고 없이 유료 기능을 제공하여 사용자 만족도를 높일 수 있습니다.
4. 앱 스토어 통합: Google Play 및 App Store에서 결제를 처리하여 안전한 트랜잭션을 보장합니다.

관련 문서

• react-native-iap 공식 문서
• Apple In-App Purchase 가이드
• Google Play Billing 라이브러리

오늘은 IAP 를 어떻게 구현할 수 있을지 확인해보았습니다. 

비소모성 상품(구독)과 소모성 상품의 차이점, 구독 변경, 환불 등 엣지케이스 핸들링은 후속 포스팅에 다뤄보겠습니다. 

긴 포스팅 읽어주셔서 감사합니다.