UI Components


An object that displays an editable text area in your interface.


class VGSTextField: UIView

VGSTextField default attributes

Attribute Code example
borderColor cardNumber.borderColor = UIColor.blue
borderWidth cardNumber.borderWidth = 1
cornerRadius cardNumber.cornerRadius = 4
textColor cardNumber.textColor = .red
font cardNumber.font = UIFont.boldSystemFont(ofSize: 18)
padding cardNumber.padding = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
textAlignment cardNumber.textAlignment = .natural
placeholder cardNumber.placeholder = “card number”

Validating Text and Managing the Editing Process

The VGSTextField class provide built-in support for input text validation and formatting. To use all the power of VGSTextField you should configure it with VGSConfiguration and implement VGSTextFieldDelegate methods.

Attribute Description
state State represent textfield’s current parameters as isValid, isEmpty, etc.
configuration VGSConfiguration specifies textfield required configuration
delegate VGSTextFieldDelegate handle text field editing states


An object that displays an editable text area, for use instead of a VGSTextField when need to detect and show credit card brand images.


class VGSCardTextField: VGSTextField


VGSCardTextField inherits same functionality as default VGSTextField. In addition it detects credit card brand while user typing data and display brand image in a text field. All card brand images are included in the SDK, however you still can set your custom images.

Setting custom images

/// set image for specific card type
var cardsIconSource: ((SwiftLuhn.CardType) -> UIImage?)?

Code example

let cardNumber = VGSCardTextField()
cardNumber.cardsIconSource = { cardType in
    switch cardType {
    case .mastercard:
        return UIImage(named: "<custom mastercard icon>")
    case .visa:
        return UIImage(named: "<custom visa icon>")
        return nil