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 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
}