HomeGuidesReference
Log InDashboard
Guides
Dashboard

Style 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

Attribute

Swift Type

Default value

elementHeight

  • *Note**: This option is set exclusively on the Payment sheet.

Int

83

borderWidth

CGFloat

0.1

borderColor

UIColor

.black

cornerRadius

CGFloat

4

masksToBounds

Bool

false

padding

UIEdgeInsets

UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)

textColor

UIColor

.black

size (font size)

Double

24.0

tfTintColor

UIColor

.black

textAlignment

NSTextAlignment

.natural

font

UIFont

.systemFont(ofSize: 14, weight: .regular)

Next steps