UI Components

VGSTextField

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

Declaration

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

VGSCardTextField

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

Declaration

class VGSCardTextField: VGSTextField

Overview

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>")
    default:
        return nil
    }
}