HomeGuidesReference
Log In
Guides

How to Style Forage iOS Elements

Learn how to style Forage Elements when building with the iOS SDK

This guide explains how to style Forage Elements in iOS and covers customization options for borders, colors, fonts, and field-specific properties across PAN, PIN, and Payment Sheet components.

Set Styling Properties After Initialization

To style a Forage Element using the iOS SDK, set its styling properties after initialization. The examples below show how to customize different Forage Elements by applying attributes like border, corner radius, and placeholder text.

// EBT Card PAN Element:
private let foragePanTextField: ForagePANTextField = {
  let tf = ForagePANTextField()
  tf.masksToBounds = true
  tf.cornerRadius = 4
  tf.borderColor = .black
  tf.borderWidth = 2.5
  tf.placeholder = "EBT Card Number"
  return tf
}()

// EBT Balance + Capture PIN Elements:
private let foragePinTextField: ForagePINTextField = {
  let tf = ForagePINTextField()
  tf.masksToBounds = true
  tf.cornerRadius = 16
  tf.backgroundColor = .systemGray6
  tf.textAlignment = .center
  return tf
}()

// HSA/FSA Payment Sheet Element
private let foragePaymentSheet: ForagePaymentSheet = {
  let ps = ForagePaymentSheet()

  // set paymentType on the sheet
  ps.paymentType = .HSAFSA

  // set defaults on payment sheet that will cascade to all fields
  ps.borderWidth = 2.5
  ps.cornerRadius = 4
  ps.borderColor = .black
  ps.elementHeight = 52

  // set field specific styles
  ps.cardHolderNameTextField.cornerRadius = 6.0

  // Set field placeholders and accessibility settings
  ps.cardNumberTextField.placeholder = "Card number"
  ps.cardNumberTextField.accessibilityIdentifier = "tf_paymentsheet_cardNumber"
  ps.cardNumberTextField.isAccessibilityElement = true

  // set custom field names to identify the field as currentFirstResponder
  ps.cardHolderNameTextField.name = "cardName"
  ps.cardNumberTextField.name = "cardNumber"
  ps.cardExpirationTextField.name = "cardExp"
  ps.cardCVVTextField.name = "cardCVV"
  ps.cardZipCodeTextField.name = "cardZip"

  return ps
}()

The tables below list all possible styling properties for each Element type.

ForagePANTextField options

This section lists all available style attributes for the ForagePANTextField, which is used for entering EBT card numbers.

AttributeSwift TypeDefault value
cornerRadiusCGFloat4
masksToBoundsBooltrue
borderColorUIColor.black
borderWidthCGFloat0.1
clearButtonModeUITextField.ViewMode.never
fontUIFont.systemFont(ofSize: 14, weight: .regular)
placeholderString""
sizeDouble24.0
textAlignmentNSTextAlignment.natural
tfTintColorUIColor.black

ForagePINTextField options

This section outlines the styling options for the ForagePINTextField, which is typically used for EBT PIN entry during balance checks or payment captures.

AttributeSwift TypeDefault value
backgroundColorUIColor.systemGray6
cornerRadiusCGFloat16
masksToBoundsBooltrue
borderColorUIColor.clear
borderWidthCGFloat0
fontUIFont.systemFont(ofSize: 14, weight: .regular)
paddingUIEdgeInsetsUIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0)
size (font size)CGFloat24.0
textAlignmentNSTextAlignment.natural
textColorUIColor.black
tfTintColorUIColor.black

ForagePaymentSheet options

You can customize the appearance of individual text fields within the ForagePaymentSheet. Style options applied to the main ForagePaymentSheet will cascade down to its text fields, but you can also override styles directly on each field:

  • cardHolderNameTextField

  • cardNumberTextField

  • cardExpirationTextField

  • cardCVVTextField

  • cardZipCodeTextField

AttributeSwift TypeDefault value
elementHeight
Note: This option is set exclusively on the Payment sheet.
Int83
borderWidthCGFloat0.1
borderColorUIColor.black
cornerRadiusCGFloat4
masksToBoundsBoolfalse
paddingUIEdgeInsetsUIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
textColorUIColor.black
size (font size)Double24.0
tfTintColorUIColor.black
textAlignmentNSTextAlignment.natural
fontUIFont.systemFont(ofSize: 14, weight: .regular)

Next steps