Custom layouts

James Goodwin edited this page Dec 6, 2016 · 11 revisions

Custom layouts provide greater flexibility in how the card entry form appears, whilst minimizing the PCI scope of your app by removing the burden of having to handle cardholder data in your app code.

While Custom layouts give more options for how the form is presented, it doesn't include all of the features of our Out-of-the-box UI, such as card type identification and the optional security message.

How it works

When calling the judo Android library you can provide a layout file containing the card input fields, and describe where the form fields are located in the layout. The layout is then analyzed and shown in the Activity. We'll take care of handling the form validation and deliver the result of the payment in the onActivityResult method of your calling Activity.

Example

  1. Create a CustomLayout.Builder instance, providing the view IDs of the TextInputLayouts, country Spinner and submit Button:

    CustomLayout.Builder builder = new CustomLayout.Builder()
            .cardNumberInput(R.id.card_number_input)
            .expiryDateInput(R.id.expiry_date_input)
            .securityCodeInput(R.id.security_code_input)
            .startDateInput(R.id.start_date_input)
            .issueNumberInput(R.id.issue_number_input)
            .postcodeInput(R.id.post_code_input)
            .countrySpinner(R.id.country_spinner)
            .submitButton(R.id.pay_button);
  2. Call the build method, providing the layout ID:

    CustomLayout customLayout = builder.build(R.layout.layout_card_form);
  3. Start the PaymentActivity with the custom layout set on the Judo instance:

    Judo judo = new Judo.Builder()
            .setCustomLayout(customLayout)
            // set judo ID, currency and amount
            .build();
    
    Intent intent = new Intent(this, PaymentActivity.class);
    intent.putExtra(Judo.JUDO_OPTIONS, judo);
    
    startActivityForResult(intent, PAYMENT_REQUEST);

Your layout file should contain all the necessary fields needed to capture the cardholder data and contain a submit button. All input fields in the layout should be of type android.support.design.widget.TextInputLayout, containing a wrapped EditText.

For example:

<android.support.design.widget.TextInputLayout
    android:id="@+id/card_number_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:hint="@string/credit_card_number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.TextInputLayout>

For security purposes, the layout XML file can contain only the standard Android views (TextView, ImageView, EditText, Spinner, TextInputLayout, Button) or the standard Android Layout types (LinearLayout, RelativeLayout, FrameLayout, ScrollView).

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.