cordovaプラグインのアプリ内課金の処理をAngularjsで行いたい
お世話になります。開発環境はMonacaクラウドでアプリを開発しています。無料版は広告あり、アプリ内課金によって広告を非表示にしたいと考えています。
そこでアプリ内課金の処理をcordova-plugin-inapppurchase によって実装しました。こちらは問題なく動きました。（※コメントアウトされている処理が当該部分です。）
ただ、広告表示のフラグや価格表示などをAngularjsの$scopeによって制御したいと思い、ng-storekitをインストールしました。説明に従いコードを記述しましたが、カスタムビルドしても処理自体が走りません。
目標はAngularjsで製品の価格を取得することです。
直すべき部分をご指摘いただければ幸いです。
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/ng-storekit.js"></script>
<script>
var app = ons.bootstrap(['ngStorekit']);
ons.ready(function(){
// ---for Cordova Purchase Plugin 処理ここから---
// if(monaca.isIOS && window.storekit) {
// storekit.init({
// debug: true,
// ready: function() {
// storekit.load(["com.productid"], function (products, invalidIds) {
// alert("In-app purchases are ready to go");
// });
// },
// purchase: function(transactionId, productId, receipt) {
// if(productId === 'com.productid') {
// alert("Purchased com.productid id 1");
// }
// },
// restore: function(transactionId, productId, transactionReceipt) {
// if(productId === 'com.productid') {
// alert("Restored product id 1 purchase")
// }
// },
// error: function(errorCode, errorMessage) {
// alert("ERROR: " + errorMessage);
// }
// });
// }
// ---for Cordova Purchase Plugin 処理 ここまで---
// ---for ng-storekit 処理ここから---
$storekit
.setLogging(true)
.load(['com.productid'])
.then(function (products) {
console.log('products loaded');
})
.catch(function () {
console.log('no products loaded');
});
// ---for ng-storekit 処理ここまで---
});
// コントローラ間でデータを共有するサービス
app.factory('SharedStateService', function() {
var sharedData = {};
sharedData.data = {};
// データを設定
sharedData.set = function(data) {
sharedData.data = angular.copy(data);
window.localStorage.setItem('Data', JSON.stringify(data));
};
// データを返す
sharedData.get = function() {
return angular.copy(sharedData.data);
};
return sharedData;
});
// メイン画面 Controller
app.controller('mainCtrl', function($scope, SharedStateService) {
$scope.price = 0; //初期値
$scope.showAd = true;//広告表示フラグ
$scope.Data = JSON.parse(window.localStorage.getItem('Data'));
if ($scope.Data == null || Object.keys($scope.Data).length == 0) {
$scope.Data = {
taxMode: true,
taxValue: 0.08
};
}
SharedStateService.set($scope.Data)
ons.ready(function() {
myNavigator.on("prepop", function(e) {
if (e.leavePage.name == "setting.html") {
$scope.Data = SharedStateService.get();
}
});
});
});
// 設定画面 Controller
app.controller('settingCtrl', function($scope, $storekit,SharedStateService) {
$scope.Data = SharedStateService.get();
$scope.saveStorage = function() {
SharedStateService.set($scope.Data)
}
$scope.clear = function() {
$scope.Data = {
taxMode: true,
taxValue: 0.08
};
SharedStateService.set($scope.Data);
alert("初期化完了!");
}
// ---for Cordova Purchase Plugin 処理ここから---
//
// $scope.buy = function() {
// if(monaca.isIOS && window.storekit) {
// storekit.purchase("com.productid");
// }
// }
//
// $scope.restore = function() {
// if(monaca.isIOS && window.storekit) {
// storekit.restore();
// }
// }
// ---for Cordova Purchase Plugin 処理ここまで---
// ---for ng-storekit 処理ここから---
var products = $storekit.getProducts();
products.forEach(function (product) {
alert(product.productId);
console.log(product.description);
console.log(product.price);
});
$scope.buy = function() {
$storekit.purchase('com.productid');
}
$scope.restore = function() {
$storekit.restore();
}
// watch for purchases
$storekit
.watchPurchases()
.then(function () {
// Not currently used
}, function (error) {
// An error occured. Show a message to the user
}, function (purchase) {
if (purchase.productId === 'com.productid') {
if (purchase.type === 'purchase') {
// Your product was purchased
} else if (purchase.type === 'restore') {
// Your product was restored
}
console.log(purchase.transactionId);
console.log(purchase.productId);
console.log(purchase.transactionReceipt);
}
});
// ---for ng-storekit 処理ここまで---
});
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="main.html">
</ons-navigator>
</body>
<style>
body{
margin: 0;
padding: 100px 0 50px 0;
}
* html body{
overflow: hidden;
}
div#footerArea {
position: fixed !important;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #4E9ABE;
color: #fff;
}
* html div#contentsArea{
height: 100%;
overflow: auto;
}
.settings-header {
font-weight: 500;
font-size: 14px;
opacity: 0.4;
padding: 10px 0 0px 10px;
margin-bottom: -4px;
}
.settings-list {
margin-top: 10px;
}
</style>
</html>
main.html
<ons-page ng-controller="mainCtrl">
<ons-toolbar>
<div class="left"><ons-toolbar-button ng-click="myNavigator.pushPage('setting.html')"><ons-icon icon="fa-cog"></div>
<div class="center">消費税額計算</div>
</ons-toolbar>
<br />
<div id="contentsArea">
<div style="text-align: center">
金額
<input type="number" class="text-input" placeholder="税抜価格" ng-model="price" >
<span ng-show="Data.taxMode">
<br/>
×
<br/>
消費税 {{Data.taxValue*100}}%
<br/>
<br/>
={{price * Data.taxValue}}
</span>
<span ng-show="!Data.taxMode">
<br/>
<br/>
={{price}}
</span>
</div>
</div>
<span ng-show="showAd"><div id="footerArea">広告</div></span>
setting.html
<ons-page ng-controller="settingCtrl">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">設定</div>
</ons-toolbar>
<div class="settings-header">消費税</div>
<div style="text-align: center">
<ons-list modifier="inset" class="settings-list">
<ons-list-item>
消費税を使用する
<ons-switch modifier="list-item" ng-model="Data.taxMode" ng-checked="Data.taxMode" ng-change="saveStorage()"></ons-switch>
</ons-list-item>
<ons-list-item ng-show="Data.taxMode" >
<input type="number" class="text-input" placeholder="消費税を小数点入力"
ng-model="Data.taxValue" ng-blur="saveStorage()" style="margin-top:5px;">
</ons-list-item>
</ons-list>
<br/>
<ons-button ng-click="clear()" >設定を初期化</ons-button>
<br/>
<br/>
<ons-button ng-click="buy()" >広告をはずす</ons-button>
<br/>
<br/>
<ons-button ng-click="restore()" >購入を復元</ons-button>
</div>
画面イメージ
＜追記＞
上記の代わりに、ng-storekitの作者の方が提供しているcordova-plugin-inapppurchaseのサンプルを試してみました。しかしPurchaseで購入処理はうまくいくものの、その後エラーが表示されます。またRestoreでは必ず落ちてしまい、原因がわからない状況です。