In App Purchase with Ionic / Cordova
Tags: android, ios, cordova, ionic
Published: 2019-07-22 15:43:16


Article initialement posté sur [Medium](https://medium.com/bewizyu/in-app-purchase-with-ionic-cordova-18960239f989).


## Introduction

In App Purchase (or integrated purchase) gives the opportunity to sell additional content within a native mobile application (smartphone and tablet). If your product matches the in-app purchase categories bellow, then you can, and even must, use In app-purchase.

![A typical example of IAP](https://cdn-images-1.medium.com/max/3044/1*A7DWo3FqQqnAuJiXNVQrGg.png)*A typical example of IAP*

## What can I sell using IAP ?

In principle, you can sell whatever you want as long as it belongs to the following categories :

### Consumable

Users can purchase different types of consumables, such as lives or gems in a game, to further their progress through an app. Consumable in-app purchases are used once, are depleted, and can be purchased again.

### Non-Consumable

Users can purchase non-consumable, premium features within an app. Non-consumables are purchased once and do not expire, such as additional filters in a photo app.

### Auto-Renewable Subscriptions

Users can purchase access to services or periodically updated content, such as monthly access to cloud storage or a weekly subscription to a magazine.

### Non-Renewing Subscriptions

Users can purchase access to services or content for a limited duration, such as a season pass to streaming content. This type of subscription does not renew automatically, so users need to renew each time.

You can find more informations here => [the apple documentation](https://developer.apple.com/in-app-purchase/)

## Our Bewiz Spin App

We want to create a mobile app in which the user can buy credits that we will call **Bewiz.** With these Bewizs he can spin a wheel, to try to win gifts 🎁 (1 Bewiz => 1 spin)

![Photo by [Navneet Shanu ](https://www.pexels.com/@navneet-shanu-202773?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)from [Pexels](https://www.pexels.com/photo/brown-carriage-wheel-672630/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)](https://cdn-images-1.medium.com/max/9216/1*F8D_fSLWaMv0vszCw9Ytbg.jpeg)*Photo by [Navneet Shanu ](https://www.pexels.com/@navneet-shanu-202773?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)from [Pexels](https://www.pexels.com/photo/brown-carriage-wheel-672630/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)*

For our case, we will need to use consumable products because it's used to buy credits that are used once to spin the wheel.

Lets imagine that we have this set of suggested products :

![](https://cdn-images-1.medium.com/max/2358/1*N2ah_00DHtC_Spp_yapd0Q.png)

**10** Bewiz for **10€**, **50** Bewiz for **40€** and **100** Bewiz for **75€**

Let's see how can we put all this in place … 😀

## What I need to set up IAP

### Ionic / Cordova mobile application

As we will develop an ionic mobile app, you can follow these steps to initiate your project :
[**Free Mobile App Development: Getting Started with Ionic Apps**
*Create an Ionic App using one of our ready-made app templates, or a blank one to start fresh. Check out the Market for…* ionicframework.com](https://ionicframework.com/getting-started#cli)

### Server side application

For security reasons, the purchase validation should be done in the server side.

After each purchase the store returns a receipt data that should be validated in the server side (a base64 string for IOS, and a Json format for Android).

For our Bewiz Spin we will use a PHP server side receipt validation using this open source library :

{% github aporat/store-receipt-validator %}

### In app purchase Cordova plugin

For now, there is one main open source cordova plugin available on Github and supported by the ionic community.

{% github j3k0/cordova-plugin-purchase %}

There is also a wrapper for ionic applications :
[**In App Purchase 2 - Ionic Documentation**
*Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base…* ionicframework.com](https://ionicframework.com/docs/native/in-app-purchase-2)

Add all these dependencies to your **package.json** :

{% gist https://gist.github.com/devHamza/c58a495e2c13c3e8196a45e8ccf9ad96 %}

BILLING_KEY in the plugin's configuration matches your license key for in-app billing should be added manually to your project. This key is found in Services and API in the Google Play Developer Console.
For more informations : [here](https://github.com/j3k0/cordova-plugin-purchase/wiki/Setup-for-Android-Google-Play#add-android-billing-key)

### Google and Apple accounts

To be able to configure your IAP items you need to create an iTunes developer account for IOS app and play store account for Android
[**Apple Developer**
*There's never been a better time to develop for Apple Platforms.* developer.apple.com](https://developer.apple.com/)

[**Google Play Console**
*Publish your apps and games with the Google Play Console and grow your business on Google Play. Benefit from features…* developer.android.com](https://developer.android.com/distribute/console)

## Register your products

Register all your products in the google play console and apple iTunes console.

For reminder, you have 3 products (10, 50 and 100 credits), so you have to create 3 product IDs: credits_10, credits_50, credits_100

You can find below how to create your in app products on IOS and Android
[**Create In App Products in your Google Play Account**
*In order to be able to offer a fee-based edition through in-app purchases in your Kiosk-App for Android devices, an…* support.pressmatrix.com](https://support.pressmatrix.com/hc/en-us/articles/202331832-Create-In-App-Products-in-your-Google-Play-Account)

[**In-App Purchase Tutorial: Getting Started**
*Learn how to grow app revenue in this in-app purchase tutorial by allowing users to purchase or unlock content or…* www.raywenderlich.com](https://www.raywenderlich.com/5456-in-app-purchase-tutorial-getting-started)

All the In App Products should be registered in the app bootstrap, this synchronize the local products data with the remote one.

{% gist https://gist.github.com/devHamza/6812f452779639bf7aacadb0144f01ec %}

## IAP Product lifecycle

There is many events triggered with the purchase workflow, that allow us to handle and manage errors, success, updates …

{% gist https://gist.github.com/devHamza/e6631530165c11c680aae98950863609 %}

**Approved** means that the product is purchased and the purchase is validated locally, ideally it's the best place to call product.verify() to start server side receipt validation.

**Cancelled** when the purchase is cancelled, it's time to show an error message.

**Error** when an error occurs during purchase workflow

**Updated** it's a push based event, when the product informations are updated (price, label, … )

## Server side verification

When product.verify() is called, an inAppPurchase.validator event is triggered and it's the best place where you can execute your server side receipt verification.

For our example the creditsProvider.purchase() is responsible for receipt verification and return a status according to the validation results ("success" or "failure")

Having a success status means that the receipt is valid and now we can finish the transaction by calling product.finish()

{% gist https://gist.github.com/devHamza/3d6294a4bfd2e7dfc96a839e13fc0938 %}

## Execute IAP Order

To trigger the purchase workflow above you should call the inAppPurchase.order()

{% gist https://gist.github.com/devHamza/e25dd85a35ea01e3d6b14b3e1f2064bd %}

## Turn off listeners

After leaving the view, you should turn off all the event listeners by calling inAppPurchase.off()

{% gist https://gist.github.com/devHamza/702e3ede4bb8f093bd28a753e1b15b16 %}


## Sandbox and test users

For testing purposes you should define sandbox iCloud users for IOS and add test users for Android.

Here bellow you can find some links that will help

Android
[**Test Google Play Billing | Android Developers**
*After you finish your static response testing, and you verify that signature verification is working in your…* developer.android.com](https://developer.android.com/google/play/billing/billing_testing)

IOS
[**How to create a Sandbox Tester Account on iTunes Connect**
*Creating a Sandbox Tester account in easy thanks to iTunes Connect. A Sandbox account allows you, the developer, to…* medium.com](https://medium.com/@codeneophyte/how-to-create-a-sandbox-tester-account-on-itunes-connect-57eda4247f5c)

## Finally a demo App…

Now that you have all what you need to begin your IAP setup, you may probably wish to have a complete demo app with all the steps above… you can find bellow a complete demo app :

{% github devHamza/iap-demo-ionic-app %}


[**BEWIZYU Technology** *Développement, expertise sur plateformes à usage mobile* www.bewizyu.com](https://www.bewizyu.com/make)