LoginSignup
16

More than 5 years have passed since last update.

posted at

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 info@wazalab.com")
        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の人気のひとつの理由となっているようです。現行コードとの共存も容易となるわけです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
16