CreditCardEntry

Introduction

This library provides an elegant form for credit card entry that can be easily added to a activity or fragment. Regex is used to validate credit card types and a Luhn check is performed on the card numbers. This form was inspired by the credit entry UI on Square.

• Smooth interface
• Identifies credit card type
• Hides number for privacy
• Supports VISA, MasterCard, Discover and AMEX

Including in your project

This project uses JitPack to build and release.

Add JitPack to the end of your repositories

    repositories {

        ...

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

Add the project to your dependencies

    dependencies {

        ...

        compile 'com.github.dbachelder:CreditCardEntry:v1.1.0'
    }

Using the library

Please see below for an example.

XML

        <com.devmarvel.creditcardentry.library.CreditCardForm
            android:id="@+id/credit_card_form"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:helper_text_color="@color/yellow_500"
            app:include_helper="false"
            app:include_zip="false"/>

• app:helper_text_color - change the text color of the hints that appear below the widget by default.
• app:include_helper - boolean to show/hide the helper text under the widget (true by default (i.e. helper is shown))
• app:include_zip - boolean to show/hide the zip code in the form (true by default (i.e. zip is shown))
• app:card_number_hint - string to put in as a placeholder (hint) in the credit card number field
• app:input_background - the drawable to use as a background (defaults to white square with black 1px border)

In code:

    public class MainActivity extends Activity {
  
      private LinearLayout linearLayout;
      private CreditCardForm form;
  
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
  
        setContentView(R.layout.activity_main);
    	linearLayout = (LinearLayout) findViewById(R.id.layer);
		
        form = new CreditCardForm(this);
    	linearLayout.addView(form);
    	
    	buttonAuthorize = (Button) findViewById(R.id.buttonAuthorize);
    	buttonAuthorize.setOnClickListener(new OnClickListener() {
    		
    		@Override
    		public void onClick(View arg0) {
    			if(form.isCreditCardValid())
    			{
    				CreditCard card = form.getCreditCard();
    				//Pass credit card to service
    			}
    			else
    			{
    				//Alert Credit card invalid
    			}
    		}
    	});
    }

TODO

• Diner's Club is not yet implemented, although the assets and regex seem to be in place

Version History

###4/21/2015

• Don't focus credit card by default. Add mechanism for clients to focus any field if desired.
• CardType now contains image drawable ids for front and back of card
• The credit card placeholder hint can now be specified via xml
• Setting focus change listener now delegates to all internal fields.
• Background of widget is now configurable

###4/20/2015

• Flip the card image back to the front after CVV field loses focus
• Expose CardType on CreditCard object
• Transferred repo ownership

###4/19/2015

• Don't scroll when scrolling is already happening

###4/18/2015

• Made helper optional (app:include_helper="false")
• Fixed a ton of lint warnings
• Fixed vertical alignment of form fields
• Fixed over excited animation scroll
• Last 4 of card now tappable to enter edit mode
• updated image assets

###4/8/2015

• Always return CreditCard object when requested even when invalid

###4/7/2015

• Made zip code optional (app:include_zip="false")
• added callback when data entry is complete and card is valid
• optionally specify helper text color in XML attrs

###5/11/2013

• Updated Demo added screenshots

###4/2/2013

• Initial Commit