Guides
Go to payrails.com

Styling Guide

Table of Contents

  1. Overview
  2. How Styling Works
  3. Card Form Styling
  4. Field Variants
  5. Card Icon Alignment
  6. Layout Presets
  7. Card Payment Button Styling
  8. Generic Redirect Button Styling
  9. Stored Instruments Styling
  10. Apple Pay Button Styling
  11. Translations & Labels
  12. Using with SwiftUI
  13. Full Example — Themed Checkout
  14. Style Properties Reference

Overview

The Payrails iOS SDK ships with sensible default styles for every UI component. You can override any property you want — only the values you provide will replace the defaults, everything else stays intact.

Key components you can style:

ComponentDescription
Card FormSecure card-number, CVV, expiry, and cardholder-name fields
Card Payment Button"Pay" button that submits the card form
Generic Redirect ButtonButton for redirect-based methods (iDEAL, Sofort, etc.)
Stored Instruments ListDisplays saved cards / PayPal accounts for returning customers
Apple Pay ButtonNative Apple Pay button (limited to Apple's built-in styles)

How Styling Works

The SDK uses a merge-over-defaults pattern:

  1. Every style struct has a .defaultStyle preset with production-ready defaults.
  2. You create a style struct and set only the properties you want to change — leave everything else nil.
  3. The SDK automatically merges your customizations over the defaults.
// You only need to set what you want to change:
let myButtonStyle = CardButtonStyle(
    backgroundColor: .black,
    cornerRadius: 12
    // Everything else (textColor, font, height…) keeps its default value
)

This means you never need to provide a complete style — just your overrides.

Card Form Styling

The card form is created via Payrails.createCardForm(config:). All visual customization goes into CardFormConfig.styles, which is a CardFormStylesConfig.

Quick Start

let config = CardFormConfig(
    styles: CardFormStylesConfig(
        wrapperStyle: CardWrapperStyle(cornerRadius: 12),
        allInputFieldStyles: CardFieldSpecificStyles(
            base: CardStyle(
                borderColor: .systemGray3,
                cornerRadius: 8,
                borderWidth: 1,
                font: .systemFont(ofSize: 16),
                textColor: .label
            ),
            focus: CardStyle(borderColor: .systemBlue),
            completed: CardStyle(borderColor: .systemGreen),
            invalid: CardStyle(borderColor: .systemRed)
        )
    )
)

let cardForm = session.createCardForm(config: config)

Wrapper Style

CardWrapperStyle controls the outer container that wraps all fields.

CardWrapperStyle(
    backgroundColor: UIColor?,   // Container background (default: nil / clear)
    borderColor: UIColor?,       // Border color (default: .separator)
    borderWidth: CGFloat?,       // Border width (default: 1.0)
    cornerRadius: CGFloat?,      // Corner radius (default: 8.0)
    padding: UIEdgeInsets?       // Inner padding (default: 16 on all sides)
)

Example — card-like wrapper with shadow feel:

let wrapper = CardWrapperStyle(
    backgroundColor: .systemBackground,
    borderColor: .systemGray4,
    borderWidth: 1,
    cornerRadius: 16,
    padding: UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
)

Input Field Styles

CardFieldSpecificStyles lets you style text fields for each state:

StateWhen Applied
baseDefault / idle state
focusField is actively being edited
completedField has valid, complete input
invalidValidation failed

Each state is a CardStyle (alias for Style) with these properties:

CardStyle(
    borderColor: UIColor?,         // Field border color
    cornerRadius: CGFloat?,        // Field corner radius (default: 2)
    padding: UIEdgeInsets?,        // Inner text padding (default: 10 on all sides)
    borderWidth: CGFloat?,         // Border width (default: 1)
    font: UIFont?,                 // Text font
    textAlignment: NSTextAlignment?, // Text alignment (default: .left)
    textColor: UIColor?,           // Text color (default: .label)
    backgroundColor: UIColor?,     // Field background color
    cursorColor: UIColor?,         // Cursor / tint color
    placeholderColor: UIColor?,    // Placeholder text color
    width: CGFloat?,               // Explicit width (overrides fieldInsets)
    height: CGFloat?,              // Explicit height
    minWidth: CGFloat?,            // Minimum width constraint
    maxWidth: CGFloat?,            // Maximum width constraint
    minHeight: CGFloat?,           // Minimum height constraint
    maxHeight: CGFloat?,           // Maximum height constraint
    cardIconAlignment: CardIconAlignment?,  // Card brand icon position (.left / .right)
    fieldInsets: UIEdgeInsets?     // Field-to-container spacing (default: 0,6,0,6)
)

Example — modern rounded fields:

let fieldStyles = CardFieldSpecificStyles(
    base: CardStyle(
        borderColor: .systemGray4,
        cornerRadius: 10,
        padding: UIEdgeInsets(top: 12, left: 14, bottom: 12, right: 14),
        borderWidth: 1.5,
        font: .systemFont(ofSize: 16),
        textColor: .label,
        backgroundColor: .secondarySystemBackground,
        placeholderColor: .tertiaryLabel
    ),
    focus: CardStyle(
        borderColor: UIColor(red: 0.2, green: 0.5, blue: 1.0, alpha: 1.0),
        backgroundColor: .systemBackground
    ),
    completed: CardStyle(
        borderColor: .systemGreen
    ),
    invalid: CardStyle(
        borderColor: .systemRed,
        backgroundColor: UIColor.systemRed.withAlphaComponent(0.05)
    )
)

Tip: You only need to set properties that differ from the base state. For example, if the focus state should only change the border color, just set borderColor in focus.

Per-Field Overrides

Need a specific field to look different? Use inputFieldStyles to target individual fields by type:

let styles = CardFormStylesConfig(
    // Applies to ALL fields:
    allInputFieldStyles: CardFieldSpecificStyles(
        base: CardStyle(cornerRadius: 8, borderWidth: 1)
    ),

    // Override just the card number field:
    inputFieldStyles: [
        .CARD_NUMBER: CardFieldSpecificStyles(
            base: CardStyle(
                font: .monospacedDigitSystemFont(ofSize: 18, weight: .medium),
                height: 52
            )
        ),
        .CVV: CardFieldSpecificStyles(
            base: CardStyle(
                maxWidth: 100
            )
        )
    ]
)

Available field types:

CardFieldTypeDescription
.CARDHOLDER_NAMECardholder name field
.CARD_NUMBERCard number field
.EXPIRATION_DATECombined expiry field (MM/YY)
.EXPIRATION_MONTHExpiry month (separate)
.EXPIRATION_YEARExpiry year (separate)
.CVVSecurity code field

Per-field styles are merged over allInputFieldStyles, so you only need to specify the differences.

Label Styles

Customize the label above each field:

let styles = CardFormStylesConfig(
    labelStyles: [
        .CARD_NUMBER: CardStyle(
            font: .systemFont(ofSize: 13, weight: .semibold),
            textColor: .secondaryLabel
        ),
        .CVV: CardStyle(
            font: .systemFont(ofSize: 13, weight: .semibold),
            textColor: .secondaryLabel
        ),
        .EXPIRATION_MONTH: CardStyle(
            font: .systemFont(ofSize: 13, weight: .semibold),
            textColor: .secondaryLabel
        ),
        .EXPIRATION_YEAR: CardStyle(
            font: .systemFont(ofSize: 13, weight: .semibold),
            textColor: .secondaryLabel
        ),
        .CARDHOLDER_NAME: CardStyle(
            font: .systemFont(ofSize: 13, weight: .semibold),
            textColor: .secondaryLabel
        )
    ]
)

Error Text Style

Control how validation error messages look below fields:

let styles = CardFormStylesConfig(
    errorTextStyle: CardStyle(
        font: .systemFont(ofSize: 12),
        textColor: .systemRed
    )
)

Spacing

Fine-tune the spacing between fields and sections:

let styles = CardFormStylesConfig(
    fieldSpacing: 12,    // Vertical gap between fields (default: 10)
    sectionSpacing: 20   // Gap between row groups (default: 16)
)

Field Insets

fieldInsets controls the spacing between a field and its container edge — independent of padding, which controls text inset inside the field.

┌─────────────── container ───────────────┐
│                                          │
│  fieldInsets.left  ┌──────────┐  fieldInsets.right
│  ◄────────────────►│  Field   │◄────────────────►│
│                    │ padding  │                   │
│                    │ ◄──────► │                   │
│                    │  (text)  │                   │
│                    └──────────┘                   │
└──────────────────────────────────────────────────┘

Use the convenience method .fieldInsets(top:left:bottom:right:) — defaults are (0, 6, 0, 6):

let styles = CardFormStylesConfig(
    allInputFieldStyles: CardFieldSpecificStyles(
        base: CardStyle(
            padding: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10),  // text inset
            fieldInsets: .fieldInsets(left: 24, right: 24)                      // container spacing
        )
    )
)

