Customizing the Card View

The SDK provides a CardViewController that can be used to allow users to enter their card details. You can modify the card view after the initialization.

Customizing the Card View with CheckoutTheme

Checkout Theme

    var cardViewController: CardViewController {
        CheckoutTheme.primaryBackgroundColor = .blue
        CheckoutTheme.secondaryBackgroundColor = .purple
        CheckoutTheme.errorColor = .yellow
        CheckoutTheme.color = .green
        return CardViewController(cardHolderNameState: .hidden, billingDetailsState: .normal)
    }

Customizing the fields

    let cardViewController = CardViewController(cardHolderNameState: .hidden, billingDetailsState: .hidden)
    let softBlack = UIColor(red: 34/255, green: 41/255, blue: 47/255, alpha: 1)

    override func viewDidLoad() {
        super.viewDidLoad()
        cardViewController.view.backgroundColor = softBlack
        customizeFields()
    }

    func customizeFields() {
        let cardView = cardViewController.cardView
        let views: [StandardInputView] = [cardView.cardNumberInputView,
                                          cardView.expirationDateInputView,
                                          cardView.cvvInputView]
        cardView.backgroundColor = softBlack
        cardView.acceptedCardLabel.textColor = .white
        views.forEach { view in
            view.layer.borderColor = UIColor.lightGray.cgColor
            view.layer.borderWidth = 2
            view.layer.cornerRadius = 10
            view.backgroundColor = softBlack
            view.textField.textColor = .white
            view.label.textColor = .white
        }
    }

We start by initializing a card view controller without the card holder and billing details fields.

  let cardViewController = CardViewController(cardHolderNameState: .hidden, billingDetailsState: .hidden)

Inside the viewDidLoad method, we can access the cardView let cardView = cardViewController.cardView. The public properties can be modified. This allows you to add different colors and style. In the code below, we implement a dark theme.

    let views: [StandardInputView] = [cardView.cardNumberInputView,
        cardView.expirationDateInputView,
        cardView.cvvInputView]
    cardView.backgroundColor = softBlack
    cardView.acceptedCardLabel.textColor = .white
    views.forEach { view in
        view.layer.borderColor = UIColor.lightGray.cgColor
        view.layer.borderWidth = 2
        view.layer.cornerRadius = 10
        view.backgroundColor = softBlack
        view.textField.textColor = .white
        view.label.textColor = .white
    }