Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Making Android In-App Purchases With Ionic Framework

TwitterFacebookRedditLinkedInHacker News

The future of mobile app design is in the freemium model. No one wants to risk paying for an application that might stink so as a developer it is a good idea to charge for features in your app rather than the app itself.

Using Apache Cordova, Ionic Framework, and the poiuytrez AndroidInAppBilling plugin you can easily handle Android in-app purchases.

In your existing Ionic project, make sure that you’ve added the Android platform. This can be done by running the following command from the command line:

ionic platform add android

The next step is to add the in-app billing plugin to your project. Run the following commands to download and install the plugin:

cd /home/nraboy/Desktop
git clone https://github.com/poiuytrez/AndroidInAppBilling.git
cd /path/to/your/ionic/project
cordova plugin add /home/nraboy/Desktop/AndroidInAppBilling/v3

Because the plugin does not reside in the root of the Git repository you must first download the entire repository to your computer and then install the latest version of the plugin. In this case it is version 3. So when using the above four commands, make sure to replace the path information with your own.

The AndroidInAppBilling plugin has a few commands that we are going to focus on, but there will be others you can implement on your own:

inappbilling.init(success, error, options, skus);
inappbilling.getPurchases(success, fail);
inappbilling.buy(success, fail, productId);

Before we begin to implement these methods in our app.js file, we need to first add the apps Base64-encoded RSA public key to the project. Failing to add this will result in the plugin not functioning properly. You can find this key in your Google Play Developer Console and navigating to Services & APIs inside your particular application.

Google Play License Key

Add this public key to res/values/billing_key.xml like so:

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="billing_key">MIIBIjANBgk...AQAB</string>
</resources>

With the public key added, we can now start making in-app purchases. The plugin must first be initialized in order to be used. It is recommended to do this in your $ionicPlatform.ready() method:

if((window.device && device.platform == "Android") && typeof inappbilling !== "undefined") {
    inappbilling.init(function(resultInit) {
        console.log("IAB Initialized");
    },
    function(errorInit) {
        console.log("ERROR -> " + errorInit);
    },
    {showLog: true},
    ["productId1", "productId2", "productId3"]);
}

The above code will first check to make sure you are on an Android device and that the inappbilling plugin is available. If this is true then initialize the plugin with a defined set of product ids. The product ids are whatever you set when adding to the Google Developer Console. For debug purposes the showLog option is set to true.

Once initialized, we can start using other IAB commands. For example, if you want to get all purchases that the user made in your app you can run the following:

inappbilling.getPurchases(function(result) {
    console.log("PURCHASES -> " + JSON.stringify(result));
},
function(errorPurchases) {
    console.log("PURCHASE ERROR -> " + errorPurchases);
});

If the method is successful, a JSON array will be returned containing INAPP_PURCHASE_DATA like explained in the official Android documentation. Below was taken directly from the documentation:

FieldDescription
orderIdA unique order identifier for the transaction. This corresponds to the Google Wallet Order ID.
packageNameThe application package from which the purchase originated.
purchaseIdThe item’s product identifier. Every item has a product ID, which you must specify in the application’s product list on the Google Play Developer Console.
purchaseTimeThe time the product was purchased, in milliseconds since the epoch (Jan 1, 1970).
purchaseStateThe purchase state of the order. Possible values are 0 (purchased), 1 (canceled), or 2 (refunded).
developerPayloadA developer-specified string that contains supplemental information about an order. You can specify a value for this field when you make a getBuyIntentrequest.
purchaseTokenA token that uniquely identifies a purchase for a given item and user pair.

Let’s say that you review the purchase list from getPurchases() and determine that you want to buy something that hasn’t already been purchased. Simply run the following:

inappbilling.buy(function(resultBuy) {
    console.log("PURCHASE SUCCESSFUL")
}, function(errorBuy) {
    console.log("ERROR BUYING -> " + errorBuy);
},
purchaseId);

To string all this together, see the example app.js below. It will initialize the IAB plugin for Android in the $ionicPlatform.ready() and get all the user’s purchases at the same time. Then in a controller a user can make a purchase.

var exampleApp = angular.module('example', ['ionic'])
    .run(function($ionicPlatform, $ionicPopup) {
        $ionicPlatform.ready(function() {
            if((window.device && device.platform == "Android") && typeof inappbilling !== "undefined") {
                inappbilling.init(function(resultInit) {
                    inappbilling.getPurchases(function(result) {
                        console.log("PURCHASE RESPONSE -> " + JSON.stringify(result));
                    },
                    function(errorPurchases) {
                        console.log("PURCHASE ERROR -> " + errorPurchases);
                    });
                },
                function(errorInit) {
                    console.log("INITIALIZATION ERROR -> " + errorInit);
                },
                {showLog: true},
                ["ad_free"]);
            }
        });
    });


exampleApp.controller('ExampleController', function($scope) {
    $scope.buyAdFree = function() {
        if((window.device && device.platform == "Android") && typeof inappbilling !== "undefined") {
            inappbilling.buy(function(data) {
                console.log("ITEM PURCHASED");
            }, function(errorBuy) {
                console.log("ERROR BUYING -> " + errorBuy);
            },
            "ad_free");
        }
    }
});
Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.