Only specify the sides you want to change:

.fieldInsets(top: 8)                  // only change top
.fieldInsets(left: 24, right: 24)     // only change horizontal
.zero                                  // edge-to-edge

Per-field overrides work via inputFieldStyles:

inputFieldStyles: [
    .CARD_NUMBER: CardFieldSpecificStyles(
        base: CardStyle(fieldInsets: .fieldInsets(left: 32, right: 32))
    )
]

Note: When an explicit width is set, fieldInsets is ignored — the field uses a fixed-width constraint instead.

Field Variants

Choose between two visual styles for input fields:

VariantDescription
.outlined(Default) — bordered rectangle with transparent background
.filledFilled background with no border
let config = CardFormConfig(
    fieldVariant: .filled
)

You can further customize each variant using CardFieldSpecificStyles as described above.

Card Icon Alignment

Display the detected card brand icon (Visa, Mastercard, etc.) inside the card number field:

let config = CardFormConfig(
    showCardIcon: true,
    cardIconAlignment: .right  // .left (default) or .right
)

Layout Presets

Control the arrangement of fields using built-in presets or a custom layout:

Built-in Presets

// Standard (default):
// Row 1: [Card Number]
// Row 2: [CVV] [Expiry Month] [Expiry Year]
let config = CardFormConfig(layout: .standard)

