CreditCardView

A real life simulation of a credit card for android.

Screenshots:

CreditCardView

CreditCardFragment 

###Watch:

You can use just the representation of credit card with CreditCardView, or you can use the entire solution to collect user's credit card data with CreditCardFragment.

##Usage

In your build.gradle file:

dependencies {
    compile 'com.movile:creditcardguide:1.2-beta'
}

###CreditCardView

In your layout xml:

<movile.com.creditcardguide.view.CreditCardView
       android:id="@+id/creditCardView"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

In your activity/fragment class:

final CreditCardView creditCardView = (CreditCardView) findViewById(R.id.creditCardView);

creditCardView.chooseFlag(IssuerCode.VISACREDITO);
creditCardView.setTextExpDate("12/19");
creditCardView.setTextNumber("5555 4444 3333 1111");
creditCardView.setTextOwner("Felipe Silvestre");
creditCardView.setTextCVV("432");

To flip the card, you can call:

creditCardView.flipToBack(); // To show the back side
creditCardView.flipToFront(); // To show the front side

If you want to configure the label texts of owner name and valid thru:

<movile.com.creditcardguide.view.CreditCardView
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/creditCardView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:labelOwner="@string/label_owner"
       app:labelDateExp="@string/valid_thru">

###CreditCardFragment

In your layout xml:

<fragment
       android:id="@+id/frgCreditCard"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:name="movile.com.creditcardguide.CreditCardFragment" />

In your activity class:

CreditCardFragment inputCardFragment = (CreditCardFragment) getFragmentManager().findFragmentById(R.id.frgCreditCard);

// YOU MUST set the pages order (Set a order that makes sense to the user)
inputCardFragment.setPagesOrder(CreditCardFragment.Step.FLAG, CreditCardFragment.Step.NUMBER,
        CreditCardFragment.Step.EXPIRE_DATE, CreditCardFragment.Step.CVV, CreditCardFragment.Step.NAME);

// YOU MUST provide a purchase options list
inputCardFragment.setListPurchaseOptions(getList(), 230.0);

You must set the pages order and provide a purchase options list, to test you can create a fake list like the sample app:

private List<PurchaseOption> getStubList() {
        List<PurchaseOption> list = new ArrayList<>();
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.MASTERCARD, 6));
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.VISACREDITO, 6));
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.AMEX, 6));
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.PAYPAL, 6));
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.DINERS, 6));
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.NUBANK, 6));
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.AURA, 6));
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.ELO, 6));
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.HIPERCARD, 6));
        list.add(new PurchaseOption(PaymentMethod.Type.CREDIT_CARD, IssuerCode.OTHER, 6));

        return list;
    }

And your activity needs to implement ActionOnPayListener interface to listen:

    @Override
    public void onChangedPage(CreditCardFragment.Step page) {

    }

    @Override
    public void onComplete(CreditCardPaymentMethod purchaseOption, boolean saveCard) {
        Toast.makeText(this, purchaseOption.toString(), Toast.LENGTH_LONG).show();
    }

There are some attributes that you can provide configure the fragment/view:

<fragment
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/frgCreditCard"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:name="movile.com.creditcardguide.CreditCardFragment"
       app:labelCardOwner="string"
       app:labelCardDateExp="string"
       app:labelButtonPay="string"
       app:buttonPayBackground="@color/color"
       app:buttonPayTextColor="@color/color"
       app:labelNumber="string"
       app:labelExpireDate="string"
       app:labelCVV="string"
       app:labelOwnerName="string"
       app:labelTotal="string"
       app:installments="false|true"
       app:saveCard="false|true"
       />

There are equivalent methods to set it on code.

Please for further information look at the sample app code.

Open source libraries

CreditCardView uses the following open source files:

• MaskedEditText by @Toshi Kurauchi (MIT License)

Copyright and license

Code and documentation copyright 2016 Movile. Code released under the MIT license.

Felipe Silvestre (Dev) & Victor Namba (Designer)

Design Credits

• Victor Namba - https://dribbble.com/victornamba