ionicハイブリットアプリでアプリ内課金を実装してみよう
アプリ内課金はご存知の方も多いと思います。アプリ本体は無料で、アプリの中で何らかの機能を解除したり、ゲームを有利に進めるためのアイテムを購入したりする仕組みのことです。
アプリ内課金は大きく
- 非消費アイテム
- 消費アイテム
に分かれます。
非消費アイテムは一度購入したら効果が永続的に続くものです。例えばレースゲームにおいて、有料のコースを購入するというパターンです。
消費アイテムは使う度に消費していくアイテムです。例えば釣りゲームにおける餌のようなものです。
では早速アプリ内課金の実装方法を見ていきましょう
cordova-plugin-purchaseを導入
他にも種類はあるようですが、わたしはCordova-plugin-purchaseを利用しました。
マニュアルなどは英語です。日本語の情報量は圧倒的に少なくて結構苦労しました。
cordova-plugin-purchaseをインストールするには、コマンドラインから
cordova plugin add cc.fovea.cordova.purchase –variable BILLING_KEY=”ほげほげ”
と入力します。
ほげほげ には、google play developer console から確認する専用のKeyを指定します。
課金するアプリをクリック>サービスとAPI>画面右側のライセンスとアプリ内課金に記載されている、MIIBで始まる4行くらいの長い文字列です。
BILLING_KEY(Googleのマニュアルではapp’s license key)はアプリごとに割り振られるユニークな値ですが、アプリをアップロードする前でも、このBILLING_KEYを取得することができます。詳しくはGoogle Play Developer Consoleマニュアルを参照してください(もちろん英語です(´・ω・`)英語いややー)
課金対象アプリのアップロードと商品の追加
Google play Developer consoleから、通常の手順でアプリをアップロードします。
cordova-plugin-purchaseがきちんと反映されていれば、google play Developer console上の、「アプリ内アイテム」から、アプリ内アイテムを追加できるようになるので、商品を追加します。
追加後、「有効」ボタンを押下して、有効にするのを忘れないように注意しましょう
アプリの商品が適用されるまで待ちます(´・ω・`)
cordova-plugin-purchaseのマニュアルによれば、Wait 6-8 hours(6~8時間程度アイテムの適用に時間がかかる)とのことです。
気長に待ちましょう(-。-)y-゜゜゜
Angular JS 上の処理
比較的わかりにくくて、苦労しました。
とりあえず商品購入ページの、JavaScriptコード部分を抜粋します
document.addEventListener('deviceready', initializeStore, false); function initializeStore() { store.verbosity = store.INFO; store.register({ id: "developer consoleで指定した商品名", alias: "商品名", type: store.PAID_SUBSCRIPTION // 定期購入ならstore.PAID_SUBSCRIPTION }); store.ready(); /* 購入ダイアログ表示 */ store.order("developer consoleで指定した商品名"); // 購入完了イベント store.when("order").approved(function(product) { product.finish(); }); store.refresh(); }
plugin公式サイトのサンプルとあまり変わらないです。
1点注意事項ですが、store.order の行が無いと、購入確認のポップアップが表示されないので注意です。
複数種類商品がある場合は、
$("#tar").on("click" , function(){})
などで処理を分ければ良いのかと思います。
アプリ内課金の動作確認
当然課金部分の動作確認は実機で行うことになります。
実機によっては「出版社はこのアイテムを購入できません」と表示されることもあります。
これはつまり、開発者のアカウントでは、購入の動作確認が出来ないようです。
別のアカウントなり、古いスマートフォンなりを使って実機デバッグしてください。
購入確認用のgoogleアカウントを1つ作成します。
google play developer console から、歯車アイコン>アカウントの詳細>画面右の「テスト用のアクセス権がある Gmail アカウント」に、作成したアカウントのGmailアドレスを指定します
結構日本語で紹介しているサイトが少ないので苦労しました。
とりあえず何とか動いた。
コメント
[…] キーワードを「phonegap plugin 課金」に変更するとやっと… ionicハイブリットアプリでアプリ内課金を実装してみよう という例があり、そこで初めて cordova-plugin-purchase にたどり着く。 […]