+94766046492

©2018 by Hiran Peiris. Proudly created with Wix.com

Search
  • Hiran Peiris

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




As you see here, we are using Card.iO for scanning. Its a free and open source library. You can get more informations from https://www.card.io .


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




Save all.

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.

iOS

Add a new Entry “Privacy – Camera Usage Description” in info.plist



Android

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:






Done.

Source code is available in https://github.com/hiranpeiris/CardApp

Happy coding…



#Xamarin #Forms #Creditcard #Scan #Scanning

57 views