vaginessa / credit-card-view

A fully customizable Android view that can display credit card's informations

CreditCardView

A fully customizable Android view that can display credit card's informations

Getting started

In your project's build.gradle

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

In your modules's build.gradle

dependencies {
    implementation 'com.github.maxpilotto:credit-card-view:6.0'
}

Usage

XML

<!-- American express card -->
 <com.maxpilotto.creditcardview.CreditCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:number="341635298762981"
        app:numberVisibility="show"
        app:numberHint="****************"
        app:hideChar="*"
        app:cardHolder="John Smith"
        app:expireDate="0219"
        app:cvv="123"
        app:digits="15"
        app:cardNumberGroupSize="3"/>

<!-- Visa card -->
<com.maxpilotto.creditcardview.CreditCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:number="4601412314141414"
        app:numberVisibility="show"
        app:numberHint="****************"
        app:hideChar="*"
        app:cardHolder="John Smith"
        app:expireDate="0219"
        app:cvv="123"/>

<!-- Visa with custom background -->
 <com.maxpilotto.creditcardview.CreditCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:number="4601412314141414"
        app:numberVisibility="show"
        app:numberHint="****************"
        app:hideChar="*"
        app:cardHolder="John Smith"
        app:expireDate="0219"
        app:cvv="123"
        app:visaCardBackground="@android:color/red"/>  

As for the background, you can set a solid color (raw colors not supported) or your own drawable like the following

<!-- visa_gradient.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="6dp" />
    
    <gradient
        android:endColor="#ff0000"
        android:startColor="#ff5555"
        android:type="radial"
        android:gradientRadius="500dp"/>

</shape>

and then to set it you can do something like this

<com.maxpilotto.creditcardview.CreditCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:visaCardBackground="@drawable/visa_gradient"
        app:masterCardBackground="@drawable/mastercard"
        app:americanExpressCardBackground="@color/dark_yellow"/>  

Java

// American express card
CreditCardView card = new CreditCardView(this);
card.setCardNumber("341635298762981");
card.setNumberVisibility(CreditCardView.NumberVisibility.SHOW);
card.setCardNumberHint("****************");
card.setHideChar('*');
card.setCardHolder("John Smith");
card.setExpiry("0219");
card.setCVV("123");
card.setCardDigits(15);
card.setCardNumberGroupSize(3);

You can also copy an existing card's style, this will only copy the style (colors,hints,background) and not the values (number,holder,cvv)

CreditCardView copiedCard = CreditCardView.copyFrom(((CreditCardView)findViewById(R.id.card1)));
card.setCardNumber("341635298762981");

Check out the Demo

Documentation

Xml Attribute	Value/Type	Description
genericCardBackground	color/reference	Card background for when the number is not known
visaCardBackground	color/reference	Card background for when the number belongs to Visa
mastercardCardBackground	color/reference	Card background for when the number belongs to Mastercard
americanExpressCardBackground	color/reference	Card background for when the number belongs to American Express
dinersClubCardBackground	color/reference	Card background for when the number belongs to Diners Club
discoverCardBackground	color/reference	Card background for when the number belongs to Discover
jcbCardBackground	color/reference	Card background for when the number belongs to JCB
chinaUnionpayCardBackground	color/reference	Card background for when the number belongs to China UnionPay
labelsTextColor	color/reference	Text color of the labels
cardHolderLabel	string	Text value of the card holder's label
cardExpiryLabel	string	Text value of the expiry's label
genericCardLogo	reference	Card logo for when the number is not known
visaCardLogo	reference	Card logo for when the number belongs to Visa
mastercardCardLogo	reference	Card logo for when the number belongs to Mastercard
americanExpressCardLogo	reference	Card logo for when the number belongs to American Express
dinersClubCardLogo	reference	Card logo for when the number belongs to Diners Club
discoverCardLogo	reference	Card logo for when the number belongs to Discover
jcbCardLogo	reference	Card logo for when the number belongs to JCB
chinaUnionpayCardLogo	reference	Card logo for when the number belongs to China UnionPay
cardNumberGroupSize	integer	Number of characters to which the card number is divided, spaces will be added between the character groups E.g. groupSize = 2, number = "123456", result = "12 34 56"
magneticStripColor	color/reference	Back view magnetic strip color
errorColor	color/reference	Text color for all the errors TextViews
flipOnCVVEdit	boolean	Flip the card when the CVV is being edited
flipOnFrontDataEdit	boolean	Flip the card when any of the front data is being edited
errorsEnabled	boolean	Allows errors report, you need to setup a listener if you want to be able to see errors. Disabled by default
cvvVisibility	show/hide	Visibility level of the CVV
digits	integer	Length of the card number
flipped	boolean	Flipped value, False means that the front side is showing, True means that the back side is showing
hideChar	string	Character that replaces the card number's characters when they are hidden
flipOnClick	boolean	Allows the card to flip when it's pressed, True to enable, False otherwise. By default it's disabled
numberVisibility	show/showLastFour/hide	Visibility level of the card number
number	string	Card number value, the number shouldn't have spaces
expireDate	string	Expiry value, the string shouldn't have spaces,dashes or slashes since the slash is automatically added
cardHolder	string	Card holder value, it can be anything
cvv	string	CVV value, max length 3
numberColor	color/reference	Card number text color
cardHolderColor	color/reference	Card holder text color
expireDateColor	color/reference	Expiry text color
cvvColor	color/reference	CVV text color
numberHint	string	Card number hint text value
cardHolderHint	string	Card holder hint text value
expireDateHint	string	Expiry hint text value
cvvHint	string	CVV hint text value
numberHintColor	color/reference	Card number hint text color
cardHolderHintColor	color/reference	Card holder hint text color
expireDateHintColor	color/reference	Expiry hint text color
cvvHintColor	color/reference	CVV hint text color

Note: Raw colors are not supported, use references instead (E.g. "R.color.red" instead of "#ff0000")

JavaDoc is available here

License

Copyright 2018 Max Pilotto

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.