Customising the UI

The Drop-In Payment View includes customisation options, allowing you to tailor the appearance of your checkout to better fit the branding of your app. There are options that allow you to change the appearance of the payment form.

Additional parameters for configuring the Drop-In Payment View

When inflating the Drop-In Payment View into your layout, you can define additional styling parameters to adjust the look of the payment form to meet your application’s requirements.

For example, you can change the label text size and colour:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <com.trustpayments.mobile.ui.dropin.DropInPaymentView
        android:id="@+id/dropInPaymentView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        app:labelTextColor="@color/colorAccent"
        app:labelTextSize="20sp" />
</ScrollView>

The full list of available styling attributes can be found below:

<declare-styleable name="DropInPaymentView">
	<attr name="inputTextColor" format="color" />
	<attr name="inputTextSize" format="dimension" />
	<attr name="inputBackgroundColor" format="color" />
	<attr name="inputBorderColor" format="color" />
	<attr name="inputBorderWidth" format="dimension" />
	<attr name="inputCornerRadius" format="dimension" />
	<attr name="inputHintTextColor" format="color" />
	<attr name="inputSpacing" format="dimension" />
	<attr name="labelTextColor" format="color" />
	<attr name="labelTextSize" format="dimension" />
	<attr name="labelSpacing" format="dimension" />
	<attr name="errorTextColor" format="color" />
	<attr name="payButtonTextColor" format="color" />
	<attr name="payButtonTextSize" format="dimension" />
	<attr name="payButtonBackgroundColor" format="color" />
	<attr name="payButtonDisabledBackgroundColor" format="color" />
	<attr name="payButtonPressedBackgroundColor" format="color" />
	<attr name="payButtonBorderColor" format="color" />
	<attr name="payButtonBorderWidth" format="dimension" />
	<attr name="payButtonCornerRadius" format="dimension" />
	<attr name="payButtonPadding" format="dimension" />
</declare-styleable>

As for the Drop-In Payment View instance available in your activity component, you can change the visibility of inputs and attach a custom view to the payment form. This can be achieved by using the appropriate methods exposed for the Drop-In Payment View:

Example

class SampleActivity : AppCompatActivity(R.layout.activity_sample),
    DropInPaymentView.DropInPaymentViewListener {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        dropInPaymentView.setupForTokenizedPayment(
            requiredFields = setOf(PaymentInputType.CVV),
            cardType = cardType
        )
        dropInPaymentView.setCustomView(
            layoutRes = R.layout.view_custom,
            customViewPosition = CustomViewPosition.UnderCvv
        )
    }
}

Where next?

Testing
Once you have initialised the SDK in your app, you should now be able to process test transactions.
Click here to learn how >>>

Performing additional requests
For more advanced configurations, additional requests can be referenced in the Drop-In Payment View to perform additional actions.
Click here to learn how >>>