Customization Theme

The class responsible for defining the theme is called CheckoutTheme.

Customization Theme Class Structure:

class CheckoutTheme(
    val uiMode: UiMode = UiMode.AUTO,
    val appearanceLight: Appearance ? = null,
    val appearanceDark : Appearance ? = null,
    val showPaymentDetails : Boolean = true,
)

uiMode

Specifies the device theme mode, which can be set to:

• Light

• Dark

• Auto (automatically adjusts based on system settings)

appearanceLight & appearanceDark

These are optional instances of the Appearance class, which enable UI customization for light mode and dark mode, respectively.

The Appearance class serves as the core inner class of CheckoutTheme, containing objects that define various UI components.

The component names within Appearance largely correspond to those described here.

showPaymentDetails

A boolean field that determines whether the "Payment Details" section should be displayed or hidden.

Properties Description

All properties are optional and can be customized by the user.

If a property is not specified, the default value (as defined in the Figma design here) will be automatically applied.

Texts

General

Property Name	Description	Data Type
mainTitleText	Font and color for all “Captions”	Text
titleText	Font and color for payment options in the list	Text
subtitleText	Font and color for payment options details (like expiration date)	Text

Fees

Property Name	Description	Data Type
feesTitleText	Font and color of fees value in the payment options list	Text
feesSubtitleText	Font and color of fees description in the payment options list	Text

Data

Property Name	Description	Data Type
dataLabelText	Font and color of payment details fields (like “Amount”)	Text
dataValueText	Font and color of payment details values	Text

Other

Property Name	Description	Data Type
errorMessageText	Font and color of error message text in pop-ups	Text
selectPaymentMethodHeaderText	The text of "Select Payment Method" in the bottom sheet header	Text

Text Fields

Property Name	Description	Data Type
inputTextField	Font and color of text in any input field (including disabled state)	TextField

Colors

Property Name	Description	Data Type
sdkbackgroundColor	The main background of the SDK view component	Color
modalBackgroundColor	The background of any modal window	Color
paymentItemBackgroundColor	The background of an item in payment options list	Color
selectorIconColor	The color of the icon of the payment	Color
savePhoneNumberIconColor	The color of “Diskette” button for saving phone number	Color
selectPaymentMethodHeaderBackgroundColor	The background of an item in payment options list	Color

Buttons

Property Name	Description	Data Type
button	Background, text color and font for any button	Button
backButton	Color of the “Back” navigation button	RippleColor
selectorButton	Background, text color and font for payment item selection button	Button

Switch

Property Name	Description	Data Type
switch	Colors of the switch background and its toggle in different states (on, off and disabled)	Switch

Margins

Property Name	Description	Data Type
margins	Top, left, bottom and right margins between component	Margins

Data types Description

Color

Property Name	Description	Data Type
color	Main color integer value	Int
colorDisabled	Disabled stated color integer value	Int

RippleColor

Property Name	Description	Data Type
color	Main color integer value	Int
rippleColor	Ripple color integer value	Int
colorDisaled	Disabled stated color integer value	Int

Text

Property Name	Description	Data Type
textColor	Main color integer value	Color
fontType	Font resource ID	Int

TextField

Property Name	Description	Data Type
background	Background color integer value	Color
primaryColor	Text color	Color
focusedColor	Selected text color	Color
text	Text value	Text
error	Text value	Text

Button

Property Name	Description	Data Type
rippleColor	Button background color	RippleColor
fontType	Button text font ID	Int
textColor	Button text color	Color

Switch

Property Name	Description	Data Type
checkedThumbTintColor	Toggle color in checked state	Int
uncheckedThumbTintColor	Toggle color in unchecked state	Int
checkedTrackTintColor	Track color in checked state	Int
uncheckedTrackTintColor	Track color in unchecked state	Int
checkedTrackDecorationColor	Decoration color in checked state	Int
uncheckedTrackDecorationColor	Decoration color in unchecked state	Int

Margins

Property Name	Data Type
left	Int
top	Int
right	Int
bottom	Int

Example

To build the theme, the user must follow steps similar to those outlined in the test app file.

Code Snippet:

val appearanceLight = CheckoutTheme.Appearance(
    mainTitleText = CheckoutTheme.Text(
        textColor = CheckoutTheme.Color(Color.WHITE),
        R.font.roboto_bold
    ),
    titleText = CheckoutTheme.Text(textColor = CheckoutTheme.Color(Color.BLACK)),
    subtitleText = CheckoutTheme.Text(textColor = CheckoutTheme.Color(Color.BLACK)),

    button = CheckoutTheme.Button(
        rippleColor = CheckoutTheme.RippleColor(
            color = Color.WHITE,
            rippleColor = Color.BLACK,
            colorDisabled = Color.GRAY
        ),
        textColor = CheckoutTheme.Color(color = Color.BLACK),
        fontType = R.font.roboto_bold
    ),

    margins = Margins(left = 12, top = 4, right = 12, bottom = 4),

    sdkBackgroundColor = CheckoutTheme.Color(color = Color.WHITE)
)

return CheckoutTheme(
    uiMode = CheckoutTheme.UiMode.AUTO,
    showPaymentDetails = showPaymentDetails,
    appearanceLight = appearanceLight,
    appearanceDark = appearanceDark,
)