SwiftUI Components

VGS Collect iOS SDK provide support for integration with apps that are buid with SwiftUI toolkit by providing SwiftUI wrappers for all VGS textfields. VGS Collect SwiftUI wrappers are designed to make integration easier and more straight forward by taking care of all needed state and editing events.

VGSTextFieldRepresentable

A component that displays an editable text interface.

Declaration

struct VGSTextFieldRepresentable: UIViewRepresentable

Creating VGSTextFieldRepresentable

/// Initialization
///
/// - Parameters:
///   - configuration: `VGSConfiguration` instance.
public init(configuration: VGSConfiguration)

Instance Methods

VGSTextFieldRepresentable is a SwiftUI wrapper around VGSTextField and have similar attributes and functionality represented in SwiftUI way.

VGSTextFieldRepresentable Text modifiers

/// Set `UIFont` value.
public func font(_ font: UIFont)
/// Set `placeholder` string.
public func placeholder(_ text: String)
/// Set `attributedPlaceholder` string.
public func attributedPlaceholder(_ text: NSAttributedString?)
/// Set `UITextAutocapitalizationType` type.
public func autocapitalizationType(_ type: UITextAutocapitalizationType)
/// Set `UITextSpellCheckingType` type.
public func spellCheckingType(_ type: UITextSpellCheckingType)
/// Set `NSTextAlignment` type.
public func textAlignment(_ alignment: NSTextAlignment)
/// Set `adjustsFontForContentSizeCategory` value.
public func adjustsFontForContentSizeCategory(_ adjusts: Bool)
/// Set `isSecureTextEntry` value.
public func setSecureTextEntry(_ secure: Bool)
/// Coordinates connection between scan data and text field.
public func cardScanCoordinator(_ coordinator: VGSCardScanCoordinator)

VGSTextFieldRepresentable View and Layout modifiers

/// Set `UIEdgeInsets` insets.
public func textFieldPadding(_ insets: UIEdgeInsets)
/// Set `borderColor` and `lineWidth`.
public func border(color: UIColor, lineWidth: CGFloat)
/// Set `keyboardAccessoryView` view.
public func keyboardAccessoryView(_ view: UIView?)

VGSTextFieldRepresentable Accessibility modifiers

/// Set `textFieldAccessibilityLabel` string.
public func textFieldAccessibilityLabel(_ label: String)

VGSTextFieldRepresentable Event modifiers

/// Handle  VGSTextFieldRepresentable editing events.
public func onEditingEvent(_ action: ((VGSTextFieldEditingEvent<StateType>) -> Void)?)
/// Handle `VGSTextFieldState` changes.
public func onStateChange(_ action: ((VGSTextFieldState) -> Void)?)

Code example

struct CardDataCollectionView: View {
  // Collector
  let vgsCollect = VGSCollect(id: "vaultId" environment: .sandbox)

  // State
  @State private var textFieldState: VGSTextFieldState? = nil
  
  // MARK: - Textfield UI attributes
  let paddings = UIEdgeInsets(top: 2,left: 8,bottom: 2,right: 8)
  let validColor = UIColor.lightGray
  let invalidColor = UIColor.red
      
  // Build View
  var body: some View {
    
    // extfield Configuration
    var configuration: VGSConfiguration {
      let config = VGSConfiguration(collector: vgsCollect, fieldName: "name")
      config.type = .cardHolderName
      return config
    }
    
    return VStack() {
      VGSTextFieldRepresentable(configuration: configuration)
        .placeholder("Holder Name")
        /// Track field editing events and State
        .onEditingEvent { event in
            switch event {
            case .didBegin(let state):
              print("Editing began with state: \(state.description)")
            case .didChange(let state):
                print("Editing changed with state: \(state.description)")
            case .didEnd(let state):
                print("Editing ended with state: \(state.description)")
            }
        }
        /// Track field State changes
        .onStateChange { newState in
          print(newState.isValid)
          textFieldState = newState
        }
        .textFieldPadding(paddings)
        .border(color: (textFieldState?.isValid ?? true) ? validColor : invalidColor, lineWidth: 1)
        .frame(height: 54)
    }
  }
}

VGSCardTextFieldRepresentable

A component that displays an editable text interface, for use instead of a VGSTextFieldRepresentable when you need to detect credit card brand while user typing data and display card brand image in a text field. All card brand images are included in the SDK, however you still can set your custom images.

Declaration

struct VGSCardTextFieldRepresentable: UIViewRepresentable

Creating VGSCardTextFieldRepresentable

/// Initialization
///
/// - Parameters:
///   - configuration: `VGSConfiguration` instance.
public init(configuration: VGSConfiguration)

Instance Methods

VGSCardTextFieldRepresentable is a SwiftUI wrapper around VGSCardTextField and have similar attributes and functionality represented in SwiftUI way. VGSCardTextFieldRepresentable has same functionality as VGSTextFieldRepresentable with additional modifiers.

