How to create credit card scanner using card.io in Android

Posted By : Keshav Gupta | 31-May-2019

android

Index:

1.Introduction

2.Prerequisites

3.Steps Explanation

4.Output Results

5.Conclusion

Introduction

Card.io is a third party SDK to make paying easier by its scanner feature. The intention of this is to provide a way to smoothen the paying feature. As with this user can scan their credit card by the camera instead of entering details manually. Any business needs a payment feature today. So it will be great if the business or user application is having such a great feature. So their users can find it easier to scan instead of input.

Prerequisites

1. Android Studio

2. At least Java 7

Steps Explanation

Now I am going to explain step by step how we can integrate it in Android Application

Step1 We have a new project created from Android studio having minimum SDK 19.

Step2 Add the following dependency in app/build.gradle to install SDK in the application.

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

Step3 Add following permission in the manifest and repo in project/build.gradle.

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

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

Step4 After this please sync and rebuild. Now, card.io is installed in your application. We will make a layout now. We will make it simple having only TextView and Button. Now you will be having your layout created.

Step5 Now in Activity class we will call functionality to initiate card.io and instructs it to scan. We will be writing following code snippet on the event button click

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_CARD)
}

Step6 Now our scanning feature is initiated. Now we have to get the scanned result. So we will get scanned result if successfully scanning is completed. As we have called scanner using Activity Intent So we will get its call back in activity result callback method. So here we go

override fun onActivityResult(requestCodeData: Int, resultCodeData: Int, data: Intent?) {
    super.onActivityResult(requestCodeData, resultCodeData, data)
    if ((requestCodeData == REQUEST_SCAN_CARD || requestCodeData == REQUEST_AUTOTEST) && data != null && data.hasExtra(CardIOActivity.EXTRA_SCAN_RESULT)) {
        tvCardDetail.visibility = View.VISIBLE
        var resultDisplayStrData: 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
            resultDisplayStrData = "Card Number: " + scanResult.formattedCardNumber + "\n"
            if (scanResult.isExpiryValid) {
                resultDisplayStrData += "Expiration Date: " + scanResult.expiryMonth + "/" + scanResult.expiryYear + "\n"
            }
            if (scanResult.cvv != null) {
                // Never log or display a CVV
                resultDisplayStrData += "CVV has " + scanResult.cvv.length + " digits.\n"
            }
            if (scanResult.postalCode != null) {
                resultDisplayStrData += "Postal Code: " + scanResult.postalCode + "\n"
            }
        } else {
            resultDisplayStrData = "Scan was canceled."
        }
        tvCardDetail.text = resultDisplayStrData
    }
}