Component styling

Library components are styled via style structs (FieldStyle, PayButtonStyle, PaymentStatusStyle, LoadingStyle, ApplePayButtonStyle). Each component takes its style struct via the style: parameter in its initializer.

Secure Fields (input fields)

Secure Fields styling is done with the FieldStyle struct. The same struct is used for SecurePanField, SecureExpiryField, SecureCvvField, and SecureFullNameField.

FieldStyle properties

Property	Type	Default	Description
borderColor	Color	#E5E5E5	Border color in the normal state.
focusedBorderColor	Color	#E5E5E5	Border color when focused.
errorBorderColor	Color	#B00020	Border color in the error state.
textColor	Color	#111111	Text color.
hintColor	Color	#BDBDBD	Placeholder text color.
backgroundColor	Color	.white	Field background color.
cornerRadius	CGFloat	12	Corner radius in points.
verticalPadding	CGFloat	14	Vertical padding.
horizontalPadding	CGFloat	14	Horizontal padding.
font	Font	.system(size: 17, weight: .regular)	Text font.

A FieldStyle.default preset with all default values is available.

Example

let style = FieldStyle(
    borderColor: Color(red: 0.90, green: 0.90, blue: 0.94),
    focusedBorderColor: Color(red: 0.10, green: 0.47, blue: 0.91),
    errorBorderColor: Color(red: 0.78, green: 0.16, blue: 0.16),
    textColor: .black,
    hintColor: .gray,
    backgroundColor: Color(red: 0.98, green: 0.98, blue: 0.98),
    cornerRadius: 14,
    verticalPadding: 14,
    horizontalPadding: 16,
    font: .system(size: 17, weight: .medium)
)

VStack(spacing: 12) {
    SecurePanField(state: panState, style: style)
    SecureExpiryField(state: expiryState, style: style)
    SecureCvvField(state: cvvState, style: style)
    SecureFullNameField(state: nameState, style: style)
}

Styling multiple fields at once

Create a single shared FieldStyle instance and pass it to all fields:

private let sharedFieldStyle = FieldStyle(
    cornerRadius: 14,
    verticalPadding: 14,
    horizontalPadding: 16,
    font: .system(size: 17, weight: .medium)
)

SecurePanField(state: panState, style: sharedFieldStyle)
SecureExpiryField(state: expiryState, style: sharedFieldStyle)
SecureCvvField(state: cvvState, style: sharedFieldStyle)

Information

Border states (borderColor, focusedBorderColor, errorBorderColor) switch automatically based on the field's state. Priority: error > focus > normal.

SecurePayButton (payment button)

SecurePayButton styling is done with the PayButtonStyle struct.

PayButtonStyle properties

Property	Type	Default	Description
backgroundColor	Color	green (#4CAF50)	Background color in the active state.
disabledBackgroundColor	Color	light gray (#F5F5F5)	Background color in the disabled state.
textColor	Color	.white	Text color in the active state.
disabledTextColor	Color	#BDBDBD	Text color in the disabled state.
cornerRadius	CGFloat	12	Corner radius in points.
font	Font	.system(size: 16, weight: .bold)	Text font.
textFontName	String?	nil	Custom font name. When set, overrides font.
disableShimmer	Bool	false	Disables the shimmer animation during processing.
shimmerBaseColor	Color	Color.gray.opacity(0.25)	Base color of the shimmer band.
shimmerHighlightColor	Color	Color.white.opacity(0.55)	Highlight color of the shimmer band.
processingText	String?	nil	Custom text shown during processing. When nil, Translation.payButtonProcessingText is used.
buttonText	String?	nil	Custom button text. When nil, Translation.payButtonText is used.
borderColor	Color	.clear	Border color.
borderWidth	CGFloat	0	Border width in points.
paddingHorizontal	CGFloat	16	Horizontal padding.
paddingVertical	CGFloat	12	Vertical padding.

A PayButtonStyle.default preset with all default values is available.

Example

SecurePayButton(
    session: session,
    collector: collector,
    paymentParams: { /* ... */ },
    onResult: { _ in },
    style: PayButtonStyle(
        backgroundColor: Color(red: 0.12, green: 0.53, blue: 0.90),
        textColor: .white,
        cornerRadius: 14,
        font: .system(size: 16, weight: .semibold),
        disableShimmer: false,
        processingText: "Processing…",
        borderColor: Color(red: 0.08, green: 0.40, blue: 0.78),
        borderWidth: 1,
        buttonText: "Pay"
    )
)

Automatic disabled state

SecurePayButton automatically becomes disabled when:

• the session is not initialized (session.state != .ready),
• the card data is not valid (collector.isValid == false),
• a payment is currently being processed.

In the disabled state, disabledBackgroundColor and disabledTextColor are used.

Animation during payment processing

After tapping the button, a shimmer animation appears over its content — a translucent band that sweeps from left to right. The animation can be disabled:

let style = PayButtonStyle(disableShimmer: true)

SecurePaymentStatusView (status banner)

SecurePaymentStatusView styling is done with the PaymentStatusStyle struct.

PaymentStatusStyle properties

Property	Type	Default	Description
textColor	Color?	automatic per state	Text color. When nil, the default color for the given state is used (green/orange/red).
backgroundColor	Color?	automatic per state	Background color. When nil, the default color for the given state is used.
borderColor	Color?	automatic per state	Border color. When nil, the default color for the given state is used.
borderWidth	CGFloat	1	Border width.
cornerRadius	CGFloat	8	Corner radius.
paddingHorizontal	CGFloat	16	Horizontal padding.
paddingVertical	CGFloat	10	Vertical padding.
textFontName	String?	nil	Custom font name.
textSize	CGFloat	14	Text size in points.

A PaymentStatusStyle.default preset is available.

Example

@StateObject private var statusState = PaymentStatusState()

var body: some View {
    VStack {
        SecurePaymentStatusView(
            state: statusState,
            style: PaymentStatusStyle(
                cornerRadius: 12,
                paddingHorizontal: 20,
                paddingVertical: 14,
                textSize: 15
            )
        )
    }
}

Tip

The component is hidden by default (PaymentStatusState.visible == false). It appears after calling statusState.show(result: paymentResult). It hides after calling statusState.hide() or statusState.clear(). For more details on showing payment statuses, see Payment results.

ApplePayButtonStyle

SecureApplePayButton styling is described in Apple Pay — Button appearance.

LoadingStyle

Styling of the loading indicator (SecureLoadingView and .secureLoadingOverlay) is described in Loading indicator — LoadingStyle.