Stylizace komponent

Komponenty knihovny lze stylovat prostřednictvím stylových struktur (FieldStyle, PayButtonStyle, PaymentStatusStyle, LoadingStyle, ApplePayButtonStyle). Každá komponenta přijímá svoji stylovou strukturu jako parametr style: v inicializátoru.

Secure Fields (vstupní pole)

Stylování Secure Fields probíhá strukturou FieldStyle. Stejná struktura platí pro SecurePanField, SecureExpiryField, SecureCvvField i SecureFullNameField.

Vlastnosti FieldStyle

Vlastnost	Typ	Výchozí	Popis
borderColor	Color	#E5E5E5	Barva ohraničení v normálním stavu.
focusedBorderColor	Color	#E5E5E5	Barva ohraničení při zaměření (focus).
errorBorderColor	Color	#B00020	Barva ohraničení v chybovém stavu.
textColor	Color	#111111	Barva textu.
hintColor	Color	#BDBDBD	Barva placeholder textu.
backgroundColor	Color	.white	Barva pozadí pole.
cornerRadius	CGFloat	12	Zaoblení rohů v bodech.
verticalPadding	CGFloat	14	Vertikální vnitřní odsazení.
horizontalPadding	CGFloat	14	Horizontální vnitřní odsazení.
font	Font	.system(size: 17, weight: .regular)	Písmo textu.

K dispozici je preset FieldStyle.default se všemi výchozími hodnotami.

Příklad

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)
}

Stylování více polí najednou

Vytvořte si jednu sdílenou instanci FieldStyle a předejte ji všem polím:

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)

Informace

Stavy ohraničení (borderColor, focusedBorderColor, errorBorderColor) přepínají automaticky podle stavu pole. Priorita: chyba > focus > normální.

SecurePayButton (platební tlačítko)

Stylování SecurePayButton probíhá strukturou PayButtonStyle.

Vlastnosti PayButtonStyle

Vlastnost	Typ	Výchozí	Popis
backgroundColor	Color	zelená (#4CAF50)	Barva pozadí v aktivním stavu.
disabledBackgroundColor	Color	světle šedá (#F5F5F5)	Barva pozadí v deaktivovaném stavu.
textColor	Color	.white	Barva textu v aktivním stavu.
disabledTextColor	Color	#BDBDBD	Barva textu v deaktivovaném stavu.
cornerRadius	CGFloat	12	Zaoblení rohů v bodech.
font	Font	.system(size: 16, weight: .bold)	Písmo textu.
textFontName	String?	nil	Název vlastního fontu. Pokud je vyplněn, přepisuje font.
disableShimmer	Bool	false	Vypne shimmer animaci během zpracování.
shimmerBaseColor	Color	Color.gray.opacity(0.25)	Základní barva shimmer pruhu.
shimmerHighlightColor	Color	Color.white.opacity(0.55)	Highlight barva shimmer pruhu.
processingText	String?	nil	Vlastní text během zpracování. Pokud nil, použije se Translation.payButtonProcessingText.
buttonText	String?	nil	Vlastní text tlačítka. Pokud nil, použije se Translation.payButtonText.
borderColor	Color	.clear	Barva ohraničení.
borderWidth	CGFloat	0	Šířka ohraničení v bodech.
paddingHorizontal	CGFloat	16	Horizontální vnitřní odsazení.
paddingVertical	CGFloat	12	Vertikální vnitřní odsazení.

K dispozici je preset PayButtonStyle.default se všemi výchozími hodnotami.

Příklad

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: "Zpracovávám…",
        borderColor: Color(red: 0.08, green: 0.40, blue: 0.78),
        borderWidth: 1,
        buttonText: "Zaplatit"
    )
)

Automatický deaktivovaný stav

SecurePayButton se automaticky deaktivuje, když:

• session není inicializovaná (session.state != .ready),
• karetní data nejsou validní (collector.isValid == false),
• právě probíhá zpracování platby.

V deaktivovaném stavu se použije disabledBackgroundColor a disabledTextColor.

Animace během zpracování platby

Po stisku tlačítka se nad jeho obsahem zobrazí shimmer animace — poloprůhledný třpytivý pruh, který přejíždí zleva doprava. Animaci lze vypnout:

let style = PayButtonStyle(disableShimmer: true)

SecurePaymentStatusView (stavový banner)

Stylování SecurePaymentStatusView probíhá strukturou PaymentStatusStyle.

Vlastnosti PaymentStatusStyle

Vlastnost	Typ	Výchozí	Popis
textColor	Color?	automatická dle stavu	Barva textu. Pokud nil, použije se výchozí pro daný stav (zelená/oranžová/červená).
backgroundColor	Color?	automatická dle stavu	Barva pozadí. Pokud nil, použije se výchozí pro daný stav.
borderColor	Color?	automatická dle stavu	Barva ohraničení. Pokud nil, použije se výchozí pro daný stav.
borderWidth	CGFloat	1	Šířka ohraničení.
cornerRadius	CGFloat	8	Zaoblení rohů.
paddingHorizontal	CGFloat	16	Horizontální vnitřní odsazení.
paddingVertical	CGFloat	10	Vertikální vnitřní odsazení.
textFontName	String?	nil	Název vlastního fontu.
textSize	CGFloat	14	Velikost textu v bodech.

K dispozici je preset PaymentStatusStyle.default.

Příklad

@StateObject private var statusState = PaymentStatusState()

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

Tip

Komponenta je ve výchozím stavu skrytá (PaymentStatusState.visible == false). Zobrazí se po zavolání statusState.show(result: paymentResult). Skryje se po zavolání statusState.hide() nebo statusState.clear(). Více informací o zobrazování stavů naleznete v sekci Výsledky platby.

ApplePayButtonStyle

Stylování SecureApplePayButton je popsáno v sekci Apple Pay — Nastavení vzhledu tlačítka.

LoadingStyle

Stylování indikátoru načítání (SecureLoadingView a .secureLoadingOverlay) je popsáno v sekci Indikátor načítání — LoadingStyle.