// Compact:
// Row 1: [Card Number]
// Row 2: [Expiry Month] [Expiry Year] [CVV]
let config = CardFormConfig(layout: .compact)

// Minimal (no name field, compact layout):
// Row 1: [Card Number]
// Row 2: [Expiry Month] [Expiry Year] [CVV]
let config = CardFormConfig(layout: .minimal)

Combined Expiry Date Field

Replace separate month/year fields with a single MM/YY field:

let config = CardFormConfig(
    layout: .preset(.standard, useCombinedExpiryDateField: true)
)
// Row 1: [Card Number]
// Row 2: [CVV] [MM/YY]

Custom Layout

Define exactly which fields appear on each row:

let config = CardFormConfig(
    showNameField: true,
    layout: .custom(
        [
            [.CARDHOLDER_NAME],           // Row 1
            [.CARD_NUMBER],               // Row 2
            [.EXPIRATION_DATE, .CVV]      // Row 3
        ],
        useCombinedExpiryDateField: true
    )
)

Note: Custom layouts must include .CARD_NUMBER, .CVV, and expiry fields (either .EXPIRATION_DATE or both .EXPIRATION_MONTH / .EXPIRATION_YEAR). If the layout is invalid, the SDK falls back to the standard preset.

Card Payment Button Styling

Created via session.createCardPaymentButton(buttonStyle:translations:).

Properties

CardButtonStyle(
    backgroundColor: UIColor?,      // Button background (default: .systemBlue)
    textColor: UIColor?,            // Title text color (default: .white)
    font: UIFont?,                  // Title font (default: system)
    cornerRadius: CGFloat?,         // Corner radius (default: 8)
    borderWidth: CGFloat?,          // Border width (default: none)
    borderColor: UIColor?,          // Border color (default: none)
    contentEdgeInsets: UIEdgeInsets?, // Padding inside button
    height: CGFloat?                // Button height (default: 44)
)

