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.
where is the code link downloader ?
I will add it later today. Thanks
there is a problem here after the CardIOActivity lunched it detected the card only and after that no thing happened it doesn’t returned to the onActivityResult on your mainpage .
any help ?
In my testing it does return. Make sure you position the card on a flat surface under your device. It will capture the card after some moment and return the card to your activity .
I will upload my source code later today.
Great tutorial sir. You are doing an important job.
how to download your app..