Customization Theme

The main class describing theme is called CheckoutTheme.

It uses additional component classes like:

• ButtonComponent

• LabelComponent

• TextFieldComponent

The CheckoutTheme class consists of objects that define various UI components. While the names of these components largely correspond to those listed here, they also include platform-specific fields for further customization.

Properties description

All properties in the CheckoutTheme class are optional, allowing users to customize any of them as needed.

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
mainTitle	Font and color for all “Captions”	LabelComponent
title	Font and color for payment options in the list	LabelComponent
subtitle	Font and color for payment options details (like expiration date)	LabelComponent

Fees

Property Name	Description	Data Type
feesTitle	Font and color of fees value in the payment options list	LabelComponent
feesSubtitle	Font and color of fees description in the payment options list	LabelComponent

Data

Property Name	Description	Data Type
dataLabel	Font and color of payment details fields (like “Amount”)	LabelComponent
dataValue	Font and color of payment details values	LabelComponent

Other

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

Text Fields

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

Colors

Property Name	Description	Data Type
backgroundColor	The main background of the SDK view component	UIColor
backgroundColorModal	The background of any modal window	UIColor
iconColor	The color of the icon of the payment	UIColor
paymentItemBackgroundColor	The background of an item in payment options list	UIColor
selectPaymentMethodTitleBackgroundColor	The background of the "Select Payment Method" bottom sheet header	UIColor

Buttons

Property Name	Description	Data Type
button	Background, text color and font for any button	ButtonComponent
selectorButton	Background, text color and font for payment item selection button	ButtonComponent

Switch

Property Name	Description	Data Type
switchOnTintColor	The color of switch (toggle) control	UIColor

Margins

Property Name	Description	Data Type
margins	Top, left, bottom and right margins between compone	UIEdgeInsets

Payment Details

Property Name	Description	Data Type
showPaymentDetails	Boolean variable determining whether the “Payment Details” section should be displayed or hidden.	Boolean

Data types description

LabelComponent

Property Name	Data Type
color	UIColor
font	UIFont
fontFamily	String

TextFieldComponent

Property Name	Data Type
label	LabelComponent
text	LabelComponent
backgroundColor	UIColor

ButtonComponent

Property Name	Data Type
enabledTitleColor	UIColor
disabledTitleColor	UIColor
font	UIFont
enabledBackgroundColor	UIColor
disabledBackgroundColor	UIColor
fontFamily	String

UIEdgeInsets

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

Example

To configure the theme, similar steps must be followed as described in the test app file.

Code Snippet:

func createTheme() - > CheckoutTheme {
    var theme = CheckoutTheme()
    theme.backgroundColor = .systemBackground
    theme.backgroundColorModal = .secondarySystemBackground
    theme.margins = UIEdgeInsets(top: 8, left: 2, bottom: 8, right: 2)
    theme.mainTitle.color = .label
    theme.mainTitle.fontFamily = "Arial"
    theme.button.enabledTitleColor = .payButtonTitle
    theme.button.disabledTitleColor = .payButtonDisabledTitle
    theme.button.fontFamily = "Arial"
    theme.button.enabledBackgroundColor = .payButtonBackground
    theme.button.disabledBackgroundColor = .payButtonDisabledBackground
    return theme
}

The theme object is passed to the SDK initialization as shown below:

Code Snippet:

self.checkout = Checkout(
    theme: theme,
    sessionId: sessionId,
    merchantId: merchantId,
    apiKey: apiKey,
    delegate: self
)