Blogs

ブログ一覧

ReactNative

課金システム

ReactNativeに課金システムを導入しよう

公開日：2022年02月10日

1 ReactNativeに課金を入れるためのロードマップ
2 課金要素はContextでまとめよう！
3 課金を導入してみて

先日、CrossStarProjectでは初の試みとなるアプリのリリースをしました！

CrossStarProjectは、SNSサービスから始まった事業ですが、それがなかなかうまくいかず。。。

それで、比較的マネタイズがしやすいアプリ開発事業から始めようとなったわけですが、エンジニアの僕自身もアプリを制作するのは初めての経験でした。

制作期間は1ヶ月で色々と苦労はしましたが、ようやくアップロードできて嬉しい限りです！

作ったアプリについてはこちらからぜひチェックしてみてください！！

Penalty

今回のアプリ『Penalty』の開発では『ReactNative』を使って進めていました。

正直な話、このReactNativeはエンジニア界隈ではオワコン扱いされており、日本語による参考記事がほとんどないです。

とは言っても僕は過去にReactによる制作を経験しているので、参考記事がなくとも、その知識でなんとかアプリを作ることはできました。

しかし、問題は解決したわけではありません。

そんな僕にも立ちはだかった壁があります。

そう、それは “課金システム” です。

ただでさえ、金銭関連のシステムなので緊張するのに、それに加えて参考になる記事が少ないとなるともう全くわからないです。何十回も台パンしました（笑）。

でも、最終的にはなんとかなったので、そのなんとかなった方法を今回は紹介したいと思います！

ReactNativeに課金を入れるためのロードマップ

ReactNativeに課金を導入する方法を調べると、主に2つの課金システムのパッケージがあるようです。

・react-native-iap

・InAppPurchase

この２つですね。

ですが、どちらの方法も、日本語で書いてある記事だと情報量が圧倒的に少ないです。英語の記事ならいくつかありましたが、英語が苦手というエンジニア失格の僕には絶望的でした。。

ですが、そんな僕にも一筋の光は差し込んでくれます。それが以下の記事になります。

React Nativeで作ったスマホアプリにAdmob（広告）とRevenue Cat（課金）を使ってマネタイズする

この記事では、『RevenueCut』というサービスと『ReactNativePurchase』というパッケージを用いて、課金を導入する方法を1から10まで丁寧に書いてくれています。どれくらい丁寧かというと、RevenueCutで複雑になってくる言葉の概念についても書かれてるくらいです。

料金は1000円かかりますが、 ReactNativeに課金を導入したいなら絶対に読むべき記事です。マジで神です。ReactNativeエンジニアなら必読するべき記事です。

そして、この記事の通りにやってみて、ある程度課金について理解したなら、次は『RevenueCatのdocument』を読みましょう。英語で読み進めるのは大変ですが、まぁ理解できる（というかできないといけない）と思います（笑）。

基礎は上にあげた記事で学んでいると思うので、全然わからないということはないと思いますよ！

RevenueCat documentation

この2つでReactNativeの課金の基礎は出来上がってると思います！

課金要素はContextでまとめよう！

上で紹介した記事はものすごく素晴らしくて、僕の課金システムの設計をかなり助けてくれましたが、唯一欠点があるとすれば、”Context”でまとめていない点です。

課金システムは、様々な場所で用いるため、Contextを用いてまとめた方が、個人的にはとても楽でしたね。

以下にサンプルをあげます。

PurchaseProvider.tsx

import React, { useEffect, useState, useContext } from "react";
import { Alert } from "react-native";
import Purchases from "react-native-purchases"

const IAPContext: React.Context<any> = React.createContext({
})

const IAPProvider = ({children}) => {
  useEffect(() => {
    firstConnect()
  },[])

  const firstConnect = async () => {
    try{
      // 初期化
      await Purchases.setDebugLogsEnabled(true)
      if(Platform.OS === "ios"){
        Purchases.setup("PUBLIC_iOS_SDK_KEY");
      }
      //購入情報を取得
      const offerings = await Purchases.getOfferings()
      //この下に購入状況によってアプリに反映させたい情報を書いていく
    }
    catch(e){
      console.log(e)
    }
  }

  //購入処理
  const purchase = async (purchase:string) => {
    try {
        //購入処理を書いていく

    } catch (e) {
        if (!e.userCancelled) {
            console.log(e);
            Alert.alert('購入できませんでした')
        }
    }
  }

  const restore = async () => {
    try {
      //復元処理を書いていく

    } catch (e) {
      console.log(e);
      Alert.alert('復元対象がありません')
    }
  }

  return(
      <IAPContext.Provider
          value={{
            purchase,
            restore
          }}
      >
          { children }
      </IAPContext.Provider>
  )
}

const useIAP = () => {
    const iap = useContext(IAPContext)
    if(iap == null){
        throw new Error("usePenaltys() called outside of a TasksProvider?")
    }

    return iap;
}

export { IAPProvider, useIAP }

App.tsx

import React from 'react';
import { View } from 'react-native';

import SampleScreen from './SampleScreen';
import { IAPProvider } from './PurchaseProvider';

const App = () => {
  return (
    <View>
      <IAPProvider>
        <SampleScreen />
      </IAPProvider>
    </View>
  );
};

export default App;

SampleScreen.tsx

import React from "react"
import {
    Button
} from "react-native"
import { useIAP } from "./PurchaseProvider"


const SampleScreen = () => {
    const { purchase, restore } = useIAP()

    return(
        <>
            <Button title="購入" onPress={() => purchase()} />
            <Button title="復元" onPress={() => restore()} />
        </>
    )
}

export default SampleScreen

※一部有料記事を参考にしているため、有料記事を参考にしなければわかりにくいように書いてあります。

ですが、Reactをある程度やっている人であれば問題ないと思います。