How to make "Cordova Billing" with various purchase options

Asked

Viewed 47 times

0

I’m studying Ordova and I’ve reached the point of adding Billing to my Apks So I’m using the plug "Cordova-plugin-Purchase", with the example code below (taken from the page itself https://gist.github.com/j3k0/3324bb8e759fef4b3054b834a5a88500), which works perfectly but for only one product!

My problem/question is the following: How to adjust the code below so I can have various different products with different values...

  1. I tried to duplicate the functions by adjusting their names and variables
  2. also tried to adjust the store.Register object

But I did not succeed... I appreciate the help!

Here’s the code I’m using to study:

<html>
<div class="app" style="border:1px solid red;">
        <p id="gold-coins">
            gold:
        </p>
        <div id="consumable1-purchase">
            wait please...
        </div>
    </div>
</html>



    <script>
    //
    //  Consumable
    // 
    document.addEventListener('deviceready', initStore);
    document.addEventListener('deviceready', refreshGoldCoinsUI);
    console.log("_____billing: ")
    // $('#findResults').append("<br>_____billing: ")
    function initStore() {

                if (!window.store) {
                    $('#findResults').append('<br>Store not available');
                    console.log('Store not available');
                    return;
                }

                store.verbosity = store.INFO;
                store.register({
                    id:    'value500',
                    alias: 'value500',
                    type:   store.CONSUMABLE
                });

                store.error(function(error) {
                    $('#findResults').append('<br>ERROR ' + error.code + ': ' + error.message);
                    console.log('ERROR ' + error.code + ': ' + error.message);
                });

                store.when('value500').updated(refreshProductUI);
                store.when('value500').approved(function(p) {
                    p.verify();
                });
                store.when('value500').verified(finishPurchase);

                store.refresh();
    }

    //
    // update tue amount of coins to your game!
    //
    function refreshGoldCoinsUI() {
                document.getElementById('gold-coins').innerHTML =
                'Gold: <strong>' + (window.localStorage.goldCoins | 0) + '</strong>';
    }
    // show it
    function refreshProductUI(product) {
                const info = product.loaded
                ? `<h1>${product.title}</h1>` +
                    `<p>${product.description}</p>` +
                    `<p>${product.price}</p>`
                : '<p>Retrieving info...</p>';
                const button = product.canPurchase
                ? '<button onclick="purchaseConsumable1()">Buy now!</button>'
                : '';
                const el = document.getElementById('consumable1-purchase');
                el.innerHTML = info + button;
    }

    function purchaseConsumable1() {
                store.order('value500');
    }

    function finishPurchase(p) {
                window.localStorage.goldCoins = (window.localStorage.goldCoins | 0) + 10;
                p.finish();
                refreshGoldCoinsUI();
    }

    </script>
apache-cordova android-billing

1 answer

2

Really,

As I suspected was problem with the store.Register object I was unable to create correctly.

Here is how the final result for 4 purchases

    //
    //  Consumable
    // 

    document.addEventListener('deviceready', initStore);
    document.addEventListener('deviceready', refreshGoldCoinsUI100);
    document.addEventListener('deviceready', refreshGoldCoinsUI500);
    document.addEventListener('deviceready', refreshGoldCoinsUI1000);
    document.addEventListener('deviceready', refreshGoldCoinsUI2000);



    function initStore() {

                    if (!window.store) {
                                    $('#findResults').append('<br>Store not available');
                                    console.log('Store not available');
                                    return;
                    }

                    store.verbosity = store.INFO;
                    //
                    //all products, should be same name from "google store's product".
                    store.register({
                        id:    'valor100',
                        alias: 'valor100',
                        type:   store.CONSUMABLE
                    });
                    store.register({
                        id:    'valor500',
                        alias: 'valor500',
                        type:   store.CONSUMABLE
                    });
                    store.register({
                        id:    'valor1000',
                        alias: 'valor1000',
                        type:   store.CONSUMABLE
                    });
                    store.register({
                        id:    'valor2000',
                        alias: 'valor2000',
                        type:   store.CONSUMABLE
                    });
                    //
                    // if we have some error, show it.
                    //
                    store.error(function(error) {
                        $('#findResults').append('<br>ERROR ' + error.code + ': ' + error.message);
                        console.log('ERROR ' + error.code + ': ' + error.message);
                    });

                    //
                    // START
                    //
                    //
                    // show products
                    //
                    // 100
                    store.when('valor100').updated(refreshProductUI100);
                    store.when('valor100').approved(function(p) {
                        p.verify();
                    });
                    store.when('valor100').verified(finishPurchase100);
                    // 500
                    store.when('valor500').updated(refreshProductUI500);
                    store.when('valor500').approved(function(p) {
                        p.verify();
                    });
                    store.when('valor500').verified(finishPurchase500);
                    // 1000
                    store.when('valor1000').updated(refreshProductUI1000);
                    store.when('valor1000').approved(function(p) {
                        p.verify();
                    });
                    store.when('valor1000').verified(finishPurchase1000);
                    // 2000
                    store.when('valor2000').updated(refreshProductUI2000);
                    store.when('valor2000').approved(function(p) {
                        p.verify();
                    });
                    store.when('valor2000').verified(finishPurchase2000);


                    //
                    // FINISH
                    //
                    // tell google store we are ready!
                    store.refresh();
    }

    //
    // update tue amount of coins to your game!
    //
    function refreshGoldCoinsUI100() {
                document.getElementById('gold-coins100').innerHTML =
                'Presentes oferecidos: <strong>' + (window.localStorage.goldCoins100 | 0) + '</strong>';
    }
    function refreshGoldCoinsUI500() {
                document.getElementById('gold-coins500').innerHTML =
                'Presentes oferecidos: <strong>' + (window.localStorage.goldCoins500 | 0) + '</strong>';
    }
    function refreshGoldCoinsUI1000() {
                document.getElementById('gold-coins1000').innerHTML =
                'Presentes oferecidos: <strong>' + (window.localStorage.goldCoins1000 | 0) + '</strong>';
    }
    function refreshGoldCoinsUI2000() {
                document.getElementById('gold-coins2000').innerHTML =
                'Presentes oferecidos: <strong>' + (window.localStorage.goldCoins2000 | 0) + '</strong>';
    }
    //
    // show it:
    //
    // 100
    function refreshProductUI100(product) {
                const info = product.loaded
                ? `<h1>${product.title}</h1>` +
                    `<p>${product.description}</p>` 
                    // `<p>${product.price}</p>`
                : '<p>Buscando informa&ccedil;&otilde;es...</p>';
                const button = product.canPurchase
                ? '<button class="btn btn-success btn-lg" onclick="purchaseConsumable1100()">clique aqui para contribuir <b>'+`${product.price}`+' <b> </button>'
                : '';
                const el = document.getElementById('consumable1-purchase100');
                el.innerHTML = info + button;
    }
    // 500
    function refreshProductUI500(product) {
                const info = product.loaded
                ? `<h1>${product.title}</h1>` +
                    `<p>${product.description}</p>` 
                    // `<p>${product.price}</p>`
                : '<p>Buscando informa&ccedil;&otilde;es...</p>';
                const button = product.canPurchase
                ? '<button class="btn btn-success btn-lg" onclick="purchaseConsumable1500()">clique aqui para contribuir  <b>'+`${product.price}`+' <b> </button>'
                : '';
                const el = document.getElementById('consumable1-purchase500');
                el.innerHTML = info + button;
    }
    // 1000
    function refreshProductUI1000(product) {
                const info = product.loaded
                ? `<h1>${product.title}</h1>` +
                    `<p>${product.description}</p>` 
                    // `<p>${product.price}</p>`
                : '<p>Buscando informa&ccedil;&otilde;es...</p>';
                const button = product.canPurchase
                ? '<button class="btn btn-success btn-lg" onclick="purchaseConsumable11000()">clique aqui para contribuir  <b>'+`${product.price}`+' <b> </button>'
                : '';
                const el = document.getElementById('consumable1-purchase1000');
                el.innerHTML = info + button;
    }
    // 2000
    function refreshProductUI2000(product) {
                const info = product.loaded
                ? `<h1>${product.title}</h1>` +
                    `<p>${product.description}</p>` 
                    // `<p>${product.price}</p>`
                : '<p>Buscando informa&ccedil;&otilde;es...</p>';
                const button = product.canPurchase
                ? '<button class="btn btn-success btn-lg" onclick="purchaseConsumable12000()">clique aqui para contribuir  <b>'+`${product.price}`+' <b> </button>'
                : '';
                const el = document.getElementById('consumable1-purchase2000');
                el.innerHTML = info + button;
    }
    //
    // BY IT!
    //
    // 100
    function purchaseConsumable1100() {
            store.order('valor100');
    }
    // 500
    function purchaseConsumable1500() {
            store.order('valor500');
    }
    // 1000
    function purchaseConsumable11000() {
            store.order('valor1000');
    }
    // 2000
    function purchaseConsumable12000() {
            store.order('valor2000');
    }

    //
    // Update local data
    //
    // 100
    function finishPurchase100(p100) {
            window.localStorage.goldCoins100 = (window.localStorage.goldCoins100 | 0) + 1;
            p100.finish();
            refreshGoldCoinsUI100();
    }
    // 500
    function finishPurchase500(p500) {
            window.localStorage.goldCoins500 = (window.localStorage.goldCoins500 | 0) + 1;
            p500.finish();
            refreshGoldCoinsUI500();
    }
    // 1000
    function finishPurchase1000(p1000) {
            window.localStorage.goldCoins1000 = (window.localStorage.goldCoins1000 | 0) + 1;
            p1000.finish();
            refreshGoldCoinsUI1000();
    }
    // 2000
    function finishPurchase2000(p2000) {
            window.localStorage.goldCoins2000 = (window.localStorage.goldCoins2000 | 0) + 1;
            p2000.finish();
            refreshGoldCoinsUI2000();
    }

Browser other questions tagged apache-cordova android-billing

You are not signed in. Login or sign up in order to post.