CreditCardView

Intro

CreditCardView is a rich UX custom view to accomodate Credit Cards / Debit Cards while handling payment systems. The library consists of

CreditCardView which looks like below

FRONT VIEW	BACK VIEW

CardEditActivity which behaves as below.

(GIF from - https://dribbble.com/shots/2177105-Checkout-Flow-Card )

Creating a CreditCardView

XML

<com.cooltechworks.creditcarddesign.CreditCardView
          android:id="@+id/card_5"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:card_number="38056789000000000"
          app:card_holder_name="HARISH SRIDHARAN"
          app:cvv="522"
          app:card_expiration="01/17"
          />

JAVA

   CreditCardView creditCardView = new CreditCardView(getContext());
   
   String name = "HARISH SRIDHARAN";
   String cvv = "522";
   String expiry = "01/17";
   String cardNumber = "38056789000000000";

   creditCardView.setCVV(cvv);
   creditCardView.setCardHolderName(name);
   creditCardView.setCardExpiry(expiry);
   creditCardView.setCardNumber(cardNumber);

Fetch new card info

To get a card information from the user, you can simply start the CardEditActivity as below and get the details of the card from onActivityResult() in your activity.

Starting the activity

final int GET_NEW_CARD = 2;

Intent intent = new Intent(MainActivity.this, CardEditActivity.class);
startActivityForResult(intent,GET_NEW_CARD);

Getting the card details

public void onActivityResult(int reqCode, int resultCode, Intent data) {

        if(resultCode == RESULT_OK) {

                String cardHolderName = data.getStringExtra(CreditCardUtils.EXTRA_CARD_HOLDER_NAME);
                String cardNumber = data.getStringExtra(CreditCardUtils.EXTRA_CARD_NUMBER);
                String expiry = data.getStringExtra(CreditCardUtils.EXTRA_CARD_EXPIRY);
                String cvv = data.getStringExtra(CreditCardUtils.EXTRA_CARD_CVV);
          
                // Your processing goes here.

            }
        }
    }

Edit existing card

To edit the card details, you can start CardEditActivity passing the extras and get back the edited card information in onActivityResult() method of your activity just like above.

final int EDIT_CARD = 5;
Intent intent = new Intent(MainActivity.this, CardEditActivity.class);
intent.putExtra(CreditCardUtils.EXTRA_CARD_HOLDER_NAME, cardHolderName);
intent.putExtra(CreditCardUtils.EXTRA_CARD_NUMBER, cardNumber);
intent.putExtra(CreditCardUtils.EXTRA_CARD_EXPIRY, expiry);
intent.putExtra(CreditCardUtils.EXTRA_CARD_SHOW_CARD_SIDE, CreditCardUtils.CARD_SIDE_BACK);
intent.putExtra(CreditCardUtils.EXTRA_VALIDATE_EXPIRY_DATE, true); // pass "false" to discard expiry date validation.


startActivityForResult(intent, EDIT_CARD);

Sample Demo Video

Adding to your project

Add the following configuration in your build.gradle file.

repositories {
    jcenter()
    maven { url "https://jitpack.io" }
}

dependencies {
    compile 'com.github.sharish:CreditCardView:v1.0.4'
}

Add the following activity to your AndroidManifest.xml

 <activity android:name="com.cooltechworks.creditcarddesign.CardEditActivity"
            android:screenOrientation="portrait"
            />

Design Credits

Ramakrishna - https://dribbble.com/RamakrishnaUX

Developed By

Harish Sridharan - harish.sridhar@gmail.com

Acknowledgements

Michele Lacorte for his Swipeable Cards involving CreditCardView

License

Copyright 2016 Harish Sridharan

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

sharish/CreditCardView