Skip to content

Themed form styling

Last updated: October 20, 2022

If you want to customize your forms beyond what is supported by the default integration, you can apply a theme using the Theme object.

When instantiating a new Theme object, you must supply the following fields at a minimum:

  • primaryFontColor
  • secondaryFontColor
  • buttonFontColor
  • errorFontColor
  • backgroundColor
  • errorBorderColor

You can then optionally provide additional values to customize other elements including button styling, custom placeholder and error text, and field input controls.

Dynamic font sizing based on the user's device is built-in to the Theme object.

1
// Create a new Theme object
2
var theme = Theme(primaryFontColor: UIColor(red: 0 / 255, green: 204 / 255, blue: 45 / 255, alpha: 1),
3
    secondaryFontColor: UIColor(red: 177 / 255, green: 177 / 255, blue: 177 / 255, alpha: 1),
4
    buttonFontColor: .green,
5
    errorFontColor: .red,
6
    backgroundColor: UIColor(red: 23 / 255, green: 32 / 255, blue: 30 / 255, alpha: 1),
7
    errorBorderColor: .red)
8


9
// Add a border and corner radius around text input fields
10
theme.textInputBackgroundColor = UIColor(red: 36 / 255.0, green: 48 / 255.0, blue: 45 / 255.0, alpha: 1.0)
11
theme.textInputBorderRadius = 4
12


13
// Add a border around input sections
14
theme.borderRadius = 4
15


16
// Create a new payment form style, only providing custom text values
17
var paymentFormStyle = theme.buildPaymentForm(
18
    headerView: theme.buildPaymentHeader(title: "Payment details",
19
                                        subtitle: "Accepting your favorite payment methods"),
20
    addBillingButton: theme.buildAddBillingSectionButton(text: "Add billing details",
21
                                                        isBillingAddressMandatory: false,
22
                                                        titleText: "Billing details"),
23
    billingSummary: theme.buildBillingSummary(buttonText: "Change billing details",
24
                                            titleText: "Billing details"),
25
    cardNumber: theme.buildPaymentInput(isTextFieldNumericInput: true,
26
                                        titleText: "Card number",
27
                                        errorText: "Please enter valid card number"),
28
    expiryDate: theme.buildPaymentInput(textFieldPlaceholder: "__ / __",
29
                                        isTextFieldNumericInput: false,
30
                                        titleText: "Expiry date",
31
                                        errorText: "Please enter valid expiry date"),
32
    securityCode: theme.buildPaymentInput(isTextFieldNumericInput: true,
33
                                        titleText: "CVV date",
34
                                        errorText: "Please enter valid security code"),
35
    payButton: theme.buildPayButton(text: "Pay now"))
36


37
// Override a custom property from the resulting payment form style
38
paymentFormStyle.payButton.disabledTextColor = UIColor.lightGray
39


40
// Create a new billing form style, and modify each field's properties individually
41
var billingFormStyle = theme.buildBillingForm(
42
            header: theme.buildBillingHeader(title: "Billing information",
43
                                             cancelButtonTitle: "Cancel",
44
                                             doneButtonTitle: "Done"),
45
            cells: [.fullName(theme.buildBillingInput(text: "", isNumericInput: false, isMandatory: false, title: "Your name")),
46
                    .addressLine1(theme.buildBillingInput(text: "", isNumericInput: false, isMandatory: true, title: "Address")),
47
                    .city(theme.buildBillingInput(text: "", isNumericInput: false, isMandatory: true, title: "City")),
48
                    .country(theme.buildBillingCountryInput(buttonText: "Select your country", title: "Country")),
49
                    .phoneNumber(theme.buildBillingInput(text: "", isNumericInput: true, isMandatory: true, title: "Phone number"))])

See our example project on GitHub.