Skip to content
Integrate / SDKs / iOS SDK / Customization guide

iOS SDK customization guide

Last updated: 14th July 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()
 }