Skip to content

iOS SDK customization guide

Last updated: 20th September 2022

Customization for the pre-built UI

CheckoutTheme class

Customize CardViewController with the CheckoutTheme class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Apply customizations to CheckoutTheme.
CheckoutTheme.primaryBackgroundColor = .purple
CheckoutTheme.secondaryBackgroundColor = .magenta
CheckoutTheme.tertiaryBackgroundColor = .red
CheckoutTheme.color = .white
CheckoutTheme.secondaryColor = .lightGray
CheckoutTheme.errorColor = .blue
CheckoutTheme.chevronColor = .white
CheckoutTheme.font = UIFont(name: "Chalkboard SE", size: 12)!
// Create the CheckoutAPIClient and CardViewController in the usual manner.
let checkoutAPIClient = CheckoutAPIClient(
publicKey: "<Your Public Key>",
environment: .sandbox)
let cardViewController = CardViewController(
checkoutApiClient: checkoutAPIClient,
cardHolderNameState: .normal,
billingDetailsState: .normal)
customization example

CheckoutTheme class methods

MethodDescriptionDeclaration

primaryBackgroundColor

Change the background color of the views.

`public static var primaryBackgroundColor: UI Color

secondaryBackgroundColor

Change the background color of input views.

public static var secondaryBackgroundColor: UI Color

tertiaryBackgroundColor

Change the color of the Table View Cell in the country selection table.

public static var tertiaryBackgroundColor: UI Color

color

Change the main text color.

public static var color: UIColor

secondaryColor

Change the input view placeholder text color.

public static var secondaryColor: UIColor

errorColor

Change the color of any error text

public static var errorColor: UIColor

font

Change the font for all text content.

public static var font: UIFont

barStyle

Change the style of the search bar.

public static var barStyle: UIBarStyle

Customize the fields

Start by initializing the CardViewController without the cardholder and billing details fields.

1
2
3
4
let cardViewController = CardViewController(
checkoutApiClient: checkoutAPIClient,
cardHolderNameState: .hidden,
billingDetailsState: .hidden)

Access the cardViewController card view to begin making edits to the colour and style.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
func customizeTheme()func customizeTheme() {
let cardView = cardViewController.cardView
cardView.backgroundColor = .systemBackground
cardView.acceptedCardLabel.textColor = .label
let views: [StandardInputView] = [
cardView.cardNumberInputView,
cardView.expirationDateInputView,
cardView.cvvInputView
]
views.forEach { view in
view.layer.borderColor = UIColor.opaqueSeparator.cgColor
view.layer.borderWidth = 2
view.layer.cornerRadius = 10
view.backgroundColor = .secondarySystemBackground
view.textField.textColor = .label
view.label.textColor = .label
}
}

Inside the viewDidLoad method, we can call the customizeFields function.

1
2
3
4
override func viewDidLoad() {
super.viewDidLoad()
customizeTheme()
}