VGSCardTextFieldRepresentable Card Icon modifiers

/// Set `size` of card icon.
public func cardIconSize(_ size: CGSize)
/// Set Card brand icon positions `CardIconLocation`.
public func cardIconLocation(_ location: VGSCardTextField.CardIconLocation)

Also VGSCardTextFieldRepresentable provide extandable VGSCardState with attributes specific to Card Number validation

/// Handle `VGSCardState` changes.
public func onStateChange(_ action: ((VGSCardState) -> Void)?)

Code example

// Setup  VGSConfiguration
var cardNumConfiguration: VGSConfiguration {
  let config = VGSConfiguration(collector: vgsCollect, fieldName: "card_number")
  config.type = .cardNumber
  return config
}
/// Set card brand icons globally
VGSPaymentCards.visa.brandIcon = UIImage(named: "my visa icon")
VGSPaymentCards.unknown.brandIcon = UIImage(named: "my unknown brand icon")
/// Return VGSCardTextFieldRepresentable Component
VGSCardTextFieldRepresentable(configuration: cardNumConfiguration)
          .placeholder("4111 1111 1111 1111")
          .onStateChange { newState in
            print(newState.bin)
            print(newState.cardBrand)
            cardTextFieldState = newState
          }
          .cardIconSize(CGSize(width: 40, height: 20))
          .cardIconLocation(.right)
          .textFieldPadding(paddings)
          .border(color: (cardTextFieldState?.isValid ?? true) ? validColor : invalidColor, lineWidth: 1)
          .frame(height: 54)

VGSCVCTextFieldRepresentable

A component that displays an editable text interface, for use instead of a VGSCVCTextFieldRepresentable when you need to display CVC image. CVC image can change dynamically for specific card brand(e.g. CVC image for Amex contains 4 digits). CVC image files are included in the SDK, however you still can set your custom images.

Declaration

struct VGSCVCTextFieldRepresentable: UIViewRepresentable

Creating VGSCVCTextFieldRepresentable

/// Initialization
///
/// - Parameters:
///   - configuration: `VGSConfiguration` instance.
public init(configuration: VGSConfiguration)

Instance Methods

VGSCVCTextFieldRepresentable is a SwiftUI wrapper around VGSCVCTextField and have similar attributes and functionality represented in SwiftUI way. VGSCVCTextFieldRepresentable has same functionality as VGSTextFieldRepresentable with additional modifiers.

VGSCVCTextFieldRepresentable Card Icon modifiers

/// Set size of CVC  icon.
public func cvcIconSize(_ size: CGSize)
/// Set `VGSCVCTextField.CVCIconLocation` inside textfield.
public func cvcIconLocation(_ location: VGSCVCTextField.CVCIconLocation)
/// Set CVC icon image for specific `VGSPaymentCards.CardBrand`.
public func cvcIconSource(_ sourceImage: @escaping (VGSPaymentCards.CardBrand) -> UIImage?)

Code example

// Setup  VGSConfiguration
var cvcConfiguration: VGSConfiguration {
  let config = VGSConfiguration(collector: vgsCollect, fieldName: "card_cvc")
  config.type = .cvc
  return config
}
/// Set card brand icons globally(you can also set icon via `cvcIconSource(:)` modifier)
VGSPaymentCards.amex.cvcIcon = UIImage(named: "my CVC icon for Amex")
VGSPaymentCards.unknown.cvcIcon = UIImage(named: "my CVC icon for unknown brand")
/// Return VGSCVCTextFieldRepresentable Component
VGSCVCTextFieldRepresentable(configuration: cvcConfiguration)
    .placeholder("CVC/CVV")
    .setSecureTextEntry(true)
    .cvcIconSize(CGSize(width: 30, height: 20))
    .textFieldPadding(paddings)
    .border(color: (cvcTextFieldState?.isValid ?? true) ? validColor : invalidColor, lineWidth: 1)
    .frame(height: 54)

VGSExpDateTextFieldRepresentable

A component that displays an editable text interface. In addition, VGSExpDateTextFieldRepresentable provides an option to use date picker as input source instead of keyboard. Input source can be specified in VGSExpDateConfiguration.

Declaration

struct VGSExpDateTextFieldRepresentable: UIViewRepresentable

Creating VGSExpDateTextFieldRepresentable

/// Initialization
///
/// - Parameters:
///   - configuration: `VGSExpDateConfiguration` instance.
public init(configuration: VGSExpDateConfiguration)

Instance Methods

VGSExpDateTextFieldRepresentable is a SwiftUI wrapper around VGSExpDateTextField and have similar attributes and functionality represented in SwiftUI way. VGSExpDateTextFieldRepresentable has same functionality as VGSTextFieldRepresentable with additional modifiers.

VGSExpDateTextFieldRepresentable Input Source modifiers

