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

  • 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.


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

Happy coding…

#Xamarin #Forms #Creditcard #Scan #Scanning