Making iOS In-App Purchases With Ionic Framework

I recently did a post on how to accomplish in-app purchases in Android with Ionic Framework, so this will compliment things from an iOS perspective. Freemium is the new normal for mobile apps. It allows people to download your app for free, but charge them for certain features.

The following should get you started with in-app purchases in your Ionic iOS application.

Assuming that you’ve already created an Ionic project and included iOS as one of the build platforms, run the following command to include j3k0’s Phonegap InAppPurchase iOS plugin:

cordova plugin add git://github.com/j3k0/PhoneGap-InAppPurchase-iOS.git

Don’t let the plugin name fool you. It does work for Apache Cordova, which makes it compatible with Ionic Framework.

With the plugin installed, it must be initialized within your application. I strongly recommend initializing in the $ionicPlatform.ready() method so that way it happens when your application loads.

if((window.device && device.platform == "iOS") && window.storekit) {
    storekit.init({
        debug:    true,
        ready:    onReady,
        purchase: onPurchase,
        restore:  onRestore,
        error:    onError
    });
}

The plugin has several callback functions to be set up during initialization.

var onReady = function() { }
var onPurchase = function(transactionId, productId, receipt) { }
var onRestore = function(transactionId, productId, transactionReceipt) { }
var onError = function(errorCode, errorMessage) { }

As soon as storekit.init is called, the onReady callback is executed. The other callbacks are executed when certain methods are called.

When the storekit.purchase(“productId1”); method is executed, the onPurchase callback will be made. When the storekit.restore(); method is executed, the onRestore callback will be made.

Let’s look at a full example of in-app purchases in action:

var exampleApp = angular.module('example', ['ionic'])
    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
            if((window.device && device.platform == "iOS") && window.storekit) {
                storekit.init({
                    debug:    true,
                    ready:    function() {
                        storekit.load(["productId1", "productId2", "productId3"], function (products, invalidIds) {
                            console.log("In-app purchases are ready to go");
                        });
                    },
                    purchase: function(transactionId, productId, receipt) {
                        if(productId === 'productId1') {
                            console.log("Purchased product id 1");
                        }
                    },
                    restore:  function(transactionId, productId, transactionReceipt) {
                        if(productId === 'productId1') {
                            console.log("Restored product id 1 purchase")
                        }
                    },
                    error:    function(errorCode, errorMessage) {
                        console.log("ERROR: " + errorMessage);
                    }
                });
            }
        });
    });

exampleApp.controller("ExampleController", function($scope) {
    $scope.buy = function() {
        if((window.device && device.platform == "iOS") && window.storekit) {
            storekit.purchase("productId1");
        }
    }

    $scope.restore = function() {
        if((window.device && device.platform == "iOS") && window.storekit) {
            storekit.restore();
        }
    }
});

The above example initializes the in-app purchase plugin and offers a way to make or restore a purchase via an example controller. According to the official Apple documentation, it is inappropriate to restore purchases during initialization which is why I created a separate method for doing so. Restoration, like purchasing, requires account sign in / password re-approval.

Some things to note about this plugin and plugins in general. In-app purchases cannot be tested in the iOS simulator and this plugin cannot be tested in a web browser. This plugin can only be used on a physical iOS device.

So how do you make test purchases? First you need to sign into iTunes Connect and create a test account. Do not try to use your real account to make test purchases. On your test device make sure you have signed out of your real account. When prompted in your application, sign in using the newly created test account.

A thing to note about test purchases for non-consumable items. Once you purchase a non-consumable item, it cannot be canceled or reset. The only way to test purchasing again is to create a new test account.

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.