

お世話になります。開発環境はMonacaクラウドでアプリを開発しています。無料版は広告あり、アプリ内課金によって広告を非表示にしたいと考えています。

そこでアプリ内課金の処理を[cordova-plugin-inapppurchase](https://github.com/j3k0/cordova-
plugin-purchase) によって実装しました。こちらは問題なく動きました。（※コメントアウトされている処理が当該部分です。）

ただ、広告表示のフラグや価格表示などをAngularjsの$scopeによって制御したいと思い、[ng-
storekit](https://github.com/AlexDisler/ng-
storekit)をインストールしました。説明に従いコードを記述しましたが、カスタムビルドしても処理自体が走りません。

目標はAngularjsで製品の価格を取得することです。  
直すべき部分をご指摘いただければ幸いです。

index.html

[code]

    <!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>
    
[/code]

main.html

[code]

    <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>  
    
[/code]

setting.html

[code]

    <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>
    
[/code]

  
画面イメージ  
[![画像の説明をここに入力](https://i.stack.imgur.com/HgQ70.png)](https://i.stack.imgur.com/HgQ70.png)

＜追記＞  
上記の代わりに、ng-storekitの作者の方が提供している[cordova-plugin-
inapppurchase](https://github.com/AlexDisler/cordova-plugin-
inapppurchase)の[サンプル](https://github.com/AlexDisler/cordova-inapppurchases-
app)を試してみました。しかしPurchaseで購入処理はうまくいくものの、その後エラーが表示されます。またRestoreでは必ず落ちてしまい、原因がわからない状況です。


CC BY-SA 3.0
2016-03-09T06:08:36.840
22946
2016-03-12T07:13:07.610
2016-03-09T13:58:28.667
14390
14390
question
monaca html onsen-ui angularjs アプリ内課金
cordovaプラグインのアプリ内課金の処理をAngularjsで行いたい


自己解決しました。  
１．index.htmlのons.ready内の処理を設定画面のコントローラーに移動  
２．アプリの価格を取得するために、ready関数の中でproduct情報から価格を取得し、$scopeに設定  
これでいけました。

[code]

    ready:    function() {
    　storekit.load(["com.productid"], function (products, invalidIds) {  
        var p = products;
        for(var i = 0; i < p.length; i+=1){
            if(p[i].id == 'com.productid'){
                $scope.price = p[i].price;
            }
        }
    　});　},
    
[/code]


CC BY-SA 3.0
2016-03-12T07:13:07.610
23049
2016-03-12T07:13:07.610
14390
22946
answer