Scan Credit Cards with Xamarin.Forms
Updated: Jan 29, 2019
Today, I am going teach you about how to add CreditCard scanning feature to your mobile app.
If you have used the Uber mobile app, then you already know what it is.
This is a very user-friendly and must needed feature in payment related Apps. It will make user to easily scan his credit card with mobile camera and fill the details needed for the payment.
Let’s see how to create this with Xamarin.Forms …
1. Create a project with Xamarin.Forms
2. Create a HomePage and set it as the MainPage in App.xaml
3. Add Card.iO package to .Droid and .iOS projects from Nuget
4. Now lets create a dependancy service like below.
ICardService.cs in PCL project
CardService.cs in .Droid project
CardService.cs in .iOS project
ICardService.cs in PCL
CardService.cs in .iOS
CardService.cs in .Droid
MainActivity.cs in .Droid
Now our CardService is ready to use.
Before use it we have to set Camera access permission in iOS and Android.
5. Set access permissions needed for CardService.
Add a new Entry “Privacy – Camera Usage Description” in info.plist
Add following permission and configs to AndroidManifest.xml
6. Now add a button to HomePage and set an event handler
In code behind:
7. Now compile and run on iOS / Android:
Source code is available in https://github.com/hiranpeiris/CardApp