[Huawei Developers] John Wo:
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/ -r

10) 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:

buildscript {

repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}

}
dependencies {
classpath 'com.android.tools.build:gradle:3.6.1'
classpath 'com.google.gms:google-services:4.3.3'
classpath 'com.huawei.agconnect:agcp:1.3.1.300'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}

apply from: "variables.gradle"

allprojects {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}

}

13) Add the Signing certificate configuration to the build.gradle file in the app directory as show below:

android {
compileSdkVersion rootProject.ext.compileSdkVersion
defaultConfig {
applicationId "YOUR_PACKAGE_NAME"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
signingConfigs {
release {
storeFile file("mykeystore.jks") // Signing certificate.
storePassword "XXXXXX" // KeyStore password.
keyAlias "XXXXXX" // Alias.
keyPassword "XXXXXX" // Key password.
v1SigningEnabled true
v2SigningEnabled true
}
}
buildTypes {
release {
signingConfig signingConfigs.release
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
debug {
signingConfig signingConfigs.release
debuggable true
}
}
}

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

More details, you can visit https://forums.developer.huawei.com/forumPortal/en/topic/0204418699662160038

​