Skip to content

Custom form styling

Last updated: October 20, 2022

For complete control over how the various UI elements on your forms look, you can use our fully custom solution.

You can use the properties listed in the structs below to edit each individual UI component displayed across the forms:

1
private enum Constants {
2
    static let mainFontColor = UIColor(red: 0 / 255, green: 204 / 255, blue: 45 / 255, alpha: 1)
3
    static let secondaryFontColor = UIColor(red: 177 / 255, green: 177 / 255, blue: 177 / 255, alpha: 1)
4
    static let errorColor = UIColor.red
5
    static let backgroundColor = UIColor(red: 23 / 255, green: 32 / 255, blue: 30 / 255, alpha: 1)
6
    static let textFieldBackgroundColor = UIColor(red: 36 / 255.0, green: 48 / 255.0, blue: 45 / 255.0, alpha: 1.0)
7
    static let borderRadius: CGFloat = 4
8
    static let borderWidth: CGFloat = 1
9
}
10


11
// Main payment form
12


13
struct PaymentFormStyleCustom1: PaymentFormStyle {
14
  var backgroundColor: UIColor = Constants.backgroundColor
15
  var headerView: PaymentHeaderCellStyle = StyleOrganiser.PaymentHeaderViewStyle()
16
  var addBillingSummary: CellButtonStyle? = StyleOrganiser.BillingStartButton()
17
  var editBillingSummary: BillingSummaryViewStyle? = StyleOrganiser.BillingSummaryStyle()
18
  var cardholderInput: CellTextFieldStyle?
19
  var cardNumber: CellTextFieldStyle = StyleOrganiser.CardNumberSection()
20
  var expiryDate: CellTextFieldStyle = StyleOrganiser.ExpiryDateSection()
21
  var securityCode: CellTextFieldStyle? = StyleOrganiser.SecurityNumberSection()
22
  var payButton: ElementButtonStyle = StyleOrganiser.PayButtonFormStyleCustom1()
23
}
24


25
struct BillingFormStyleCustom1: BillingFormStyle {
26
  var mainBackground: UIColor = Constants.backgroundColor
27
  var header: BillingFormHeaderCellStyle = StyleOrganiser.BillingHeaderViewStyle()
28
  var cells: [BillingFormCell] = [
29
    .fullName(StyleOrganiser.BillingFullNameInput()),
30
    .addressLine1(StyleOrganiser.BillingAddressLine1Input()),
31
    .addressLine2(StyleOrganiser.BillingAddressLine2Input()),
32
    .city(StyleOrganiser.BillingCityInput()),
33
    .state(StyleOrganiser.BillingStateInput()),
34
    .postcode(StyleOrganiser.BillingPostcodeInput()),
35
    .country(StyleOrganiser.BillingCountryInput()),
36
    .phoneNumber(StyleOrganiser.BillingPhoneInput())
37
  ]
38
}
39


