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)
from [Pexels](https://www.pexels.com/photo/brown-carriage-wheel-672630/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F9216%2F1%2AF8D_fSLWaMv0vszCw9Ytbg.jpeg)
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…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…
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
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
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
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
BEWIZYU Technology Développement, expertise sur plateformes à usage mobile www.bewizyu.com
Top comments (0)