Štylizácia komponentov

Komponenty knižnice možno štylizovať prostredníctvom štýlových štruktúr (FieldStyle, PayButtonStyle, PaymentStatusStyle, LoadingStyle, ApplePayButtonStyle). Každý komponent prijíma svoju štýlovú štruktúru ako parameter style: v inicializátore.

Secure Fields (vstupné polia)

Štylizácia Secure Fields prebieha štruktúrou FieldStyle. Rovnaká štruktúra platí pre SecurePanField, SecureExpiryField, SecureCvvField aj SecureFullNameField.

Vlastnosti FieldStyle

Vlastnosť	Typ	Predvolene	Popis
borderColor	Color	#E5E5E5	Farba ohraničenia v normálnom stave.
focusedBorderColor	Color	#E5E5E5	Farba ohraničenia pri zameraní (focus).
errorBorderColor	Color	#B00020	Farba ohraničenia v chybovom stave.
textColor	Color	#111111	Farba textu.
hintColor	Color	#BDBDBD	Farba placeholder textu.
backgroundColor	Color	.white	Farba pozadia poľa.
cornerRadius	CGFloat	12	Zaoblenie rohov v bodoch.
verticalPadding	CGFloat	14	Vertikálne vnútorné odsadenie.
horizontalPadding	CGFloat	14	Horizontálne vnútorné odsadenie.
font	Font	.system(size: 17, weight: .regular)	Písmo textu.

K dispozícii je preset FieldStyle.default so všetkými predvolenými hodnotami.

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

Štylizácia viacerých polí naraz

Vytvorte si jednu zdieľanú inštanciu FieldStyle a odovzdajte ju všetkým poliam:

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)

Informácie

Stavy ohraničenia (borderColor, focusedBorderColor, errorBorderColor) sa prepínajú automaticky podľa stavu poľa. Priorita: chyba > focus > normálny.

SecurePayButton (platobné tlačidlo)

Štylizácia SecurePayButton prebieha štruktúrou PayButtonStyle.

Vlastnosti PayButtonStyle

Vlastnosť	Typ	Predvolene	Popis
backgroundColor	Color	zelená (#4CAF50)	Farba pozadia v aktívnom stave.
disabledBackgroundColor	Color	svetlosivá (#F5F5F5)	Farba pozadia v deaktivovanom stave.
textColor	Color	.white	Farba textu v aktívnom stave.
disabledTextColor	Color	#BDBDBD	Farba textu v deaktivovanom stave.
cornerRadius	CGFloat	12	Zaoblenie rohov v bodoch.
font	Font	.system(size: 16, weight: .bold)	Písmo textu.
textFontName	String?	nil	Názov vlastného fontu. Ak je vyplnený, prepisuje font.
disableShimmer	Bool	false	Vypne shimmer animáciu počas spracovania.
shimmerBaseColor	Color	Color.gray.opacity(0.25)	Základná farba shimmer pruhu.
shimmerHighlightColor	Color	Color.white.opacity(0.55)	Highlight farba shimmer pruhu.
processingText	String?	nil	Vlastný text počas spracovania. Ak nil, použije sa Translation.payButtonProcessingText.
buttonText	String?	nil	Vlastný text tlačidla. Ak nil, použije sa Translation.payButtonText.
borderColor	Color	.clear	Farba ohraničenia.
borderWidth	CGFloat	0	Šírka ohraničenia v bodoch.
paddingHorizontal	CGFloat	16	Horizontálne vnútorné odsadenie.
paddingVertical	CGFloat	12	Vertikálne vnútorné odsadenie.

K dispozícii je preset PayButtonStyle.default so všetkými predvolenými hodnotami.

Prí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: "Spracovávam…",
        borderColor: Color(red: 0.08, green: 0.40, blue: 0.78),
        borderWidth: 1,
        buttonText: "Zaplatiť"
    )
)

Automatický deaktivovaný stav

SecurePayButton sa automaticky deaktivuje, keď:

• session nie je inicializovaná (session.state != .ready),
• údaje karty nie sú platné (collector.isValid == false),
• práve prebieha spracovanie platby.

V deaktivovanom stave sa použije disabledBackgroundColor a disabledTextColor.

Animácia počas spracovania platby

Po stlačení tlačidla sa nad jeho obsahom zobrazí shimmer animácia — polopriehľadný trblietavý pruh, ktorý prechádza zľava doprava. Animáciu možno vypnúť:

let style = PayButtonStyle(disableShimmer: true)

SecurePaymentStatusView (stavový banner)

Štylizácia SecurePaymentStatusView prebieha štruktúrou PaymentStatusStyle.

Vlastnosti PaymentStatusStyle

Vlastnosť	Typ	Predvolene	Popis
textColor	Color?	automatická podľa stavu	Farba textu. Ak nil, použije sa predvolená pre daný stav (zelená/oranžová/červená).
backgroundColor	Color?	automatická podľa stavu	Farba pozadia. Ak nil, použije sa predvolená pre daný stav.
borderColor	Color?	automatická podľa stavu	Farba ohraničenia. Ak nil, použije sa predvolená pre daný stav.
borderWidth	CGFloat	1	Šírka ohraničenia.
cornerRadius	CGFloat	8	Zaoblenie rohov.
paddingHorizontal	CGFloat	16	Horizontálne vnútorné odsadenie.
paddingVertical	CGFloat	10	Vertikálne vnútorné odsadenie.
textFontName	String?	nil	Názov vlastného fontu.
textSize	CGFloat	14	Veľkosť textu v bodoch.

K dispozícii je preset PaymentStatusStyle.default.

Prí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

Komponent je v predvolenom stave skrytý (PaymentStatusState.visible == false). Zobrazí sa po zavolaní statusState.show(result: paymentResult). Skryje sa po zavolaní statusState.hide() alebo statusState.clear(). Viac informácií o zobrazovaní stavov nájdete v sekcii Výsledky platby.

ApplePayButtonStyle

Štylizácia SecureApplePayButton je popísaná v sekcii Apple Pay — Vzhľad tlačidla.

LoadingStyle

Štylizácia indikátora načítavania (SecureLoadingView a .secureLoadingOverlay) je popísaná v sekcii Indikátor načítavania — LoadingStyle.