Card transactions: 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)

<?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:

(XML)

<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:

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
    )
  }
}

Dark mode

Payment form

The payment form has a pre-defined colour palette for dark mode. This is automatically displayed when the customer’s device running your app has been set to use the system’s dark mode (either from the device’s settings or locally in the app).

Customising the appearance of the payment form and adjusting specified elements when in dark mode is performed using the same techniques as described above.

3-D Secure challenge pop-up

Similar to the payment form, challenge pop-up that can be displayed during 3-D Secure authentication is also automatically displayed in a darker colour palette when the device or app is in dark mode.

However, additional steps are required when customising the appearance of this pop-up when the device or app is in dark mode. Please refer to the code snippet below for further information. An example of this in action can be found in the example app attached to the SDK.

/**
* The isDarkThemeForced parameter indicates whether a merchant provides an option inside
* the app to override a default system theme (e.g. from a settings page inside their app).
* For the correct theme to be applied to the 3D Secure challenge pop-up, this parameter has to be set to:
*
* * true - when the dark theme is set from the local app settings;
* * false - when the light theme is set;
* * null - if the theme is set by the system.
*
* It's the merchants responsibility to assign the correct value based on any changes made inside the app settings.
*/
var isDarkThemeForced: Boolean? = null
set(value) {
  field = value
  threeDSecureManager.isDarkThemeForced = field
}

You can change the default look and adjust specified elements of the challenge pop-up, by defining additional CardinalStyleManager instances for the light or dark mode (or both), and pass them as optional parameters for the PaymentTransactionManager constructor. For example:

private val CardinalStyleManager = CardinalStyleManager(
  verifyButtonStyle = CardinalStyleManager.ButtonStyle(
    backgroundColor = "#5585a2",
    cornerRadius = 150
  ),
  resendButtonStyle = CardinalStyleManager.ButtonStyle(
    textColor = "#ffffff",
    backgroundColor = "#5585a2",
    cornerRadius = 150
  ),
  labelStyle = CardinalStyleManager.LabelStyle(
    headingTextColor = "#660000",
    headingTextFontSize = 35,
    textColor = "#0086b3"
  ),
  toolbarStyle = CardinalStyleManager.ToolbarStyle(
    backgroundColor = "#003759",
    buttonText = "CANCEL",
    headerText = "DEMO CHECKOUT",
  ),
  textBoxStyle = CardinalStyleManager.TextBoxStyle(
    borderColor = "#000000",
    borderWidth = 5,
    cornerRadius = 1,
    textColor = "#00ff2a"
  )
)

private val cardinalDarkThemeStyleManager = CardinalStyleManager(
  verifyButtonStyle = CardinalStyleManager.ButtonStyle(
    backgroundColor = "#BB86FC",
    cornerRadius = 15
  ),
  labelStyle = CardinalStyleManager.LabelStyle(
    headingTextColor = "#660000",
    headingTextFontSize = 35,
    textColor = "#0086b3"
  ),
  toolbarStyle = CardinalStyleManager.ToolbarStyle(
    backgroundColor = "#121212",
    buttonText = "Cancel",
    headerText = "SECURE CHECKOUT",
  ),
  textBoxStyle = CardinalStyleManager.TextBoxStyle(
    borderColor = "#000000",
    borderWidth = 5,
    cornerRadius = 1,
    textColor = "#00ff2a"
  )
)
private val paymentTransactionManager =
PaymentTransactionManager(
  app,
  TrustPaymentsGatewayType.EU,
  false,
  BuildConfig.MERCHANT_USERNAME,
  CardinalStyleManager,
  cardinalDarkThemeStyleManager ,
  isLocationDataConsentGiven = false
)

The full list of challenge pop-up styling attributes, can be found in the CardinalStyleManager class.

data class CardinalStyleManager(
  val verifyButtonStyle: ButtonStyle? = null,
  val resendButtonStyle: ButtonStyle? = null,
  val toolbarStyle: ToolbarStyle? = null,
  val textBoxStyle: TextBoxStyle? = null,
  val labelStyle: LabelStyle? = null
  ) {

  data class ButtonStyle(
    val textColor: String? = null,
    val backgroundColor: String? = null,
    val textFontName: String? = null,
    val cornerRadius: Int? = null,
    val textFontSize: Int? = null,
  )

  data class ToolbarStyle(
    val backgroundColor: String? = null,
    val buttonText: String,
    val headerText: String,
    val textFontName: String? = null,
    val textFontSize: Int? = null,
    val cancelButtonTextColor: String? = null,
    val cancelButtonBackgroundColor: String? = null,
    val cancelButtonTextFontName: String? = null,
    val cancelButtonCornerRadius: Int? = null,
    val cancelButtonTextFontSize: Int? = null,
  )

  data class TextBoxStyle(
    val borderColor: String? = null,
    val borderWidth: Int? = null,
    val cornerRadius: Int? = null,
    val textColor: String? = null,
    val textFontName: String? = null,
    val textFontSize: Int? = null
  )

  data class LabelStyle(
    val headingTextColor: String? = null,
    val headingTextFontName: String? = null,
    val headingTextFontSize: Int? = null,
    val textColor: String? = null,
    val textFontName: String? = null,
    val textFontSize: Int? = null
  )
}

Where next?