Examples

// Pill-shaped dark button
let payButton = session.createCardPaymentButton(
    buttonStyle: CardButtonStyle(
        backgroundColor: .black,
        textColor: .white,
        font: .systemFont(ofSize: 18, weight: .bold),
        cornerRadius: 22,
        height: 48
    )
)

// Outlined / ghost button
let payButton = session.createCardPaymentButton(
    buttonStyle: CardButtonStyle(
        backgroundColor: .clear,
        textColor: .systemBlue,
        font: .systemFont(ofSize: 16, weight: .semibold),
        cornerRadius: 8,
        borderWidth: 2,
        borderColor: .systemBlue,
        height: 44
    )
)

The button automatically shows a loading spinner during payment processing — no extra code needed.

Generic Redirect Button Styling

For redirect-based payment methods (iDEAL, Sofort, Klarna, etc.). Uses the same CardButtonStyle:

let idealButton = session.createGenericRedirectButton(
    buttonStyle: CardButtonStyle(
        backgroundColor: UIColor(red: 0.8, green: 0, blue: 0.4, alpha: 1),
        textColor: .white,
        cornerRadius: 10,
        height: 48
    ),
    paymentMethodCode: "ideal"
)

Stored Instruments Styling

When returning customers have saved cards or PayPal accounts, the StoredInstruments view displays them as a selectable list.

List Style

StoredInstrumentsStyle(
    backgroundColor: UIColor,           // List background (default: .clear)
    itemBackgroundColor: UIColor,       // Unselected item background (default: .systemBackground)
    selectedItemBackgroundColor: UIColor, // Selected item background (default: .systemGray6)
    labelTextColor: UIColor,            // Instrument label color (default: .label)
    labelFont: UIFont,                  // Instrument label font (default: system 16)
    itemCornerRadius: CGFloat,          // Item corner radius (default: 8)
    itemSpacing: CGFloat,               // Gap between items (default: 8)
    itemPadding: UIEdgeInsets,          // Padding inside each item (default: 12/16/12/16)
    buttonStyle: StoredInstrumentButtonStyle,  // Pay button
    deleteButtonStyle: DeleteButtonStyle,      // Delete icon/button
    updateButtonStyle: UpdateButtonStyle       // Update icon/button
)

Pay Button Style

StoredInstrumentButtonStyle(
    backgroundColor: UIColor,       // Default: .systemBlue
    textColor: UIColor,             // Default: .white
    font: UIFont,                   // Default: system 16 medium
    cornerRadius: CGFloat,          // Default: 8
    height: CGFloat,                // Default: 44
    borderWidth: CGFloat,           // Default: 0
    borderColor: UIColor,           // Default: .clear
    contentEdgeInsets: UIEdgeInsets  // Default: 8/16/8/16
)

Delete Button Style

DeleteButtonStyle(
    backgroundColor: UIColor,   // Default: .systemRed
    textColor: UIColor,         // Default: .white
    font: UIFont,               // Default: system 14
    cornerRadius: CGFloat,      // Default: 4
    size: CGSize                // Default: 32×32
)

Update Button Style

UpdateButtonStyle(
    backgroundColor: UIColor,   // Default: .systemBlue
    textColor: UIColor,         // Default: .white
    font: UIFont,               // Default: system 14
    cornerRadius: CGFloat,      // Default: 4
    size: CGSize                // Default: 32×32
)

Full Example

