👨🏼💻Movie Sales app with Cordova using HMS Account and HMS IAP Kit
Introduction
Hello Huawei developers, in this article, I will make a Cordova demo movie sales app with Huawei Account and IAP plugins.
HMS Account Kit provides you simple, secure, and quick sign-in and authorization functions. Instead of entering e-mails and passwords, and waiting for authentication, users can just tap the Sign in with HUAWEI ID button to quickly and securely sign in to your app with their HUAWEI IDs.
HMS IAP Kit enables you to sell digital products and contents directly within your app. To make in-app purchases available in your app, you only need to integrate the IAP SDK and then call its API to launch the IAP checkout screen.
One of the advantages of the kit is sandbox testing. It offers a sandbox testing environment and practical integration guide for you to easily access HUAWEI In-App Purchases.
Preparing the Development Environment
First of all, you will need a Huawei Developer Account to create an app in AppGallery Connect and activate IAP and Account. You can follow the preparation steps of the Account Kit because almost all of them are the same. You can also check out this medium article.
Configuring The Project
Before you get started, you must register as a Huawei developer. For details, please refer to Registration and Verification. After completing this step, please follow the steps below.
Let’s start making our Movie Sales App 💪
App Login Screen
Let’s start by adding login features to “Log in With Huawei” button.
We can customize our Huawei login button with these parameters.
Signing-In with Huawei ID
To securely allow users to sign in with Huawei ID, you should use signIn method of HMSAccount module. When this method is called for the first time for a user, a Huawei ID authorization interface will show up and the user should click “Authorize and Login” button with necessary permission checks. After signing in for the first time, when users try to sign in again, the authorization screen will not show up again, unless they revoke the authorization.
Sign out with Huawei ID
signOut method is used to allow user signing-out from Huawei ID
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:
If you need, you can find whole sample project code on GitHub repository below…
Conclusion
In this article, you have learned how you can integrate the HMS IAP Kit and HMS Account Kit with your Cordova projects. I hope this article will be very useful to you in order to create wonderful application using Cordova.
Feel free to comment, share and like the article. Also you can follow me to get awesome articles in the future.
