Select Page

Paying for something in online is much easier than paying in-person. At present, cards are the leading payment method in the world, because it is faster than others.

In other payment methods, you have to enter the details each and every time you want to pay for something, we know it is an irritating process and an obstacle for the user. But in card payment, enter & save the details once into your account and use it later also, this is the reason card payments becomes more popular than others.

So here, we are going to discuss the credit card payment process by using a simple and attractive form.

Okay, Let’s dive right into the card payment process. For this, we should ask the following essential inputs from the user.

1. Card number
2. Name on card
3. Expiry date
4. Security code

1. Card Number:

Card number consists of bank identification number and unique account number. So in this field, we limit the input values to numbers only, so 0–9. For this simple validation, we have to set EditText inputType as “number”.

At next, we have to check “Do the user enter card number with spaces, or without?”. For this validation, we need to add TextWatcher into the EditText. Now the spacing is automatically added in-between the card number.

public class CreditCardFormattingTextWatcher implements TextWatcher
{
private EditText etCard;
public CreditCardFormattingTextWatcher(EditText etcard) {
this.etCard=etcard;
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if(before==0)
isDelete=false;
else
isDelete=true;
}
@Override
public void afterTextChanged(Editable s) {
String source = s.toString();
int length=source.length();
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append(source);
if(length>0 && length%5==0)
{
if(isDelete)
stringBuilder.deleteCharAt(length-1);
else
stringBuilder.insert(length-1," ");
etCard.setText(stringBuilder);
etCard.setSelection(etCard.getText().length());
}
}
}

At present, cards are issued by numerous organisations. Every card is associated with a card type. You’d usually see one of the four major card associations: Visa, MasterCard, American Express, or Discover. For card payment, this card association is essential. We can deduce it from the card number. The first digits of a card number identify the organisation that issued the card. We can classify the type using the following cards starting numbers.

1. Visa: the first digit is “4
2. MasterCard: first digits are “5” and the second digit is “1”, “2”, “3”, “4” or “5”.
3. American Express: the first digit is “3” and the second digit is “4” or “7”.
4. Discover: card number begins with “6011”.

After the user entering the first four numbers, we can display a card logo inside the layout, floated to the right. Using CreditCardUtils, you can easily get the card type from the given card number.

// In CreditCardFormattingTextWatcher
@Override
public void afterTextChanged(Editable s) {
String source = s.toString();
int length=source.length();
if(length>=4&&creditCardType!=null)
creditCardType.setCardType(CreditCardUtils.getCardType(source.trim()));
if(ivType!=null&&length==0)
ivType.setImageResource(android.R.color.transparent);
}
public class CreditCardUtils {
public static final String VISA_PREFIX = "4";
public static final String MASTERCARD_PREFIX = "51,52,53,54,55,";
public static final String DISCOVER_PREFIX = "6011";
public static final String AMEX_PREFIX = "34,37,";
public static int getCardType(String cardNumber) {
if (cardNumber.substring(0, 1).equals(VISA_PREFIX))
return VISA;
else if (MASTERCARD_PREFIX.contains(cardNumber.substring(0, 2) + ","))
return MASTERCARD;
else if (AMEX_PREFIX.contains(cardNumber.substring(0, 2) + ","))
return AMEX;
else if (cardNumber.substring(0, 4).equals(DISCOVER_PREFIX))
return DISCOVER;
return NONE;
}
}

2. Name on card:

The important field is card holders name. By asking “Name on card”, the user to simply type exactly what’s displayed on the card, instead of thinking about the card owner’s full or abbreviated name.

And, here we need to limit the length of the name. Because Visa and MasterCard have issued new rules restricting the length of cardholder names that can be printed or embossed on debit and credit cards. Visa will be limited to 21 characters and MasterCard to 22 characters.

3. Expiry date:

Expiry date shows the validation period of a particular card. Most cards display their expiry dates in the format MM/YY. For simplifying this process we can include “forward slash” automatically in between the month and year. So in this field, we limit the input values to numbers only, so 0–9. After entering the month, the slash is automatically appended. Using the TextWatcher we can easily achieve this feature and validate the given date using CreditCardUtils.

if(length>0 && length==3)
{
if(isDelete)
stringBuilder.deleteCharAt(length-1);
else
stringBuilder.insert(length-1,"/");
etCard.setText(stringBuilder);
etCard.setSelection(etCard.getText().length());
}

4. Security code:

This code helps to improve the security feature. It is an addition to the bank card number which is embossed or engraved on the card. It is a decimated value generated by the card issuer. The encryption keys used to generate it are highly sensitive information available only for the bank. It will help us to save our card from the fraudulent activities.

CardFlip Animation:

The animation is an ideal way to make complicated ideas easier to understand. In our case, we need to show both front and back side of the card, so here we gonna use card flip animation.

private void flipCard()
{
if (mShowingBack) {
getFragmentManager().popBackStack();
return;
}
// Flip to the back.
//setCustomAnimations(int enter, int exit, int popEnter, int popExit)
mShowingBack = true;
getFragmentManager().beginTransaction()
.setCustomAnimations(
R.animator.card_flip_right_in,
R.animator.card_flip_right_out,
R.animator.card_flip_left_in,
R.animator.card_flip_left_out)
.replace(R.id.fragment_container, cardBackFragment)
.addToBackStack(null)
.commit();
}

That’s it. Happy coding ????

The source code is available on GitHub, use the below links to get the application.

View on GithubDownload .zip

Feel free to comment and share, keep watching this space get more updates on Android Stuff!

Elsewhere

Jaison Fernando

Android Developer at NFN Labs
Elsewhere