let storedInstruments = session.createStoredInstruments(
    style: StoredInstrumentsStyle(
        backgroundColor: .clear,
        itemBackgroundColor: .secondarySystemBackground,
        selectedItemBackgroundColor: UIColor.systemBlue.withAlphaComponent(0.1),
        labelTextColor: .label,
        labelFont: .systemFont(ofSize: 15),
        itemCornerRadius: 12,
        itemSpacing: 10,
        itemPadding: UIEdgeInsets(top: 14, left: 18, bottom: 14, right: 18),
        buttonStyle: StoredInstrumentButtonStyle(
            backgroundColor: .black,
            textColor: .white,
            font: .systemFont(ofSize: 16, weight: .bold),
            cornerRadius: 22,
            height: 48
        ),
        deleteButtonStyle: DeleteButtonStyle(
            backgroundColor: UIColor.systemRed.withAlphaComponent(0.1),
            textColor: .systemRed,
            cornerRadius: 8,
            size: CGSize(width: 36, height: 36)
        ),
        updateButtonStyle: UpdateButtonStyle(
            backgroundColor: UIColor.systemBlue.withAlphaComponent(0.1),
            textColor: .systemBlue,
            cornerRadius: 8,
            size: CGSize(width: 36, height: 36)
        )
    )
)

Apple Pay Button Styling

Apple restricts customization of the Apple Pay button to its own set of styles and types:

let applePayButton = session.createApplePayButton(
    type: .buy,          // .plain, .buy, .setUp, .inStore, .donate, .checkout, .book, .subscribe
    style: .black        // .black, .white, .whiteOutline, .automatic
)

You cannot apply custom fonts, colors, or corner radii to the Apple Pay button — Apple enforces its Human Interface Guidelines.

Translations & Labels

Card Form Translations

Override placeholder text, labels, and error messages:

let translations = CardTranslations(
    placeholders: CardTranslations.Placeholders(values: [
        .CARD_NUMBER: "Card number",
        .CARDHOLDER_NAME: "Name on card",
        .CVV: "CVV",
        .EXPIRATION_DATE: "MM/YY",
        .EXPIRATION_MONTH: "MM",
        .EXPIRATION_YEAR: "YY"
    ]),
    labels: CardTranslations.Labels(
        values: [
            .CARD_NUMBER: "Card Number",
            .CARDHOLDER_NAME: "Cardholder Name",
            .CVV: "Security Code",
            .EXPIRATION_DATE: "Expiry Date",
            .EXPIRATION_MONTH: "Expiry Month",
            .EXPIRATION_YEAR: "Expiry Year"
        ],
        saveInstrument: "Save card for future payments",
        storeInstrument: "Store this card"
    ),
    error: CardTranslations.ErrorMessages(values: [
        .CARD_NUMBER: "Please enter a valid card number",
        .CARDHOLDER_NAME: "Cardholder name is required",
        .CVV: "Invalid security code",
        .EXPIRATION_DATE: "Invalid expiry date",
        .EXPIRATION_MONTH: "Invalid month",
        .EXPIRATION_YEAR: "Invalid year"
    ])
)

let config = CardFormConfig(
    translations: translations
)

Button Translations

// Card payment button
let payButton = session.createCardPaymentButton(
    translations: CardPaymenButtonTranslations(label: "Complete Purchase")
)

// Stored instrument pay button
let payButton = session.createCardPaymentButton(
    storedInstrument: instrument,
    translations: StoredInstrumentButtonTranslations(
        label: "Pay Now",
        processingLabel: "Processing..."
    )
)

Stored Instruments Translations

let storedInstruments = session.createStoredInstruments(
    translations: StoredInstrumentsTranslations(
        cardPrefix: "Card ending in",
        paypalPrefix: "PayPal",
        buttonTranslations: StoredInstrumentButtonTranslations(
            label: "Pay",
            processingLabel: "Processing..."
        )
    )
)

Using with SwiftUI

The SDK's UI components are built with UIKit. To embed them in SwiftUI, use UIViewRepresentable:

import SwiftUI
import Payrails

struct CardFormView: UIViewRepresentable {
    let session: PayrailsSession

    func makeUIView(context: Context) -> UIView {
        let config = CardFormConfig(
            showNameField: true,
            showCardIcon: true,
            styles: CardFormStylesConfig(
                wrapperStyle: CardWrapperStyle(cornerRadius: 16),
                allInputFieldStyles: CardFieldSpecificStyles(
                    base: CardStyle(
                        cornerRadius: 10,
                        font: .systemFont(ofSize: 16),
                        textColor: .label
                    ),
                    focus: CardStyle(borderColor: .systemBlue)
                )
            )
        )
        return session.createCardForm(config: config)
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}

struct PayButtonView: UIViewRepresentable {
    let session: PayrailsSession

