Android Card.io Library Integration

In this tutorial, we are going to learn how to use Card.io android library to scan credit card information. The credit card information you obtain from this library is up to you to use in accordance to your project requirement.

If you have not heard of Card.io I will suggest you read more about them in their website. Right now I think it has been acquired by PayPal and you can use it with your PayPal account.

I got to know about this library when I wrote about android shopping cart and PayPal Integration tutorial and I decided to write a tutorial on it.

You have to be careful the way you expose credit card information and where you store them for security reason.

In other to understand what we are going to implement in our android project, I have added some screen-shots from the application.

ANDROID PROJECT SCREENSHOT

CREATE NEW ANDROID PROJECT

Lets start to soil our hands in code. Start up your IDE. For this tutorial, I am using the following tools and environment, feel free to use what works for you.

Windows 10

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 23

To create a new android application project, follow the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidCardio

Package: com.inducesmile.androidcardio

Select Blank Activity

Name your activity: MainActivity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

UPDATE ANDROIDMANIFEST.XML

Open the manifest.xml file inside Manifests folder. We are going to add so user permission. The updated version of the manifest.xml file is as shown.

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.inducesmile.androidcardio">
    <!-- Permission to vibrate - recommended, allows vibration feedback on scan -->
    <uses-permission android:name="android.permission.VIBRATE" />
    <!-- Permission to use camera - required -->
    <uses-permission android:name="android.permission.CAMERA" />
    <!-- Camera features - recommended -->
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
    <uses-feature android:name="android.hardware.camera.flash" android:required="false" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <!-- Activities responsible for gathering payment info -->
        <activity android:name="io.card.payment.CardIOActivity" android:configChanges="keyboardHidden|orientation" />
        <activity android:name="io.card.payment.DataEntryActivity" />
    </application>
</manifest>

UPDATE DEPENDENCIES IN BUILD.GRADLE FILE

The use the Cardio library in android project, we are going to add Card.io SDK in our project. Open the build.gradle file and add this line of code in the dependency section.

compile ‘io.card:android-sdk:5.4.0’

The complete code content of the file is as shown.

apply plugin: 'com.android.application'
android {
    compileSdkVersion 24
    buildToolsVersion "24.0.0"
    defaultConfig {
        applicationId "com.inducesmile.androidcardio"
        minSdkVersion 14
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.1.1'
    compile 'io.card:android-sdk:5.4.0'
}

STRINGS.XML

We are going to update our project strings.xml file located in the values folder inside the res folder. Open the file and add the code below to it.

<resources>
    <string name="app_name">Android Cardio</string>
    <string name="scan_credit_card">Scan Credit Card</string>
</resources>

COLORS.XML

Open the colors.xml file in the same location as the strings.xml file and add the code below to the file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorWhite">#ffffff</color>
</resources>

Activity_main.xml

Open the activity_main.xml file that was created for us by Android Studio. We will add a Button View control in this layout. This button will initiate credit card scanning.

Add the code below to the file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.inducesmile.androidcardio.MainActivity">
    <Button
        android:id="@+id/scan_credit_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:background="@color/colorPrimaryDark"
        android:text="@string/scan_credit_card"
        android:textColor="@color/colorWhite"
        android:layout_alignParentTop="true"/>
</RelativeLayout>

MainActivity.java

Open the MainActivity class. First we will get the instance of the button view control and attach a click event listener to it. When the button is clicked it will trigger camera and information on how to scan a card.

Inside the button click event, we will start an Intent and the startActivityForResult() method is called with the intent object passed as one of its parameters.

Finally, we will override Activity method onActivityResult() and we will check the information that was returned to us.

The complete code for the class is as shown below.

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import io.card.payment.CardIOActivity;
import io.card.payment.CreditCard;
public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();
    private static final int MY_SCAN_REQUEST_CODE =  99;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button scanCreditCard = (Button)findViewById(R.id.scan_credit_card);
        assert scanCreditCard != null;
        scanCreditCard.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent scanIntent = new Intent(MainActivity.this, CardIOActivity.class);
                // customize these values to suit your needs.
                scanIntent.putExtra(CardIOActivity.EXTRA_REQUIRE_EXPIRY, true); // default: false
                scanIntent.putExtra(CardIOActivity.EXTRA_REQUIRE_CVV, false); // default: false
                scanIntent.putExtra(CardIOActivity.EXTRA_REQUIRE_POSTAL_CODE, false); // default: false
                // MY_SCAN_REQUEST_CODE is arbitrary and is only used within this activity.
                startActivityForResult(scanIntent, MY_SCAN_REQUEST_CODE);
            }
        });
    }
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == MY_SCAN_REQUEST_CODE) {
            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";
                Log.d(TAG, "Card Number " + resultDisplayStr);
                // 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.";
            }
            // do something with resultDisplayStr, maybe display it in a textView
            // resultTextView.setText(resultDisplayStr);
        }
        // else handle other activity results
    }
}

This brings us to the end of this tutorial. I hope that you have learn something. Run your app and see for yourself.

You can download the code for this tutorial below. If you are having hard time downloading the tutorial, kindly contact me.

Remember to subscribe with your email address so that you will be among the first to receive my new android blog post once it is published.

OTHER INTERESTING POSTS: