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
ForagePANTextField
optionsThis section lists all available style attributes for the ForagePANTextField
, which is used for entering EBT card numbers.
Attribute | Swift Type | Default value |
---|---|---|
cornerRadius | CGFloat | 4 |
masksToBounds | Bool | true |
borderColor | UIColor | .black |
borderWidth | CGFloat | 0.1 |
clearButtonMode | UITextField.ViewMode | .never |
font | UIFont | .systemFont(ofSize: 14, weight: .regular) |
placeholder | String | "" |
size | Double | 24.0 |
textAlignment | NSTextAlignment | .natural |
tfTintColor | UIColor | .black |
ForagePINTextField
options
ForagePINTextField
optionsThis section outlines the styling options for the ForagePINTextField
, which is typically used for EBT PIN entry during balance checks or payment captures.
Attribute | Swift Type | Default value |
---|---|---|
backgroundColor | UIColor | .systemGray6 |
cornerRadius | CGFloat | 16 |
masksToBounds | Bool | true |
borderColor | UIColor | .clear |
borderWidth | CGFloat | 0 |
font | UIFont | .systemFont(ofSize: 14, weight: .regular) |
padding | UIEdgeInsets | UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 0) |
size (font size) | CGFloat | 24.0 |
textAlignment | NSTextAlignment | .natural |
textColor | UIColor | .black |
tfTintColor | UIColor | .black |
ForagePaymentSheet
options
ForagePaymentSheet
optionsYou 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
- Refer to the iOS Quickstart for a comprehensive integration guide.
Updated 15 days ago