こんにちは！207株式会社ソフトウェアエンジニアの若月（@wktq）です。

React Nativeアプリ内課金の実装で、これまでreact-native-iapを利用していましたが、 ExpoのInAppPurchasesに移行しました。

最近になってExpoのInAppPurchasesに移行しているという話はよく聞きますが、その理由と導入方法・注意点についてまとめました。

2022/12月追記 Revenue Catに移行しています。こちらもどうぞ

Expoのアプリ内課金はejectが必須
なぜExpo InAppPurchasesを選んだのか
大まかな課金のしくみ
Expo InAppPurchasesの導入（移行）
おわりに
- 参考記事
- We're Hiring

Expoのアプリ内課金はejectが必須

まず、Expoでアプリ内課金を実装する場合は、Managed Workflowからejectする必要があります。 Managed Workflowでのアプリ内課金機能は以前よりフォーラム内で最も要求されている機能ですが、 2021年8月現在、いまだに進行中パイプラインに乗らず次回のExpo SDKバージョンでも実装される気配はありません（たぶん）。理由としては、課金機能の実装のために抜本的な変更が必要であるためだそうです。

アプリ内課金を実装したい場合はejectした上で、SDK41から利用できるexpo dev clientを利用することでexpoの開発者体験を維持することができます。

なぜExpo InAppPurchasesを選んだのか

React Nativeアプリで課金を実装するためには、以下の2つの選択肢があります。

react-native-iap
Expo InAppPurchases API

やっていることはどちらも同じく、iOSのStoreKitとGoogle Play Billingという各OSのストアのSDKのwrapです。（react-native-iapはAmazon AppStoreも一部対応） Expo InAppPurchasesの週間約1,500ダウンロードに対し、react-native-iapは16,000ダウンロードです（2021/8/6現在）が、いくつかのExpo InAppPurchasesを使うべき理由があります。

ネイティブ関連の設定を追加で行う必要がない（expo or react-native-unimoduleが入っていれば）
ちゃんとした全体ドキュメントがある（https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/sdk/in-app-purchases.md#inapppurchasesgetproductsasyncitemlist-string）
react-native-iapのような未解決のissue、原因不明のエラーが少ない（と、言われているし、使っていても思う）

もともとreact-native-iapで実装を行っていましたが、イベントがうまく発火しないなどの問題があり、Expo InAppPurchasesへの移行を決めました。以上の理由から、新規で導入を検討している方は、最初からExpoのInAppPurchasesを利用することをお勧めします。

大まかな課金のしくみ

こちらはreact-native-iapのドキュメントから引用していますが、Expo InAppPurchaseに置き換えても同様です。
各ストアからの購入や更新は、都度取りに行くわけではなく、設置したリスナーによって通知されます。
ライブラリ側からは購入リクエストを送るだけで、購入ダイアログの表示やその中で起こるユーザーとのインタラクションは全てネイティブのSDK側でハンドリングされ、特定の結果のみが非同期的に返ってきます。
購入処理後はにレシート検証や機能のアンロックが完了したら、購入の承認（消耗型の場合は消費）が必要です。Expo InAppPurchasesではfinishTransactionAsync() で処理します。iOSではダイアログの再表示を防ぎ、Androidではこれを行わないと返金されます。

Expo InAppPurchasesの導入（移行）

ライブラリのセットアップ

ejectを行い、bare workflowに移行している必要があります。

yarn add expo-in-app-purchases
npx pod-install // iOS向け

AndroidManifest.xmlに以下を追記します

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

課金アイテムの作成

AppStoreConnect および Google Play Consoleにて、課金アイテムを作成します。AppStoreの場合は課金のためのAppleの審査が必要になります。

詳細（英語）：https://rossbulat.medium.com/react-native-subscriptions-with-in-app-purchases-setup-fdaf3863e07f

作成した課金アイテムのSKUを使用してストアから情報を取得していきます。

課金で使う用語・定義

consumable: 消耗品かどうか、falseなら定期購読
acknowledge: Androidにおける購読の承認。iOSではfinish
consume: Androidにおける消耗型アイテムの消費。iOSではfinish
purchaseToken: Androidのみ、購入検証用のトークン
transactionReceipt: iOSのみ、購入検証用のレシート
originalTransactionXXXXXX: iOSにおける最初の購読情報。途中で購読をキャンセルしても変わらない情報（receiptや日付など）

実装

ほぼ必ず使うであろうmethodsは以下の通りです。

connectAsync(): 必須。ストアに接続する（初期化）処理。
getProductsAsync([skus]): 課金アイテムを取得する
getPurchaseListener(cb(purchase)): 購入などの処理が走った際に発火するリスナー。起動時にも一度呼ばれる。
purchaseItemAsync(sku, currentSku?): アイテムの購入処理開始リクエスト。Androidのみ、すでに有効なサブスクリプションがある場合、currentSkuを指定する。
finishTransactionAsync(purchase, consume): 購入後の承認（iOSであればconsume、Androidであればacknowledge）