Embedded Form Example

Payment object initialization

1 - When working with WirecardCardFormFragment you need to use WirecardExtendedCardPayment instead of WirecardCardPayment to make a transaction. WirecardExtendedCardPayment initialization is the same as it is in WirecardCardPayment.

WirecardExtendedCardPayment wirecardExtendedCardPayment = new WirecardExtendedCardPayment(timestamp, requestID,...);

2 - Provide last name required for successful transaction

CustomerData accountHolder = new CustomerData();
accountHolder.setLastName(lastName);
wirecardExtendedCardPayment.setAccountHolder(accountHolder);

Compoment Initialization

1 - In the XML layout create container where WirecardCardFormFragment will be placed:

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</FrameLayout>

2 - Create new instance of this fragment.

WirecardCardFormFragment wirecardCardFormFragment = new WirecardCardFormFragment.Builder(wirecardExtendedCardPayment).build();

If you want to customize text size, color or other settings, create WirecardCardFormFragment using WirecardCardFormFragment.Builder:

WirecardCardFormFragment wirecardCardFormFragment = new WirecardCardFormFragment.Builder(wirecardExtendedCardPayment)
.setLocale("de")
.setTextSize(12)
.setHintColorID(hintColorID)
.setTextColorID(textColorID)
.setRequestFocus(true)
.build();

To set supported card brands, use WirecardCardFormFragment.Builder's method setSupportedCardBrands(Set<CardBrand> supportedCardBrands):

Set<CardBrand> supportedCardBrands = new HashSet<>();
supportedCardBrands.add(CardBrand.MASTERCARD);
supportedCardBrands.add(CardBrand.AMEX);

builder.setSupportedCardBrands(supportedCardBrands);

3 - Add wirecardCardFormFragment into container created in first step:

getSupportFragmentManager()
    .beginTransaction()
    .add(R.id.container, wirecardCardFormFragment)
    .commit();

After this step you should be able to see card compoment in your layout.

default card form

Input State Listener Initialization

If you want to be notified about card inputs state changes(for example, if you want to show appropriate text messages to user) you need to follow these steps:

1 - Create WirecardInputFormsStateChangedListener instance. It listens for card input forms state changes.

WirecardInputFormsStateChangedListener wirecardInputFormsStateChangedListener = new WirecardInputFormsStateChangedListener() {
    @Override
        public void onStateChanged(int code) {
            switch(code){
                case WirecardInputFormsStateChangedListener.CARD_NUMBER_FORM_FOCUS_GAINED:
                    ...
                    break;
                case WirecardInputFormsStateChangedListener.EXPIRATION_MONTH_FORM_FOCUS_GAINED:
                    ...
                    break;
                ...
            }
        }
};

2 - Create WirecardInputFormsStateManager instance. It manages communication between card input forms and WirecardInputFormsStateChangedListener.

WirecardInputFormsStateManager wirecardInputFormsStateManager = new WirecardInputFormsStateManager(context, wirecardInputFormsStateChangedListener);

WirecardInputFormsStateManager provides two methods: startReceivingEvents() and stopReceivingEvents(). Note that WirecardInputFormsStateManager wraps BroadcastReceiver mechanism, you can treat these methods like BroadcastReceiver's registerReceiver()/unregisterReceiver(). To sum it up, call startReceivingEvents() in onResume() method and stopReceivingEvents() in onPause() method like this:

@Override
public void onResume() {
    super.onResume();
    wirecardInputFormsStateManager.startReceivingEvents();
}

@Override
public void onPause() {
    super.onPause();
    wirecardInputFormsStateManager.stopReceivingEvents();
}

WirecardInputFormsStateChangedListener contains constants for fired events:

 CARD_NUMBER_FORM_FOCUS_GAINED - card number input form gained focus
 EXPIRATION_MONTH_FORM_FOCUS_GAINED - exp. month input form gained focus
 EXPIRATION_YEAR_FORM_FOCUS_GAINED - exp. year input form gaiend focus
 SECURITY_CODE_FORM_FOCUS_GAINED - security code(CVC/CID) input form gained focus

 CARD_NUMBER_FORM_FOCUS_LOST - card number input form focus lost
 EXPIRATION_MONTH_FORM_FOCUS_LOST - exp. month input form focus lost
 EXPIRATION_YEAR_FORM_FOCUS_LOST - exp. year input form focus lost
 SECURITY_CODE_FORM_FOCUS_LOST - security code(CVC/CID) input form focus lost

 CARD_BRAND_UNSUPPORTED - called when card number wasnt recognized after typing 3 numbers.
 CARD_NUMBER_INVALID - called when card number has reached max length but card validity check wasn't successful.
 CARD_NUMBER_INCOMPLETE - called when card number is not complete. User typing his number.
 CARD_NUMBER_VALID - called when card passes validity check.

 EXPIRATION_MONTH_INCOMPLETE - called when expiration month is not complete yet. For example, user types one number, and jumps to expiration year field.
 EXPIRATION_MONTH_VALID - called when expiration month is valid. Note that we don't have event for invalid state, because user is able to enter only valid month.

 EXPIRATION_YEAR_INCOMPLETE - called when expiration year is not complete yet. 
 EXPIRATION_YEAR_VALID - called when expiration year is valid. Note that we don't have event for invalid state, because user is able to enter only valid year. 

 SECURITY_CODE_INCOMPLETE - called when security code is not complete yet.
 SECURITY_CODE_VALID - called when security code is complete.

 CARD_VALID - called when all inputs(card number, expiration month, expiration year and security code) are valid. When you get this event, you can proceed to next step.

Transaction execution

1 - Card data transfer

Before you make a transaction, you need to get WirecardExtendedCardPayment with card data from input fields.

wirecardExtendedCardPayment = wirecardCardFormFragment.getWirecardExtendedCardPayment();

Now WirecardExtendedCardPayment contains card data, and you can call WirecardClient's makePayment() method.

2 - Additional information

It is possible to clear all input fields (If you want to clear them, for example, when app goes to background)

wirecardCardFormFragment.clearAllFields();

If you want to know card brand of currently entered card number, call:

wirecardCardFormFragment.getCardBrand();

Favorite Payment Use Case

If you want user to enter only security code (CVC/CID) you need to follow all steps from previous part, but with some differences:

Instead of last name, provide card token to WirecardExtendedCardPayment object like this:

wirecardExtendedCardPayment.setCardToken(new CardToken(token, maskedCardNumber));

Create WirecardCardFormFragment using WirecardCardFormFragment.Builder this way:

wirecardCardFormFragment = new WirecardCardFormFragment.Builder(wirecardExtendedCardPayment)
        .setCardBrand(cardBrand) //for example CardBrand.VISA
        .setExpirationDate(expirationDate) // for example "1219"
        .build();

default card form with prefilled masked card number and expiration date

Security Code (CVC/CID) handover

Before you make a transaction, you need to get WirecardExtendedCardPayment with security code from input field. This step is the same as it is in non favorite use case.

wirecardExtendedCardPayment = wirecardCardFormFragment.getWirecardExtendedCardPayment();

Now your WirecardExtendedCardPayment contains security code, and you can call WirecardClient's makePayment() method.