👨🏼💻Coffee Sales app with Flutter using HMS IAP and HMS Scan Kit
Introduction
Hello everyone, in this article, I will make a Flutter demo coffee sales app with IAP and Scan plugins.
HMS IAP Kit enables you to sell digital products and content 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. Offers a sandbox testing environment and practical integration guide for you to easily access HUAWEI In-App Purchases.
HMS Scan Kit scans and parses all major 1D and 2D barcodes and generates QR codes, helping you quickly build barcode scanning functions into your apps. To generate a barcode, you only need to specify its character string, barcode format, and size.
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.
- Configuring app information in App Gallery Connect
- Integrating Flutter Scan Plugin
- Integrating Flutter IAP Plugin
- Adding a product
We’re done with the configuring part! Let’s start making our app 💪
Creating Flutter Coffee Sales Application
With this application, without the need for a physical card, we will pay the cashier with our balance in the application by scanning our QR code.
We are going to use two plugin. The first is HMS IAP kit and we are going to use it to adding balance to account. The second is HMS Scan Kit and we are going to generate the barcode to pay using buildBitmap feature.
Coffee Card Screen
Let’s start by adding buttons to the coffee_card.dart with which we can integrate these two features.
Adding Balance Screen
In this screen, we select the amount and add the balance to our account.
Important: IAP kit works integrated with the Account kit. So you must be signed in a user with HUAWEI ID.
To show balances, we’ll call the optainProductInfo API in the IapClient class with the ProductInfoReq object.
Note: Ensure that the product IDs that you declared in the ProductInfoReq object is the same with that you declared in AppGallery Connect.
To add balances, we’ll call the createPurchaseIntent API in the IapClient class with the PurchaseIntentReq object.
Scan QR Screen
In this screen, we are going to generate the barcode to pay. My barcode is dummy for this example. However, you can create your barcode to work integrated with your own payment API. And after scanning the barcode you can show the user a page where you can show the receipt and get confirmation. So you get a real payment that works integrated with your own payment API.
We’ll call the buildBitmap API in the HmsScanUtils class with the BuildBitmapRequest object.
You can find the full code in my github page. Here is the link for you.
Conclusion
In this article, you learned how you can integrate the HMS IAP Kit and HMS Scan Kit with your Flutter projects.
I hope I was helpful, thank you for reading this article.
