React Native - In app purchase/アプリ内課金(iOS)

今日はReact Nativeでアプリ内課金を実装してみます。iOSのモジュールreact-native-in-app-utilsを利用します。

環境設定

1. インストール

 $ npm install react-native-in-app-utils --save.

2)ライブラリのリンク

いつものようにここを参照しながら、Xcodeでライブラリをリンクさせる。node_modules/react-native-in-app-utils/InAppUtils.xcodeproj/をドラックアンドドロップでXcodeのライブラリに追加後、link binaryする。

##　使い方

iTunes connectで課金の設定をしていることを前提とします。課金自体は非常にシンプルで、InAppUtils.loadProductsでproductsをAppleから取得し、そのプロダクトを買う場合に、InAppUtils.purchaseProductを行うだけです。

let InAppUtils = require('NativeModules').InAppUtils;
let productID = 'com.xxx.yyy.10_credit';

let profile = React.createClass({

  getInitialState(){
    return {
      user: {}
    }
  },

  componentDidMount(){
    var products = [
      productID,
    ];
    InAppUtils.loadProducts(products, (error, products) => {
      //console.log(products);
      //console.log(error);
      if(!error){
        this.setState({price: `(10 credit/${products[0].priceString})` });
      }
    });
  },

  onPressPurchase(){
    InAppUtils.purchaseProduct(productID, (error, response) => {
      if(error){
　　　　　//課金失敗時の処理
        AlertIOS.alert("Error", "Failed to purchase. Please contact [e-mail]")
        purchaseHistoryActions.trackError(error);
      }else if(response && response.productIdentifier) {
　　　　　//課金成功時の処理。ここでは、Historyにログを残し、ユーザに10クレジット追加かする処理。
        purchaseHistoryActions.trackRecord(response.transactionIdentifier);
        userActions.addCredit(10);
      }
    });
  },

  render(){
    return (
      <Button onPress="onPressPurchase">Buy</Button>
    )
  }
}

Summary

このように既存のライブラリをいい感じに抽象化していて、そのライブラリを使うインストールもドラックアンドドロップとLink Binaryするだけで非常に簡単です。私は他のハイブリッドをあまり触ったことがありませんが、Podcastを聞くとこのインストールの容易さがReacg Nativeの人気のひとつの理由となっているようです。現行コードとの共存も容易となるわけです。