An Introduction of HMS In-App Purchase in Ionic Application ( Cross Platform Integration )
Introduction
Back in the 90’s, it was a revolutionary to have your own website and putting an advertisement in the website was the only source of revenue. But today as space matures, it’s essential for brands to have a clear strategy to monetize their mobile presence. Some companies charge their users before downloading their apps. Others depend on in-app advertising as their sole revenue stream. But, for a lot of brands, their mobile monetization strategy relies entirely (or some part) on In App Purchase. To summarise, when a customer spends money within a mobile app, that’s an in-app purchase.
To make easier for users to make payments and developers to focus solely on app innovation, Huawei provided us with an extraordinary kit i.e. HMS Core In App Purchase (IAP) Kit.
HMS In App Purchase helps developers in variety of situation to earn revenue such as paying for access to a dating app’s special features, subscribing to a streaming music app’s premium tier, buying more gold bars in games etc.
In this article, we are going to integrate HMS Core In App Purchase Kit into an Ionic application.
Ionic Framework
Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies such as HTML, CSS, and JavaScript with integrations for popular frameworks like Angular and React.
Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you’d get with a native SDK on Android or iOS but didn’t really exist before on the web.
Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or Capacitor in order to run as a native app.
Here we will use Ionic framework with Angular and Capacitor as native wrapper.
Demo
The above Ionic framework demo application is created with the same concept of my previous work and that is a quiz game which was created using android native and java as language. The concept of this game is to show In App Purchase in a game and how user can purchase subscription and non-subscription products. The name of the game is Quiz Mania. Below is the demo of that application.
To know more click on the link below:
https://forums.developer.huawei.com/forumPortal/en/topic/0201255229704010231
Prerequisite
1) Must have a Huawei Developer Account.
2) Must have a Huawei phone with HMS 4.0.0.300 or later.
3) Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
4) Must install node in the system
5) Must install Ionic in the system using below command:
npm install -g @ionic/cli
Things need to be done
1) Generating a Signing Certificate Fingerprint. For generating the SHA key, refer this article.
2) Create an app in the Huawei AppGallery connect and enable In App Purchase Kit in Manage Api section.
3) Provide the SHA Key in App Information Section.
4) Provide storage location.
5) Download the agconnect-services.json and store it somewhere on our computer.
6) Create a blank Ionic Project using below command:
ionic start Your_Application_Name blank — type=angular
7) Run the following command in the root directory of your Ionic project to install HMS IAP kit it through npm.
npm install @hmscore/cordova-plugin-hms-iap
8) If you want full Ionic support with code completion etc., install @ionic-native/core in your project.
npm install @ionic-native/core — save-dev
9) Run the following command to copy the “ionic/dist/hms-ml” folder from library to “node_modules/@ionic-native” folder under your Ionic project.
cp node_modules/@hmscore/cordova-plugin-hms-iap/ionic/dist/hms-in-app-purchases node_modules/@ionic-native/ -r10) Run the following command to compile the project:
ionic build
npx cap init [appName] [appId]Where appName is the name of your app, and appId is package_name in your agconnect-services.json file (ex: com.example.app).
11) Run the following command to add android platform to your project:
ionic capacitor add android
12) Make sure your project has a build.gradle file with a maven repository address and agconnect service dependencies as shown below:
13) Add the Signing certificate configuration to the build.gradle file in the app directory as show below:
14) Add plugin to the build.gradle file in the app directory as show below:
apply plugin: 'com.android.application'
apply plugin: 'com.huawei.agconnect'15) Add site kit service implementation into to dependencies section of build.gradle file in the app directory as show below:
dependencies {….implementation 'com.huawei.hms:iap:5.0.4.301'}
16) Add agconnect-services.json and signing certificate jks file to the app directory in your Android project as show below:
17) To update dependencies, and copy any web assets to your project, run the following code:
npx capacitor sync
Become a Merchant
We need to be a merchant in order to use HMS IAP Kit. Also after making your account as merchant, it will take 1 or 2 business days for verification.
Steps:
a) Login to Huawei Developer website.
b) Go to console.
c) Under Settings you will find Merchant Service as shown below:
d) Provide our bank details information here as shown below:
e) Provide our tax related information here as shown below:
f) Finally click submit to save the record for verification.
Need Public Key
We need a public key which is used for subsequent payment signature verification and a parameter for configuring the subscription notification URL.
Steps:
a) On the Develop tab page, go to Earning > In-App Purchases from the navigation tree on the left and click Settings. If this is the first time we configure the IAP service, a dialog box is displayed for you to sign the agreement.
b) After the configuration is successful, we will be able to see a public key. This public key we will use later.
Need Sandbox Account
We need sandbox account in order to test HMS IAP. During app development and testing, we can test product payments with a test account in the sandbox environment. During the testing period, when a purchase is initiated by the test account, the Huawei IAP server will identify the test account and directly process a successful payment, without real payments made.
Steps:
a) Go to AGC and select users and permissions.
b) Select Test account as shown below:
c) Click Add button to add test account as shown below:
d) After this a testing account is added. Make sure to add account which is used in Huawei devices to login.
Types of Products in App Purchase
Non-subscriptions
Non-subscriptions are purchased once. They can be further divided into consumables and non-consumables. You can configure virtual products when you select consumables or non-consumables in editing state and the app distribution area contains the Chinese mainland.
- Consumables: They are products that are intended to be consumed and purchased repeatedly, such as in-game currencies as shown below:
- Non-consumables: Users only need to purchase them once. Such products do not expire or decrease as they are used. We can use non-consumable for removing ads in the app as shown below:
Subscriptions
Subscriptions can be automatically renewed, and do not support virtual products currently. Users can purchase services or updated content for a fixed period (monthly, quarterly, annual, etc.), or for weekly magazines. The subscription will automatically renew until the subscriber chooses to cancel it.
Adding Products In App Purchase
Steps for adding Non-subscriptions products:
a) Select the app which needs In App Purchase in AGC.
b) Go to Operate > Products > Product Management and click Add Product.
c) For Non-Subscription, we can only select either Consumables or Non-Consumables type. After selecting the type we need to provide a unique Product Id, select a Language, provide a Product Name, provide a Description and then Save it. This is how it will look.
d) Now, we need to setup the Product Price. Click View and edit and configure product prices. Set Converted prize (tax included) and click Refresh. Prices in other currencies will be updated accordingly.
e) Finally it will look like this:
Steps for adding Subscriptions products
a) First we need to add a Subscription Group. In order to do that, we need to go to Subscription groups tab. It will look like this:
b) Click on Add Subscription group and provide the subscription group name.
c) After adding the group, we need to go back to products tab and add click on Add product button (same as Non-Subscription till step a,b and c) and select Auto-renewable subscriptions.
d) The only difference is that we need a subscription period here.
This parameter is displayed only when Type is set to Auto-renewable subscriptions. The system automatically charges for the subscription based on this period. Renewal stops under any of the following scenarios: the user cancels the subscription, the user takes no action to agree to a price increase, or the system fails to collect subscription fees from a user account for five consecutive billing cycles. At present, the following subscription periods are available: 1 week, 1 month, 2 months, 3 months, 6 months, and 1 year.
e) After providing the above details, save it and select View and edit and configure product prices as shown in step d of Non-Subscription.
f) Finally it will look like this:
Code
Check for environment ready and sandbox activation
Consumable Code
obtainProductInfo() method help us to obtain the list of the product which comes consumable, non-consumable and subscription using their price type and product Id.
Consumable Price Type: 0
Non-Consumable Price Type: 1
Subscription Price Type: 2
createPurchaseIntent() method help us to purchase the product.
Non-Consumable Code
Subscription Code
Tips & Tricks
1) The consumeOwnedPurchase() will confirm whether the payment went successfully based on the purchaseState field. If purchaseState is 0 (already paid), your app will deliver the purchased product or service to the user, then send a delivery confirmation request to HUAWEI IAP. After being consumed, we can purchase consumable product again.
2) When error code 60051 is returned during consumable purchase, use consumeOwnedPurchase() method to obtain the purchase information about the consumables ( not for non-consumable product or subscription product) that have been purchased but not delivered.
3) Make sure to add HMSInAppPurchases as provider in app.module.ts file otherwise No Provider Error will occur also make sure to import the same as well.
Conclusion
We learn how to integrate HMS IAP Kit in Ionic Project. Using HMS IAP kit we can create application such as game application, video/movie streaming based application and so on. I hope this article will be very useful to you in order to create wonderful application using Ionic.
Feel free to comment, share and like the article. Also you can follow me to get awesome article like this every week.
