How to Integrate Card.io to Create Credit Card Scanner App For Android

0
Shares
How to Integrate Card.io to Create Credit Card Scanner App For Android
Rate this post

Previously, we explained how to Integrate Card.io to create Credit card scanner app for iPhone. Now today, we’re going to learn Card.io integration for Android.

As you might already know that the idea behind Card.io is to make the experience of paying smoother and easier by allowing users to directly scanning their credit cards using camera, instead of typing credit card information manually. And with Card.io integration in your Android app, you can add this functionality for your Android app users.

Whether you’ve your own business mobile app or an Ecommerce app, you can integrate Card.io Android SDK to enable this credit card scanning functionality in your Android app. And to show how easy the integration process is, we’ll guide you through a step-by-step process and teach you how to integrate Card.io by creating a simple credit card scanner for Android.

Let’s Get Started

Open Android studio  and create new project. Set Application name & package name.

cardioexample1

Select project target Android devices.

cardioexample2

Add activity to project.

cardioexample3

Set activity name.

cardioexample4

With this you have create a new project.

Now, add the dependency in your build.gradle:

compile 'io.card:android-sdk:5.5.0'

cardioexample5

Once you add this dependency, the Card.io library will get downloaded and added to your project as soon as you sync your project.

Now go to activity_main.xml and create UI. In this demo, we’re going to keep it simple and neat and will add only one add Button & Textview.

<TextView
android:id="@+id/tvCardDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="25dp"
android:textColor="@color/colorPrimary"
android:textSize="20sp"
android:visibility="gone"/>
<Button
android:id="@+id/btnScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/colorPrimary"
android:gravity="center"
android:paddingEnd="25dp"
android:paddingStart="25dp"
android:text="Scan Card"
android:textColor="@android:color/white"/>

cardioexample6

Next, call CardIOActivity to scan card. The CardIOActivity will simply take user to the next screen and ask for permission to “allow access to camera”. Once users allows it, the app will let user scan credit card.

btnScan.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View view)
{
Intent intent = new Intent(MainActivity.this, CardIOActivity.class)
.putExtra(CardIOActivity.EXTRA_REQUIRE_EXPIRY, true)
.putExtra(CardIOActivity.EXTRA_SCAN_EXPIRY, true)
.putExtra(CardIOActivity.EXTRA_REQUIRE_CVV, true)
.putExtra(CardIOActivity.EXTRA_REQUIRE_CARDHOLDER_NAME, true)
.putExtra(CardIOActivity.EXTRA_LANGUAGE_OR_LOCALE, "en")
.putExtra(CardIOActivity.EXTRA_GUIDE_COLOR, Color.GREEN)
.putExtra(CardIOActivity.EXTRA_RETURN_CARD_IMAGE, true);
startActivityForResult(intent, REQUEST_SCAN);
}
});

cardioexample7

Once your app fetches credit card information through camera, you’ll need to get card resulted stored, in order to show the user and proceed for the payment. So, the next step for you will be to get Card result via OnActivityResult.

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data)
{
super.onActivityResult(requestCode, resultCode, data);
if ((requestCode == REQUEST_SCAN || requestCode == REQUEST_AUTOTEST) && data != null && data.hasExtra(CardIOActivity.EXTRA_SCAN_RESULT))
{
((TextView) findViewById(R.id.tvCardDetail)).setVisibility(View.VISIBLE);
String resultDisplayStr;
if (data != null && data.hasExtra(CardIOActivity.EXTRA_SCAN_RESULT))
{
CreditCard scanResult = data.getParcelableExtra(CardIOActivity.EXTRA_SCAN_RESULT);
// Never log a raw card number. Avoid displaying it, but if necessary use getFormattedCardNumber()
resultDisplayStr = "Card Number: " + scanResult.getRedactedCardNumber() + "\n";
// Do something with the raw number, e.g.:
// myService.setCardNumber( scanResult.cardNumber );
if (scanResult.isExpiryValid())
{
resultDisplayStr += "Expiration Date: " + scanResult.expiryMonth + "/" + scanResult.expiryYear + "\n";
}
if (scanResult.cvv != null)
{
// Never log or display a CVV
resultDisplayStr += "CVV has " + scanResult.cvv.length() + " digits.\n";
}
if (scanResult.postalCode != null)
{
resultDisplayStr += "Postal Code: " + scanResult.postalCode + "\n";
}
}
else
{
resultDisplayStr = "Scan was canceled.";
}
((TextView) findViewById(R.id.tvCardDetail)).setText(resultDisplayStr);
}
}
}

cardioexample8

Now run Application, click on Scan card Button, and place a credit card in front of camera.

cardioexample9

When card is scan successfully then it’ll automatically show card details.

cardioexample10

And done!

This brings us to end of our Android app tutorial. If you face any issue, you can comment down below. And if you want to hire Android developer to integrate this functionality into your Android or iOS app for you or develop an Android app for your business from scratch, you can fill out below form with your requirements and our business analyst will get in touch with you within 24 hours.

 
0
Shares
 

Want to Develop an Android App? Get Free Estimation Now!