Form Field Styling
This page provides guidelines on customizing the checkout experience for card payments in Android apps using the Paysafe SDK. You can style and theme form fields in two primary ways:
- Applying a global theme to all fields.
- Updating each field's appearance individually.
Global theming with PSTheme
The PSTheme in the Paysafe SDK allows for a consistent look and feel across all card payment fields (card number, holder name, CVV, expiry date) and expiry picker/dialog.
Structure of PSTheme
The fields that can be styled:
import UIKit
/// PSTheme used for styling Paysafe components
public struct PSTheme: Equatable {
/// Card component background color
public var backgroundColor: UIColor
/// Card component border color in default state
public var borderColor: UIColor
/// Card component border color in focused/selected state
public var focusedBorderColor: UIColor
/// Card component border corner radius
public var borderCornerRadius: CGFloat
/// Card component border and top & centered placeholder color for invalid/error state
public var errorColor: UIColor
/// Card component text input color
public var textInputColor: UIColor
/// Card component top & centered placeholder color
public var placeholderColor: UIColor
/// Card component hint/mask color
public var hintColor: UIColor
/// Card component text input font
public var textInputFont: UIFont
/// Card component top & centered placeholder font (top placeholder size decreases automatically)
public var placeholderFont: UIFont
/// Card component hint/mask font
public var hintFont: UIFont
/// - Parameters:
/// - backgroundColor: Card component background color
/// - borderColor: Card component border color in default state
/// - focusedBorderColor: Card component border color in focused/selected state
/// - borderCornerRadius: Card component border corner radius
/// - errorColor: Card component border and top placeholder color for invalid/error state
/// - textInputColor: Card component text input color
/// - placeholderColor: Card component top & centered placeholder color
/// - hintColor: Card component hint/mask color
/// - textInputFont: Card component text input font
/// - placeholderFont: Card component top & centered placeholder font
/// - hintFont: Card component hint/mask font
public init(
backgroundColor: UIColor? = nil,
borderColor: UIColor? = nil,
focusedBorderColor: UIColor? = nil,
borderCornerRadius: CGFloat? = nil,
errorColor: UIColor? = nil,
textInputColor: UIColor? = nil,
placeholderColor: UIColor? = nil,
hintColor: UIColor? = nil,
textInputFont: UIFont? = nil,
placeholderFont: UIFont? = nil,
hintFont: UIFont? = nil
)
}
Configure PSTheme
The PaysafeSDK allows theme configuration through the theme parameter. If this parameter is not added then the sdk will be initialised using the default theme.
This global theme will be used by all card components until overridden individually.
/// Setup Paysafe SDK.
func setupPaysafeSDK() {
let theme = PSTheme(
backgroundColor: .ltWhite,
borderColor: .ltLightPurple,
focusedBorderColor: .ltDarkPurple,
textInputColor: .ltDarkPurple,
placeholderColor: .ltDarkPurple,
hintColor: .ltPalePurple
)
PaysafeSDK.shared.setup(
apiKey: apiKey,
environment: .test,
theme: theme
) { result in
switch result {
case .success:
print("[Paysafe SDK] initialized successfully")
case let .failure(error):
print("[Paysafe SDK] initialize failure \(error.displayMessage)")
}
}
}
Individual field styling
Internally, each form field make use of the global theme by default by copying it locally. That means each field has it’s own public theme object that by default it’s the copy of the global one.
So, in order to update an individual field “look and feel”, the developers can access and update the theme properties or reconfigure a new individual theme directly on the field:
cardNumberView = PSCardNumberInputView()
cardNumberView.theme.backgroundColor = .red
// OR
cardNumberView = PSCardNumberInputView()
cardNumberView.theme = PSTheme(
backgroundColor: UIColor(red: 44/255, green: 30/255, blue: 70/255, alpha: 1.0),
borderColor: UIColor(red: 201/255, green: 201/255, blue: 201/255, alpha: 1.0),
focusedBorderColor: UIColor(red: 133/255, green: 81/255, blue: 161/255, alpha: 1.0),
textInputColor: UIColor(red: 214/255, green: 195/255, blue: 229/255, alpha: 1.0),
placeholderColor: UIColor(red: 111/255, green: 77/255, blue: 155/255, alpha: 1.0),
hintColor: UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
)
Dynamic style updates
- Change styles dynamically for different states (normal/valid, error).
- Customize aspects such as border color, corner radius, background color, font, font size, text color, and placeholder appearance.
Example using onInvalid event. More details about the events/callbacks available can be explored here: iOS - Additional functions&callbacks
cardNumberView = PSCardNumberInputView()
cardNumberView.onEvent = { [weak self] event in
switch event {
case .invalid:
cardNumberView?.theme.backgroundColor = .red
default:
break
}
Summary
By using PSTheme for a consistent global look and customizing individual fields when necessary, developers can create a tailored checkout experience in their Android apps. Remember to balance aesthetics with functionality and accessibility to ensure a smooth and inclusive user experience.