40
private enum StyleOrganiser {
41


42
    struct PaymentHeaderViewStyle: PaymentHeaderCellStyle {
43
        var shouldHideAcceptedCardsList = true
44
        var backgroundColor: UIColor = Constants.backgroundColor
45
        var headerLabel: ElementStyle? = PaymentHeaderLabel()
46
        var subtitleLabel: ElementStyle? = PaymentHeaderSubtitle()
47
        var schemeIcons: [UIImage?] = []
48
    }
49


50
    struct BillingHeaderViewStyle: BillingFormHeaderCellStyle {
51
        var backgroundColor: UIColor = .clear
52
        var headerLabel: ElementStyle = BillingHeaderLabel()
53
        var cancelButton: ElementButtonStyle = CancelButtonStyle()
54
        var doneButton: ElementButtonStyle = DoneButtonStyle()
55
    }
56


57
  struct BillingHeaderLabel: ElementStyle {
58
        var textAlignment: NSTextAlignment = .natural
59
        var isHidden = false
60
        var text: String = "Billing address"
61
        var font = UIFont(sfMono: .semibold, size: 24)
62
        var backgroundColor: UIColor = .clear
63
        var textColor: UIColor = Constants.mainFontColor
64
    }
65


66
    struct PayButtonFormStyleCustom1: ElementButtonStyle {
67
      var image: UIImage?
68
      var textAlignment: NSTextAlignment = .center
69
      var text: String = "Pay 100$"
70
      var font = UIFont.systemFont(ofSize: 15)
71
      var disabledTextColor: UIColor = Constants.secondaryFontColor
72
      var disabledTintColor: UIColor = Constants.mainFontColor.withAlphaComponent(0.2)
73
      var activeTintColor: UIColor = Constants.mainFontColor
74
      var backgroundColor: UIColor = Constants.mainFontColor
75
      var textColor: UIColor = .white
76
      var normalBorderColor: UIColor = .clear
77
      var focusBorderColor: UIColor = .clear
78
      var errorBorderColor: UIColor = .clear
79
      var imageTintColor: UIColor = .clear
80
      var isHidden = false
81
      var isEnabled = true
82
      var height: Double = 56
83
      var width: Double = 0
84
      var cornerRadius: CGFloat = 10
85
      var borderWidth: CGFloat = 0
86
      var textLeading: CGFloat = 0
87
    }
88


89
    struct CancelButtonStyle: ElementButtonStyle {
90
        var textAlignment: NSTextAlignment = .natural
91
        var isEnabled = true
92
        var disabledTextColor: UIColor = Constants.secondaryFontColor
93
        var disabledTintColor: UIColor = .clear
94
        var activeTintColor: UIColor = .clear
95
        var imageTintColor: UIColor = .clear
96
        var normalBorderColor: UIColor = .clear
97
        var focusBorderColor: UIColor = .clear
98
        var errorBorderColor: UIColor = .clear
99
        var image: UIImage?
100
        var textLeading: CGFloat = 0
101
        var cornerRadius: CGFloat = Constants.borderRadius
102
        var borderWidth: CGFloat = Constants.borderWidth
103
        var height: Double = 60
104
        var width: Double = 70
105
        var isHidden = false
106
        var text: String = "Cancel"
107
        var font = UIFont(sfMono: .semibold, size: 17)
108
        var backgroundColor: UIColor = .clear
109
        var textColor: UIColor = Constants.mainFontColor
110
    }
111


112
    struct DoneButtonStyle: ElementButtonStyle {
113
        var textAlignment: NSTextAlignment = .natural
114
        var isEnabled = true
115
        var disabledTextColor: UIColor = Constants.secondaryFontColor
116
        var disabledTintColor: UIColor = .clear
117
        var activeTintColor: UIColor = .clear
118
        var imageTintColor: UIColor = .clear
119
        var normalBorderColor: UIColor = .clear
120
        var focusBorderColor: UIColor = .clear
121
        var errorBorderColor: UIColor = .clear
122
        var image: UIImage?
123
        var textLeading: CGFloat = 0
124
        var cornerRadius: CGFloat = Constants.borderRadius
125
        var borderWidth: CGFloat = Constants.borderWidth
126
        var height: Double = 60
127
        var width: Double = 70
128
        var isHidden = false
129
        var text: String = "Done"
130
        var font = UIFont(sfMono: .semibold, size: 17)
131
        var backgroundColor: UIColor = .clear
132
        var textColor: UIColor = Constants.mainFontColor
133
    }
134


135
    struct PaymentHeaderLabel: ElementStyle {
136
        var textAlignment: NSTextAlignment = .natural
137
        var isHidden = false
138
        var text: String = "Payment details"
139
        var font = UIFont(size: 24)
140
        var backgroundColor: UIColor = .clear
141
        var textColor: UIColor = Constants.mainFontColor
142
    }
143


144
    struct PaymentHeaderSubtitle: ElementStyle {
145
        var textAlignment: NSTextAlignment = .natural
146
        var isHidden = false
147
        var text: String = "Visa, Mastercard and Maestro accepted."
148
        var font = UIFont(size: 12)
149
        var backgroundColor: UIColor = .clear
150
        var textColor: UIColor = Constants.mainFontColor
151
    }
152


153
    struct CardNumberSection: CellTextFieldStyle {
154
        var isMandatory = true
155
        var backgroundColor: UIColor = .clear
156
        var textfield: ElementTextFieldStyle = TextFieldStyle()
157
        var title: ElementStyle? = TitleStyle(text: "Card number")
158
        var mandatory: ElementStyle? = MandatoryStyle(text: "")
159
        var hint: ElementStyle?
160
        var error: ElementErrorViewStyle? = ErrorViewStyle(text: "Insert a valid card number")
161
    }
162


163
    struct ExpiryDateSection: CellTextFieldStyle {
164
        var textfield: ElementTextFieldStyle = TextFieldStyle(placeholder: "_ _ / _ _")
165
        var isMandatory = true
166
        var backgroundColor: UIColor = .clear
167
        var title: ElementStyle? = TitleStyle(text: "Expiry date")
168
        var mandatory: ElementStyle? = MandatoryStyle(text: "")
169
        var hint: ElementStyle?
170
        var error: ElementErrorViewStyle? = ErrorViewStyle(text: "Insert a valid expiry date")
171
    }
172


173
    struct SecurityNumberSection: CellTextFieldStyle {
174
        var textfield: ElementTextFieldStyle = TextFieldStyle()
175
        var isMandatory = true
176
        var backgroundColor: UIColor = .clear
177
        var title: ElementStyle? = TitleStyle(text: "Security code")
178
        var mandatory: ElementStyle? = MandatoryStyle(text: "")
179
        var hint: ElementStyle?
180
        var error: ElementErrorViewStyle? = ErrorViewStyle(text: "Insert a valid security code")
181
    }
182


183
    struct TextFieldStyle: ElementTextFieldStyle {
184
        var textAlignment: NSTextAlignment = .natural
185
        var text: String = ""
186
        var isSupportingNumericKeyboard = true
187
        var height: Double = 56
188
        var cornerRadius: CGFloat = Constants.borderRadius
189
        var borderWidth: CGFloat = Constants.borderWidth
190
        var placeholder: String?
191
        var tintColor: UIColor = Constants.mainFontColor
192
        var normalBorderColor: UIColor = .clear
193
        var focusBorderColor: UIColor = .clear
194
        var errorBorderColor: UIColor = Constants.errorColor
195
        var isHidden = false
196
        var font = UIFont(size: 15)
197
        var backgroundColor: UIColor = Constants.textFieldBackgroundColor
198
        var textColor: UIColor = Constants.mainFontColor
199
    }
200


201
    struct TitleStyle: ElementStyle {
202
        var textAlignment: NSTextAlignment = .natural
203
        var text: String
204
        var isHidden = false
205
        var font = UIFont(size: 15)
206
        var backgroundColor: UIColor = .clear
207
        var textColor: UIColor = Constants.mainFontColor
208
    }
209


210
    struct MandatoryStyle: ElementStyle {
211
        var textAlignment: NSTextAlignment = .natural
212
        var text: String
213
        var isHidden = false
214
        var font = UIFont(size: 13)
215
        var backgroundColor: UIColor = .clear
216
        var textColor: UIColor = Constants.secondaryFontColor
217
    }
218


219
    struct SubtitleElementStyle: ElementStyle {
220
        var textAlignment: NSTextAlignment = .natural
221
        var text: String
222
        var textColor: UIColor = Constants.secondaryFontColor
223
        var backgroundColor: UIColor = .clear
224
        var tintColor: UIColor = Constants.mainFontColor
225
        var image: UIImage?
226
        var height: Double = 30
227
        var isHidden = false
228
        var font = UIFont(size: 13)
229
    }
230


231
    struct ErrorViewStyle: ElementErrorViewStyle {
232
        var textAlignment: NSTextAlignment = .natural
233
        var text: String
234
        var textColor: UIColor = Constants.errorColor
235
        var backgroundColor: UIColor = .clear
236
        var tintColor: UIColor = Constants.errorColor
237
        var image: UIImage?
238
        var height: Double = 30
239
        var isHidden = true
240
        var font = UIFont(size: 13)
241
    }
242


243
    struct BillingStartButton: CellButtonStyle {
244
        var isMandatory = true
245
        var button: ElementButtonStyle = AddBillingDetailsButtonStyle()
246
        var backgroundColor: UIColor = .red// .clear
247
        var title: ElementStyle? = TitleStyle(text: "Billing address")
248
        var mandatory: ElementStyle?
249
        var hint: ElementStyle? = {
250
            var element = SubtitleElementStyle(text: "We need this information as an additional security measure to verify this card.")
251
            element.textColor = Constants.mainFontColor
252
            return element
253
        }()
254
        var error: ElementErrorViewStyle?
255
    }
256


257
    struct BillingSummaryStyle: BillingSummaryViewStyle {
258
        var summary: ElementStyle? = BillingSummaryElementStyle(text: "")
259
        var cornerRadius: CGFloat = Constants.borderRadius
260
        var borderWidth: CGFloat = Constants.borderWidth
261
        var separatorLineColor: UIColor = Constants.secondaryFontColor
262
        var borderColor: UIColor = Constants.mainFontColor
263
        var button: ElementButtonStyle = AddBillingDetailsButtonStyle(textLeading: 20, text: "\u{276F} Update Billing Address")
264
        var isMandatory = true
265
        var backgroundColor: UIColor = .clear
266
        var title: ElementStyle? = TitleStyle(text: "Billing address")
267
        var mandatory: ElementStyle?
268
        var hint: ElementStyle? = {
269
            var element = SubtitleElementStyle(text: "We need this information as an additional security measure to verify this card.")
270
            element.textColor = Constants.mainFontColor
271
            return element
272
        }()
273
        var error: ElementErrorViewStyle?
274
    }
275


276
    struct AddBillingDetailsButtonStyle: ElementButtonStyle {
277
        var textAlignment: NSTextAlignment = .natural
278
        var isEnabled = true
279
        var disabledTextColor: UIColor = Constants.secondaryFontColor
280
        var disabledTintColor: UIColor = Constants.secondaryFontColor
281
        var activeTintColor: UIColor = Constants.mainFontColor
282
        var imageTintColor: UIColor = .clear
283
        var normalBorderColor: UIColor = .clear
284
        var focusBorderColor: UIColor = .clear
285
        var errorBorderColor: UIColor = .clear
286
        var image: UIImage?
287
        var textLeading: CGFloat = 0
288
        var cornerRadius: CGFloat = 0
289
        var borderWidth: CGFloat = 0
290
        var height: Double = 56
291
        var width: Double = 300
292
        var isHidden = false
293
        var text: String = "\u{276F} Add billing address"
294
        var font = UIFont(sfMono: .semibold, size: 15)
295
        var backgroundColor: UIColor = .clear
296
        var textColor: UIColor = Constants.mainFontColor
297
    }
298


299
    struct BillingFullNameInput: CellTextFieldStyle {
300
        var textfield: ElementTextFieldStyle = TextFieldStyle(isSupportingNumericKeyboard: false)
301
        var isMandatory = true
302
        var backgroundColor: UIColor = .clear
303
        var title: ElementStyle? = TitleStyle(text: "Full name")
304
        var mandatory: ElementStyle?
305
        var hint: ElementStyle?
306
        var error: ElementErrorViewStyle?
307
    }
308


309
    struct BillingAddressLine1Input: CellTextFieldStyle {
310
        var textfield: ElementTextFieldStyle = TextFieldStyle(isSupportingNumericKeyboard: false)
311
        var isMandatory = true
312
        var backgroundColor: UIColor = .clear
313
        var title: ElementStyle? = TitleStyle(text: "Address line 1")
314
        var mandatory: ElementStyle?
315
        var hint: ElementStyle?
316
        var error: ElementErrorViewStyle?
317
    }
318


319
    struct BillingAddressLine2Input: CellTextFieldStyle {
320
        var textfield: ElementTextFieldStyle = TextFieldStyle(isSupportingNumericKeyboard: false)
321
        var isMandatory = false
322
        var backgroundColor: UIColor = .clear
323
        var title: ElementStyle? = TitleStyle(text: "Address line 2")
324
        var mandatory: ElementStyle? = MandatoryStyle(text: "Optional")
325
        var hint: ElementStyle?
326
        var error: ElementErrorViewStyle?
327
    }
328


329
    struct BillingCityInput: CellTextFieldStyle {
330
        var textfield: ElementTextFieldStyle = TextFieldStyle(isSupportingNumericKeyboard: false)
331
        var isMandatory = true
332
        var backgroundColor: UIColor = .clear
333
        var title: ElementStyle? = TitleStyle(text: "City")
334
        var mandatory: ElementStyle?
335
        var hint: ElementStyle?
336
        var error: ElementErrorViewStyle?
337
    }
338


339
    struct BillingStateInput: CellTextFieldStyle {
340
        var textfield: ElementTextFieldStyle = TextFieldStyle(isSupportingNumericKeyboard: false)
341
        var isMandatory = true
342
        var backgroundColor: UIColor = .clear
343
        var title: ElementStyle? = TitleStyle(text: "State")
344
        var mandatory: ElementStyle?
345
        var hint: ElementStyle?
346
        var error: ElementErrorViewStyle?
347
    }
348


349
    struct BillingPostcodeInput: CellTextFieldStyle {
350
        var textfield: ElementTextFieldStyle = TextFieldStyle(isSupportingNumericKeyboard: false)
351
        var isMandatory = true
352
        var backgroundColor: UIColor = .clear
353
        var title: ElementStyle? = TitleStyle(text: "Postcode/Zip")
354
        var mandatory: ElementStyle?
355
        var hint: ElementStyle?
356
        var error: ElementErrorViewStyle?
357
    }
358


359
    struct BillingCountryInput: CellButtonStyle {
360
        var button: ElementButtonStyle = BillingCountryButton()
361
        var isMandatory = true
362
        var backgroundColor: UIColor = .clear
363
        var title: ElementStyle? = TitleStyle(text: "Country")
364
        var mandatory: ElementStyle?
365
        var hint: ElementStyle?
366
        var error: ElementErrorViewStyle?
367
    }
368


369
    struct BillingPhoneInput: CellTextFieldStyle {
370
        var textfield: ElementTextFieldStyle = TextFieldStyle()
371
        var isMandatory = true
372
        var backgroundColor: UIColor = .clear
373
        var title: ElementStyle? = TitleStyle(text: "Phone number")
374
        var mandatory: ElementStyle?
375
        var hint: ElementStyle? = SubtitleElementStyle(text: "We will only use this to confirm identity if necessary")
376
        var error: ElementErrorViewStyle?
377
    }
378


379
    struct BillingSummaryElementStyle: ElementStyle {
380
        var textAlignment: NSTextAlignment = .natural
381
        var isHidden = false
382
        var text: String
383
        var font = UIFont(size: 14)
384
        var backgroundColor: UIColor = .clear
385
        var textColor: UIColor = Constants.secondaryFontColor
386
    }
387


388
    struct BillingCountryButton: ElementButtonStyle {
389
        var textAlignment: NSTextAlignment = .natural
390
        var isEnabled = true
391
        var disabledTextColor: UIColor = Constants.secondaryFontColor
392
        var disabledTintColor: UIColor = .clear
393
        var activeTintColor: UIColor = Constants.mainFontColor
394
        var imageTintColor: UIColor = Constants.mainFontColor
395
        var normalBorderColor: UIColor = .clear
396
        var focusBorderColor: UIColor = .clear
397
        var errorBorderColor: UIColor = .clear
398
        var image: UIImage? = UIImage(named: "arrow_green_down")
399
        var textLeading: CGFloat = 20
400
        var cornerRadius: CGFloat = Constants.borderRadius
401
        var borderWidth: CGFloat = 0
402
        var height: Double = 20
403
        var width: Double = 80
404
        var isHidden = false
405
        var text: String = "Please select a country"
406
        var font = UIFont(size: 15)
407
        var backgroundColor: UIColor = Constants.textFieldBackgroundColor
408
        var textColor: UIColor = Constants.secondaryFontColor
409
    }
410
}

See an example on our GitHub project.