In App Purchase with Ionic / Cordova

Hamza Hsain — Mon, 22 Jul 2019 15:43:16 +0000

Article initialement posté sur Medium.

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

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)

Photo by Navneet Shanu from 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 :

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

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 :

aporat / store-receipt-validator

PHP receipt validator for Apple iTunes, Google Play and Amazon App Store

store-receipt-validator

PHP receipt validator for Apple iTunes, Google Play and Amazon App Store

Requirements

PHP >= 7.3

Installation

composer require aporat/store-receipt-validator

Quick Example

iTunes

use ReceiptValidator\iTunes\Validator as iTunesValidator
$validator = new iTunesValidator(iTunesValidator::ENDPOINT_PRODUCTION); // Or iTunesValidator::ENDPOINT_SANDBOX if sandbox testing

$receiptBase64Data = 'ewoJInNpZ25hdHVyZSIgPSAiQXBNVUJDODZBbHpOaWtWNVl0clpBTWlKUWJLOEVkZVhrNjNrV0JBWHpsQzhkWEd1anE0N1puSVlLb0ZFMW9OL0ZTOGNYbEZmcDlZWHQ5aU1CZEwyNTBsUlJtaU5HYnloaXRyeVlWQVFvcmkzMlc5YVIwVDhML2FZVkJkZlcrT3kvUXlQWkVtb05LeGhudDJXTlNVRG9VaFo4Wis0cFA3MHBlNWtVUWxiZElWaEFBQURWekNDQTFNd2dnSTdvQU1DQVFJQ0NHVVVrVTNaV0FTMU1BMEdDU3FHU0liM0RRRUJCUVVBTUg4eEN6QUpCZ05WQkFZVEFsVlRNUk13RVFZRFZRUUtEQXBCY0hCc1pTQkpibU11TVNZd0pBWURWUVFMREIxQmNIQnNaU0JEWlhKMGFXWnBZMkYwYVc5dUlFRjFkR2h2Y21sMGVURXpNREVHQTFVRUF3d3FRWEJ3YkdVZ2FWUjFibVZ6SUZOMGIzSmxJRU5sY25ScFptbGpZWFJwYjI0Z1FYVjBhRzl5YVhSNU1CNFhEVEE1TURZeE5USXlNRFUxTmxvWERURTBNRFl4TkRJeU1EVTFObG93WkRFak1DRUdBMVVFQXd3YVVIVnlZMmhoYzJWU1pXTmxhWEIwUTJWeWRHbG1hV05oZEdVeEd6QVpCZ05WQkFzTUVrRndjR3hsSUdsVWRXNWxjeUJUZEc5eVpURVRNQkVHQTFVRUNnd0tRWEJ3YkdVZ1NXNWpMakVMTUFrR0ExVUVCaE1DVlZNd2daOHdEUVlKS29aSWh2Y05BUUVCQlFBRGdZMEFNSUdKQW9HQkFNclJqRjJjdDRJclNkaVRDaGFJMGc4cHd2L2NtSHM4cC9Sd1YvcnQvOTFYS1ZoTmw0WElCaW1LalFRTmZnSHNEczZ5anUrK0RyS0pFN3VLc3BoTWRkS1lmRkU1ckdYc0FkQkVqQndSSXhleFRldngzSExFRkdBdDFtb0t4NTA5ZGh4dGlJZERnSnYyWWFWczQ5QjB1SnZOZHk2U01xTk5MSHNETHpEUzlvWkhBZ01CQUFHamNqQndNQXdHQTFVZEV3RUIvd1FDTUFBd0h3WURWUjBqQkJnd0ZvQVVOaDNvNHAyQzBnRVl0VEpyRHRkREM1RllRem93RGdZRFZSMFBBUUgvQkFRREFnZUFNQjBHQTFVZERnUVdCQlNwZzRQeUdVakZQaEpYQ0JUTXphTittVjhrOVRBUUJnb3Foa2lHOTJOa0JnVUJCQUlGQURBTkJna3Foa2lHOXcwQkFRVUZBQU9DQVFFQUVhU2JQanRtTjRDL0lCM1FFcEszMlJ4YWNDRFhkVlhBZVZSZVM1RmFaeGMrdDg4cFFQOTNCaUF4dmRXLzNlVFNNR1k1RmJlQVlMM2V0cVA1Z204d3JGb2pYMGlreVZSU3RRKy9BUTBLRWp0cUIwN2tMczlRVWU4Y3pSOFVHZmRNMUV1bVYvVWd2RGQ0TndOWXhMUU1nNFdUUWZna1FRVnk4R1had1ZIZ2JFL1VDNlk3MDUzcEdYQms1MU5QTTN3b3hoZDNnU1JMdlhqK2xvSHNTdGNURXFlOXBCRHBtRzUrc2s0dHcrR0szR01lRU41LytlMVFUOW5wL0tsMW5qK2FCdzdDMHhzeTBiRm5hQWQxY1NTNnhkb3J5L0NVdk02Z3RLc21uT09kcVRlc2JwMGJzOHNuNldxczBDOWRnY3hSSHVPTVoydG04bnBMVW03YXJnT1N6UT09IjsKCSJwdXJjaGFzZS1pbmZvIiA9ICJld29KSW05eWFXZHBibUZzTFhCMWNtTm9ZWE5sTFdSaGRHVXRjSE4wSWlBOUlDSXlNREV5TFRBMExUTXdJREE0T2pBMU9qVTFJRUZ0WlhKcFkyRXZURzl6WDBGdVoyVnNaWE1pT3dvSkltOXlhV2RwYm1Gc0xYUnlZVzV6WVdOMGFXOXVMV2xrSWlBOUlDSXhNREF3TURBd01EUTJNVGM0T0RFM0lqc0tDU0ppZG5KeklpQTlJQ0l5TURFeU1EUXlOeUk3Q2draWRISmhibk5oWTNScGIyNHRhV1FpSUQwZ0lqRXdNREF3TURBd05EWXhOemc0TVRjaU93b0pJbkYxWVc1MGFYUjVJaUE5SUNJeElqc0tDU0p2Y21sbmFXNWhiQzF3ZFhKamFHRnpaUzFrWVhSbExXMXpJaUE5SUNJeE16TTFOems0TXpVMU9EWTRJanNLQ1NKd2NtOWtkV04wTFdsa0lpQTlJQ0pqYjIwdWJXbHVaRzF2WW1Gd2NDNWtiM2R1Ykc5aFpDSTdDZ2tpYVhSbGJTMXBaQ0lnUFNBaU5USXhNVEk1T0RFeUlqc0tDU0ppYVdRaUlEMGdJbU52YlM1dGFXNWtiVzlpWVhCd0xrMXBibVJOYjJJaU93b0pJbkIxY21Ob1lYTmxMV1JoZEdVdGJYTWlJRDBnSWpFek16VTNPVGd6TlRVNE5qZ2lPd29KSW5CMWNtTm9ZWE5sTFdSaGRHVWlJRDBnSWpJd01USXRNRFF0TXpBZ01UVTZNRFU2TlRVZ1JYUmpMMGROVkNJN0Nna2ljSFZ5WTJoaGMyVXRaR0YwWlMxd2MzUWlJRDBnSWpJd01USXRNRFF0TXpBZ01EZzZNRFU2TlRVZ1FXMWxjbWxqWVM5TWIzTmZRVzVuWld4bGN5STdDZ2tpYjNKcFoybHVZV3d0Y0hWeVkyaGhjMlV0WkdGMFpTSWdQU0FpTWpBeE1pMHdOQzB6TUNBeE5Ub3dOVG8xTlNCRmRHTXZSMDFVSWpzS2ZRPT0iOwoJImVudmlyb25tZW50IiA9ICJTYW5kYm94IjsKCSJwb2QiID0gIjEwMCI7Cgkic2lnbmluZy1zdGF0dXMiID0gIjAiOwp9';

