Module UI Customization

Many applications have their own specific design paradigms. Therefore the SDK allows some level of customization for the provided user interface.

The following options are supported (see also PaymentMethodUIConfiguration):

• backgroundColor
• textColor
• buttonColor
• buttonDisabledColor
• mediumEmphasisColor
• cellBackgroundColor
• buttonTextColor

To apply the UI configuration, supply the PaymentUiConfiguration object to the PaymentSdkConfiguration

val textColor: Int = R.color.textColor
val backgroundColor: Int = R.color.backgroundColor
val buttonColor: Int = R.color.buttonColor
val buttonTextColor: Int = R.color.buttonTextColor
val cellBackgroundColor: Int = R.color.cellBackgroundColor
val mediumEmphasisColor: Int = R.color.mediumEmphasisColor

val paymentUiConfiguration = PaymentUiConfiguration(
        textColor,
        backgroundColor,
        buttonColor,
        buttonTextColor,
        cellBackgroundColor,
        mediumEmphasisColor
)
val  configuration = PaymentSdkConfiguration(
        publicKey = "YourApiKey",
        endpoint = "https://payment-dev.mblb.net/api/",
        integration = AdyenIntegration,
        testMode = true,
        paymentUiConfiguration = paymentUiConfiguration
)
PaymentSdk.initalize(this, configuration)

You can also change the UI customization after you are done with SDK initialization, by using configureUi method of PaymentSDK class, i.e.:

PaymentSDK.configureUi(paymentUiConfiguration)

Let's take following values as example:

If you applied customizations like in the example above, the result would be the following: