Intermediate: How to Generate Gift card Using Huawei Wallet kit (Flutter)
Introduction
In this article, we will learn how to implement Huawei Wallet kit in flutter. Huawei wallet kit is an excellent tool in user’s daily life. It provides easy-to-access digital passes on an integrated platform. It enables user to save their cards into mobile phones for convenient.
About Huawei Wallet kit?
HUAWEI Wallet Kit is an open capability that integrates Huawei’s full-stack “chip-device-cloud” technologies to provide easy-to-access digital passes on an integrated platform. It enables users to save their tickets, boarding passes, loyalty cards, coupons, gift cards and other cards or passes digitally in their phones for convenient. And users could enjoy smart lifestyle services powered by high technologies, such as NFC capability and geo-fencing.
Do you know what all the services Huawei offered?
Access Cards
After adding a virtual access card, which simulates the physical access card in every respect, and setting it as the default access card, the user can get entry by placing their phone against the sensor, without unlocking the phone screen or open Huawei Wallet.
Boarding Passes
After saving a boarding pass to Huawei Wallet, the user can receive flight status notifications and reminders, and get plugged in to important travel-related developments.
Promotions and Offers
After saving coupons, loyalty cards, and gift cards to Huawei Wallet, users can access brand-related promotions, membership benefits, and points programs, with unprecedented ease.
Smart Tickets
After saving an event ticket to Huawei Wallet, the user can refer at any time, and receive real-time event-related notifications. For an NFC-enabled ticket, the user only needs to place their phone near the corresponding NFC sensor, which works even when the phone screen is locked.
Wallet kit Benefits
Quick integration
By integrating just a single SDK, you can deploy Huawei Wallet Kit services across a broad range of scenarios. Huawei Wallet Kit also provides convenient, end-to-end services, from online registration to feature testing.
Targeted reach
With users’ authorization, Huawei Wallet sends out accurate and responsive user notifications that take the time, location, Wi-Fi network, and presence of nearby services into account.
Tap-to-add
Huawei Wallet Kit provides numerous one-tap methods for adding a pass to HUAWEI Wallet, including by email, SMS message, app, browser, WebView (HTML5).
Requirements
1. Any operating system (i.e. MacOS, Linux and Windows).
2. Any IDE with Flutter SDK installed (i.e. IntelliJ, Android Studio and VsCode etc.).
3. A little knowledge of Dart and Flutter.
4. Minimum API Level 19 is required.
5. Required EMUI 5.0 and later version devices.
Setting up the APP Linking
1. First create a developer account in AppGallery Connect. After create your developer account, you can create a new project and new app. For more information, click here.
2. Generating a Signing certificate fingerprint follow the command.
keytool -genkey -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks -storepass <store_password> -alias <alias> -keypass <key_password> -keysize 2048 -keyalg RSA -validity 36500
3. The above command creates the keystore file in appdir/android/app.
4. Now we need to obtain the SHA256 key, follow the command.
keytool -list -v -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks
5. Enable the Wallet kit service on the App Gallery.
6. After configuring project, we need to download agconnect-services.json file in your project and add into your project.
7. After that follow the URL for cross-platform plugins and add required plugin into sample.
8. The following dependencies for HMS usage need to be added to the build.gradle file under the android directory.
9. Add the below plugin into build.gradle file under the android/app directory.
apply plugin: 'com.huawei.agconnect'
10. Add the required permissions to the AndroidManifest.xml file under app/src/main folder.
<uses-permission android:name="android.permission.INTERNET" />
11. After completing all the above steps, you need to add the required kits’. Flutter plugins as dependencies to pubspec.yaml file. You can find all the plugins in pub.dev with the latest versions.
After adding them, run flutter pub get command. Now all the plugins are ready to use.
Note: Set multiDexEnabled to true in the android/app directory, so that app will not crash.
Apply for wallet kit
1. We can access the Wallet kit on the console side by following the My Projects > Project settings > Earn > Wallet kit.
2. Now let’s apply for wallet kit.
3. Click Apply for wallet kit, enter required information and click next button.
4. To generate public and private key refer this URL.
5. After setting up all the necessary information, click next button it will redirect to wallet kit service list page.
Code Integration
Create card_generate.dart class in this class, we can declare all the required UI, to generate card we need to create model and instance these two will generate using server side.
Now we need to create Passobject to add card into wallet. Here is the code.
We can add cards into wallet app in 3 different ways.
1. With SDK
2. With Uri intent
3. Click app or Uri to pay
Here we will add cards using SDK.
Note: The possible cause of binding fail is that the pass has been bound by another user or the region of the Huawei ID is different from that of the developer account.
Demo
Tips & Tricks
1. Download latest HMS Flutter plugin.
2. Make sure while applying wallet in AGC, service type and service both unique.
3. Do not forget to click pug get after adding dependencies.
4. Do not forget to add browser URL based on region.
5. No need to generate model every time.
Conclusion
That’s it!
This article provides steps for integrating Huawei Wallet Kit in flutter application. Here we have successfully created gift card voucher to purchase plants. Huawei Wallet ecosystem and taking full advantage of the extraordinary potential of this new digital wallet.
Thanks for reading! If you enjoyed this story, please click the Like button and Follow. Feel free to leave a Comment 💬 below.
Reference
Wallet kit URL
GitHub URL