try {
  $response = $validator->setReceiptData($receiptBase64Data)->validate();
  // $sharedSecret = '1234...'; // Generated in iTunes Connect's In-App Purchase menu
  // $response = $validator->setSharedSecret($sharedSecret)->setReceiptData($receiptBase64Data)->validate(); // use setSharedSecret() if for recurring subscriptions
} catch (Exception $e) {
  echo 'got error = ' . $e->getMessage() . PHP_EOL;
}

if ($response->isValid()) {
  echo 'Receipt is valid.' . PHP_EOL;
  echo 'Receipt data = ' . print_r($response->getReceipt()) . PHP_EOL;
  
  foreach ($response

…

View on GitHub

In app purchase Cordova plugin

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

j3k0 / cordova-plugin-purchase

In-App Purchase for Cordova on iOS, Android and Windows

Cordova Purchase Plugin

In-App Purchases for Cordova

Need professional help and support? Contact Me.

Summary

This plugin allows In-App Purchases to be made from Cordova, Ionic and Capacitor applications.

It lets you handle in-app purchases on many platforms with a single codebase.

This is a plugin for the Apache Cordova framework that provides an easy and flexible way to integrate in-app purchases into Cordova-based mobile applications, including popular frameworks such as Ionic and PhoneGap. With this plugin, you can easily add support for in-app purchases of digital content, such as subscriptions, consumables, and non-consumables, using the store-specific purchase APIs provided by the major mobile platforms. The plugin also supports requesting payments through popular payment providers such as Braintree, allowing you to easily accept payments from your users.

The Cordova-Plugin-Purchase plugin is designed to be easy to use and integrate into your Cordova app, and it provides a…

View on GitHub

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

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
Apple Developer
There's never been a better time to develop for Apple Platforms. 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

Register your products

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

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

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
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

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

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 :

devHamza / iap-demo-ionic-app

Demo application for in app purchase with ionic / cordova

This is a demo app for the article : "In App Purchase with Ionic/Cordova" find more at https://medium.com/bewizyu

View on GitHub

BEWIZYU Technology Développement, expertise sur plateformes à usage mobile www.bewizyu.com

DEV Community: Hamza Hsain

In App Purchase with Ionic / Cordova

Introduction

What can I sell using IAP ?

Consumable

Non-Consumable

Auto-Renewable Subscriptions

Non-Renewing Subscriptions

Our Bewiz Spin App

What I need to set up IAP

Ionic / Cordova mobile application

Server side application

aporat / store-receipt-validator

PHP receipt validator for Apple iTunes, Google Play and Amazon App Store

store-receipt-validator

Requirements

Installation

Quick Example

iTunes

In app purchase Cordova plugin

j3k0 / cordova-plugin-purchase

In-App Purchase for Cordova on iOS, Android and Windows

Cordova Purchase Plugin

Summary

Google and Apple accounts

Register your products

IAP Product lifecycle

Server side verification

Execute IAP Order

Turn off listeners

Sandbox and test users

Finally a demo App…

devHamza / iap-demo-ionic-app

Demo application for in app purchase with ionic / cordova