In App Purchase with Ionic / Cordova
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.
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
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)
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 :
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 :
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 :
In app purchase Cordova plugin
For now, there is one main open source cordova plugin available on Github and supported by the ionic community.
There is also a wrapper for ionic applications :
Add all these dependencies to your package.json :
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
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
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
All the In App Products should be registered in the app bootstrap, this synchronize the local products data with the remote one.
IAP Product lifecycle
There is many events triggered with the purchase workflow, that allow us to handle and manage errors, success, updates …
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()
Execute IAP Order
To trigger the purchase workflow above you should call the inAppPurchase.order()
Turn off listeners
After leaving the view, you should turn off all the event listeners by calling inAppPurchase.off()
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
IOS
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 :
Follow us on Linkedin, Twitter and our website bewizyu.com
