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

Previously, we explained how to Integrate Card.io to create Credit card scanning 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 the 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 E-commerce 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 a new project. Set an Application name & package name.

 

create-a-new-project

Configure your project by Adding activity & set the activity name.

 

configure-your-project

 

With this you have created a new project.

Now, add the dependency in your build.gradle:

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

add-dependency

Add permission in manifest

  <uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>

Add-permission
Add Repo

maven 
{
    url "https://jitpack.io"
}

Add-Repo

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"/>

add-a-button

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 {
    val intent = Intent(this@MainActivity, CardIOActivity::class.java)
            .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)
}

 

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 fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if ((requestCode == REQUEST_SCAN || requestCode == REQUEST_AUTOTEST) && data != null && data.hasExtra(CardIOActivity.EXTRA_SCAN_RESULT)) {
        tvCardDetail.visibility = View.VISIBLE
        var resultDisplayStr: String
        if (data != null && data.hasExtra(CardIOActivity.EXTRA_SCAN_RESULT)) {
            val scanResult = data.getParcelableExtra<CreditCard>(CardIOActivity.EXTRA_SCAN_RESULT)
            // Never log a raw card number. Avoid displaying it, but if necessary use scanResult.formattedCardNumber can intend of .redactedCardNumber
            resultDisplayStr = "Card Number: " + scanResult.formattedCardNumber + "\n"
            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."
        }
        tvCardDetail.text = resultDisplayStr
    }
}

get-Card-result-via-OnActivityResult

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

cardioexample9

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

cardioexample10

And done!

This brings us to end of our Android Cardview 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 create 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.

This page was last edited on March 8th, 2019, at 8:47.
 
 

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

Get your free consultation now