    func makeUIView(context: Context) -> UIView {
        return session.createCardPaymentButton(
            buttonStyle: CardButtonStyle(
                backgroundColor: .black,
                cornerRadius: 12,
                height: 50
            )
        )
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}

// Usage in a SwiftUI view:
struct CheckoutView: View {
    let session: PayrailsSession

    var body: some View {
        VStack(spacing: 20) {
            CardFormView(session: session)
                .frame(height: 300)

            PayButtonView(session: session)
                .frame(height: 50)
        }
        .padding()
    }
}

Full Example — Themed Checkout

Here's a complete example that demonstrates a dark-themed, brand-customized checkout:

import UIKit
import Payrails

class CheckoutViewController: UIViewController {

    var session: PayrailsSession!

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor(red: 0.05, green: 0.05, blue: 0.1, alpha: 1)
        setupUI()
    }

    private func setupUI() {
        let brandBlue = UIColor(red: 0.2, green: 0.5, blue: 1.0, alpha: 1.0)

        // 1. Card Form
        let cardForm = session.createCardForm(config: CardFormConfig(
            showNameField: true,
            showCardIcon: true,
            cardIconAlignment: .right,
            fieldVariant: .outlined,
            layout: .preset(.standard, useCombinedExpiryDateField: true),
            styles: CardFormStylesConfig(
                wrapperStyle: CardWrapperStyle(
                    backgroundColor: UIColor(white: 0.12, alpha: 1),
                    borderColor: UIColor(white: 0.25, alpha: 1),
                    borderWidth: 1,
                    cornerRadius: 16,
                    padding: UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
                ),
                errorTextStyle: CardStyle(
                    font: .systemFont(ofSize: 12),
                    textColor: .systemPink
                ),
                allInputFieldStyles: CardFieldSpecificStyles(
                    base: CardStyle(
                        borderColor: UIColor(white: 0.3, alpha: 1),
                        cornerRadius: 10,
                        padding: UIEdgeInsets(top: 14, left: 14, bottom: 14, right: 14),
                        borderWidth: 1,
                        font: .monospacedDigitSystemFont(ofSize: 16, weight: .regular),
                        textColor: .white,
                        backgroundColor: UIColor(white: 0.15, alpha: 1),
                        cursorColor: brandBlue,
                        placeholderColor: UIColor(white: 0.5, alpha: 1)
                    ),
                    focus: CardStyle(
                        borderColor: brandBlue,
                        backgroundColor: UIColor(white: 0.18, alpha: 1)
                    ),
                    completed: CardStyle(
                        borderColor: .systemGreen
                    ),
                    invalid: CardStyle(
                        borderColor: .systemPink,
                        backgroundColor: UIColor.systemPink.withAlphaComponent(0.08)
                    )
                ),
                fieldSpacing: 12,
                sectionSpacing: 20
            ),
            translations: CardTranslations(
                placeholders: CardTranslations.Placeholders(values: [
                    .CARD_NUMBER: "1234 5678 9012 3456",
                    .CARDHOLDER_NAME: "John Doe",
                    .CVV: "123",
                    .EXPIRATION_DATE: "MM/YY"
                ]),
                labels: CardTranslations.Labels(values: [
                    .CARD_NUMBER: "CARD NUMBER",
                    .CARDHOLDER_NAME: "NAME ON CARD",
                    .CVV: "CVV",
                    .EXPIRATION_DATE: "EXPIRY"
                ])
            )
        ))

        // 2. Pay Button
        let payButton = session.createCardPaymentButton(
            buttonStyle: CardButtonStyle(
                backgroundColor: brandBlue,
                textColor: .white,
                font: .systemFont(ofSize: 18, weight: .bold),
                cornerRadius: 14,
                height: 52
            ),
            translations: CardPaymenButtonTranslations(label: "Pay $49.99")
        )

        // 3. Layout
        let stack = UIStackView(arrangedSubviews: [cardForm, payButton])
        stack.axis = .vertical
        stack.spacing = 24
        stack.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(stack)
        NSLayoutConstraint.activate([
            stack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24),
            stack.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            stack.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
}

Style Properties Reference

CardStyle (alias: Style)

PropertyTypeDefault
borderColorUIColor?nil
cornerRadiusCGFloat?2
paddingUIEdgeInsets?(10, 10, 10, 10)
borderWidthCGFloat?1
fontUIFont?System default
textAlignmentNSTextAlignment?.left
textColorUIColor?.label
backgroundColorUIColor?nil
cursorColorUIColor?nil
placeholderColorUIColor?nil
widthCGFloat?nil
heightCGFloat?nil
minWidthCGFloat?nil
maxWidthCGFloat?nil
minHeightCGFloat?nil
maxHeightCGFloat?nil
cardIconAlignmentCardIconAlignment?.left
fieldInsetsUIEdgeInsets?nil (defaults to (0, 6, 0, 6))

CardFieldSpecificStyles

PropertyTypeDescription
baseCardStyle?Default / idle state
focusCardStyle?Active editing state
completedCardStyle?Valid input state
invalidCardStyle?Validation error state

CardButtonStyle

PropertyTypeDefault
backgroundColorUIColor?.systemBlue
textColorUIColor?.white
fontUIFont?System default
cornerRadiusCGFloat?8
borderWidthCGFloat?nil
borderColorUIColor?nil
contentEdgeInsetsUIEdgeInsets?nil
heightCGFloat?44

CardWrapperStyle

PropertyTypeDefault
backgroundColorUIColor?nil
borderColorUIColor?.separator
borderWidthCGFloat?1
cornerRadiusCGFloat?8
paddingUIEdgeInsets?(16, 16, 16, 16)

CardFormStylesConfig

PropertyTypeDefault
wrapperStyleCardWrapperStyle?.defaultStyle
errorTextStyleCardStyle?textColor: .systemRed
allInputFieldStylesCardFieldSpecificStyles?.defaultStyle
inputFieldStyles[CardFieldType: CardFieldSpecificStyles]?nil
labelStyles[CardFieldType: CardStyle]?textColor: .secondaryLabel
fieldSpacingCGFloat?10
sectionSpacingCGFloat?16

StoredInstrumentsStyle

PropertyTypeDefault
backgroundColorUIColor.clear
itemBackgroundColorUIColor.systemBackground
selectedItemBackgroundColorUIColor.systemGray6
labelTextColorUIColor.label
labelFontUIFont.systemFont(ofSize: 16)
itemCornerRadiusCGFloat8
itemSpacingCGFloat8
itemPaddingUIEdgeInsets(12, 16, 12, 16)
buttonStyleStoredInstrumentButtonStyle.defaultStyle
deleteButtonStyleDeleteButtonStyle.defaultStyle
updateButtonStyleUpdateButtonStyle.defaultStyle

StoredInstrumentButtonStyle

PropertyTypeDefault
backgroundColorUIColor.systemBlue
textColorUIColor.white
fontUIFont.systemFont(ofSize: 16, weight: .medium)
cornerRadiusCGFloat8
heightCGFloat44
borderWidthCGFloat0
borderColorUIColor.clear
contentEdgeInsetsUIEdgeInsets(8, 16, 8, 16)

DeleteButtonStyle

PropertyTypeDefault
backgroundColorUIColor.systemRed
textColorUIColor.white
fontUIFont.systemFont(ofSize: 14)
cornerRadiusCGFloat4
sizeCGSize(32, 32)

UpdateButtonStyle

PropertyTypeDefault
backgroundColorUIColor.systemBlue
textColorUIColor.white
fontUIFont.systemFont(ofSize: 14)
cornerRadiusCGFloat4
sizeCGSize(32, 32)

Need help? Check the SDK API Reference or the Troubleshooting Guide for common issues.

Updated 5 days ago

What’s Next