/// Set `VGSExpDateTextField.MonthFormat`  UIPicker format.  Default is `.longSymbols`.
public func monthPickerFormat(_ format: VGSExpDateTextField.MonthFormat)
/// Set `VGSExpDateTextField.YearFormat`  UIPicker format.  Default is `.long`.
public func yearPickerFormat(_ format: VGSExpDateTextField.YearFormat) 

Code example

// Setup  VGSExpDateConfiguration
let expDateConfiguration = VGSExpDateConfiguration(collector: vgsCollect, fieldName: "card_expirationDate")
expDateConfiguration.type = .expDate
/// Set input source if needed. Default is `VGSTextFieldInputSource.datePicker`
expDateConfiguration.inputSource = .datePicker
/// Return VGSExpDateTextFieldRepresentable Component
VGSExpDateTextFieldRepresentable(configuration: expDateConfiguration)
  .placeholder( "MM/YY")
  /// Set month picker date format as long symbols: e.g.:`January`
  .monthPickerFormat(.longSymbols)
  /// Set year picker date format as long year: e.g.:`2021`
  .yearPickerFormat(.long)
  .onStateChange { newState in
    print(newState.isValid)
  }
  .textFieldPadding(paddings)
  .frame(height: 54)
/// Output format will be same as field formatPattern:
/// "##/##" - "01/21"
/// OR
/// "##/####" - "01/2021"

• The date format displayed in the picker doesn't have impact on date format displayed in the field. SDK will automatically convert selected date when setting it into the field, based on the field formatPattern. • Date picker have limited valid expiration date range. Basicaly, it allows to set any date in future from current month plus 20 years. • If you need to collect date with long year format(MM/YYYY) you should update field .formatPattern and change default VGSValidationRuleCardExpirationDate rule in filed validation rules.

VGSDateTextFieldRepresentable

A component that displays an editable text interface. Component provides an option to validate that date is in a specific range. It also allows to use date picker as input source instead of keyboard. Input source and date range can be specified in VGSDateConfiguration.

Declaration

struct VGSDateTextFieldRepresentable: UIViewRepresentable

Creating VGSDateTextFieldRepresentable

/// Initialization
///
/// - Parameters:
///   - configuration: `VGSDateConfiguration` instance.
public init(configuration: VGSDateConfiguration)

Instance Methods

VGSDateTextFieldRepresentable is a SwiftUI wrapper around VGSDateTextField and have similar attributes and functionality represented in SwiftUI way. VGSDateTextFieldRepresentable has same functionality as VGSTextFieldRepresentable with additional modifiers.

VGSDateTextFieldRepresentable Input Source modifiers

/// Set `VGSDateTextField.MonthFormat`  UIPicker format. Default is `.shortSymbols`.
public func monthPickerFormat(_ format: VGSDateTextField.MonthFormat)

• The date format displayed in the picker doesn't have impact on date format displayed in the field. SDK will automatically convert selected date when setting it into the field, based on the field formatPattern. • Date picker will use the datePickerStartDate and datePickerEndDate dates as limited valid range. If they are not supplied, it will use the default range as: - datePickerStartDate: Today minus 100 years. - datePickerEndDate: Today plus 100 years.\

Code example

// Setup  VGSDateConfiguration
/// Set start and end dates, this is optional
let startDate = VGSDate(day: 1, month: 1, year: 2010)
let endDate = VGSDate(day: 1, month: 1, year: 2020)
/// Date format
let inputDateFormat = VGSDateFormat.mmddyyyy
/// Create configuration
let dateFieldConfiguration = VGSDateConfiguration(
  collector: vgsCollect,
  fieldName: "date_field",
  datePickerStartDate: startDate,
  datePickerEndDate: endDate
)
dateFieldConfiguration.inputDateFormat = inputDateFormat
dateFieldConfiguration.outputDateFormat = .yyyymmdd
dateFieldConfiguration.inputSource = .datePicker
dateFieldConfiguration.divider = "-"
dateFieldConfiguration.formatPattern = "##/##/####"
/// Setup validation rules, it is important to set the same start date,
/// end date and input date format used in the configuration
dateFieldConfiguration.validationRules = VGSValidationRuleSet(
  rules: [
    VGSValidationRuleDateRange(
      dateFormat: inputDateFormat,
      error: VGSValidationErrorType.date.rawValue,
      start: startDate,
      end: endDate
    )
  ]
)
/// Return VGSDateTextFieldRepresentable Component
VGSDateTextFieldRepresentable(configuration: dateFieldConfiguration)
  .placeholder("MM/DD/YYYY")
  .monthPickerFormat(.longSymbols)
  .onStateChange { newState in
    print(newState.isValid)
  }
  .textFieldPadding(paddings)
  .frame(height: 54)

/// Input format will use the formatPattern to display the date:
/// "01-02-2000" - "01/02/2010"
///
/// Output format will be same as field formatPattern using the divider:
/// "##/##/####" - "2010-02-01"
///
/// If no custom divider is set, output format will use the default divider "/":
/// "##/##/####" - "2010/02/01"

For more details about available attributes and functionality check our Demo App