Štylizácia komponentov

Komponenty knižnice lze stylovat prostredníctvom update bloku v Jetpack Compose alebo pomocí XML atribútů v layoutu. Oba přístupy lze kombinovat.

SecureTextField (vstupné pole)

Atributy a metody se vztahují na všechny vstupné komponenty typu SecureTextField: SecurePanField, SecureExpiryField, SecureCvvField a SecureFullNameField.

Metódy štylizácie

Metoda	Parametr	Popis
setHint(hint)	String	Nastaví placeholder text.
setTextColor(color)	Int	Nastaví farbu textu.
setHintColor(color)	Int	Nastaví farbu placeholder textu.
setTextSize(sp)	Float	Nastaví velikost textu v sp.
setFontFamily(family)	String	Nastaví rodinu písma dle názvu.
setTypeface(typeface)	Typeface	Nastaví písmo pomocí instance Typeface.
setBackgroundColor(color)	Int	Nastaví farbu pozadí.
setBorderColor(color)	Int	Nastaví farbu orámovania v normálním stavu.
setFocusedBorderColor(color)	Int	Nastaví farbu orámovania pri zameraní.
setBorderWidth(widthPx)	Int	Nastaví šírku orámovania v pixeloch.
setBorderWidthDp(widthDp)	Float	Nastaví šírku orámovania v dp.
setCornerRadius(radiusPx)	Float	Nastaví zaoblenie rohů v pixeloch.
setCornerRadiusDp(radiusDp)	Float	Nastaví zaoblenie rohů v dp.
setErrorColor(color)	Int	Nastaví farbu chyby (text i orámovania).
setErrorTextSize(sp)	Float	Nastaví velikost chybového textu v sp.
setPadding(horizontalPx, verticalPx)	Int, Int	Nastaví vnútorné odsadenie v pixeloch.
setPaddingDp(horizontalDp, verticalDp)	Float, Float	Nastaví vnútorné odsadenie v dp.
showLabel	Boolean	Zobrazení labelu nad poľom (true/false). Predvolené true.
labelText	String?	Vlastní text labelu. Pri null se použije predvolené přeložený label.
setLabelColor(color)	Int	Nastaví farbu labelu.
setLabelTextSize(sp)	Float	Nastaví velikost labelu v sp.

Informácie

Pre väčšinu prípadov odporúčame používať *Dp varianty setterů (setBorderWidthDp, setCornerRadiusDp, setPaddingDp). Vstupy jsou v dp a knižnica převod na pixely zajistí interně. Parametry těchto metod jsou v API anotované @Dimension(unit = Dimension.DP), takže je zřejmé, jakou jednotku očekávají.

field.setBorderWidthDp(2f)
field.setCornerRadiusDp(12f)

Príklad v Compose (update blok)

SecurePanField(
    state = panState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        setBackgroundColor(Color.parseColor("#FAFAFA"))
        setBorderColor(Color.parseColor("#1976D2"))
        setFocusedBorderColor(Color.parseColor("#0D47A1"))
        setBorderWidthDp(2f)
        setCornerRadiusDp(12f)
        setTextColor(Color.parseColor("#212121"))
        setHintColor(Color.parseColor("#9E9E9E"))
        setTextSize(16f)
        setErrorColor(Color.parseColor("#C62828"))
        setPaddingDp(horizontalDp = 14f, verticalDp = 10f)
        setFontFamily("sans-serif-medium")
        showLabel = true
        labelText = null // null = použije se predvolené překlad dle session.translation
        setLabelColor(Color.parseColor("#616161"))
        setLabelTextSize(12f)
    }
)

Ak chcete label skryť:

update = {
    showLabel = false
}

XML atribúty

XML atribút	Formát	Popis
app:secureFieldHint	string	Placeholder text zobrazený v prázdném poli.
app:secureFieldTextColor	color	Farba textu.
app:secureFieldHintColor	color	Farba placeholder textu.
app:secureFieldTextSize	dimension	Velikost textu (napr. 18sp).
app:secureFieldFontFamily	string	Rodina písma (napr. "monospace", "sans-serif-medium").
app:secureFieldBackgroundColor	color	Farba pozadí pole.
app:secureFieldBorderColor	color	Farba orámovania v normálním stavu.
app:secureFieldBorderWidth	dimension	Šírka orámovania (napr. 2dp).
app:secureFieldCornerRadius	dimension	Zaoblení rohů (napr. 12dp).
app:secureFieldFocusedBorderColor	color	Farba orámovania pri zameraní (focus).
app:secureFieldErrorColor	color	Farba chybového textu a orámovania v chybovom stave.
app:secureFieldErrorTextSize	dimension	Velikost chybového textu.
app:secureFieldPaddingHorizontal	dimension	Horizontální vnútorné odsadenie.
app:secureFieldPaddingVertical	dimension	Vertikální vnútorné odsadenie.
app:secureFieldLabel	string	Vlastní text labelu nad poľom. Ak není uveden, použije se predvolené přeložený label.
app:secureFieldShowLabel	boolean	Zobrazení labelu (true/false). Predvolené true.
app:secureFieldLabelColor	color	Farba labelu.
app:secureFieldLabelTextSize	dimension	Velikost labelu (napr. 12sp).

Stavy orámovania

Ohraničení pole se automaticky mění podle aktuálního stavu:

Stav	Farba orámovania	Priorita
Chyba	errorColor	Nejvyšší
Zaostrené (focus)	focusedBorderColor	Střední
Normálny	borderColor	Nejnižší

Štylizácia viacerých polí naraz

Pomocí rozšiřující funkce lze aplikovat stejný styl na všechna pole přes update blok:

fun SecureTextField.applyCommonStyle() {
    setBackgroundColor(Color.parseColor("#FAFAFA"))
    setBorderColor(Color.parseColor("#1976D2"))
    setFocusedBorderColor(Color.parseColor("#0D47A1"))
    setBorderWidthDp(2f)
    setCornerRadiusDp(12f)
    setTextColor(Color.parseColor("#212121"))
    setTextSize(16f)
}

SecurePanField(
    state = panState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        applyCommonStyle()
        setFontFamily("sans-serif-medium")  // specifické pro PAN pole
    }
)
SecureExpiryField(
    state = expiryState,
    modifier = Modifier.fillMaxWidth(),
    update = { applyCommonStyle() }
)
SecureCvvField(
    state = cvvState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        applyCommonStyle()
        setTypeface(Typeface.MONOSPACE)  // specifické pro CVV pole
    }
)
SecureFullNameField(
    state = fullNameState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        applyCommonStyle()
        setHint("Jméno a příjmení") // specifické pro jméno plátce
    }
)

Použitie android:background

U SecureField lze v XML použít také standardní atribút android:background:

<cz.comgate.sdk.SecurePanField
    android:background="#E8F5E9"
    ... />

Pro čitelnější konfiguraci doporučujeme preferovat atribút app:secureFieldBackgroundColor, který je určen priamo pro stylování pozadí pole.

SecurePayButton (platební tlačidlo)

Metódy štylizácie

Metoda	Parametr	Popis
setText(text)	String	Nastaví text tlačidla.
setButtonTextColor(color)	Int	Nastaví farbu textu (aktivní stav).
setButtonTextSize(sp)	Float	Nastaví velikost textu v sp.
setButtonFontFamily(family)	String	Nastaví rodinu písma.
setButtonTypeface(typeface)	Typeface	Nastaví písmo pomocí instance Typeface.
setButtonBackgroundColor(color)	Int	Nastaví farbu pozadí (aktivní stav).
setButtonBorderColor(color)	Int	Nastaví farbu orámovania.
setButtonBorderWidth(widthPx)	Int	Nastaví šírku orámovania v pixeloch.
setButtonBorderWidthDp(widthDp)	Float	Nastaví šírku orámovania v dp.
setButtonCornerRadius(radiusPx)	Float	Nastaví zaoblenie rohů v pixeloch.
setButtonCornerRadiusDp(radiusDp)	Float	Nastaví zaoblenie rohů v dp.
setDisabledBackgroundColor(color)	Int	Nastaví farbu pozadí v deaktivovanom stave.
setDisabledTextColor(color)	Int	Nastaví farbu textu v deaktivovanom stave.
setButtonPadding(horizontalPx, verticalPx)	Int, Int	Nastaví vnútorné odsadenie v pixeloch.
setButtonPaddingDp(horizontalDp, verticalDp)	Float, Float	Nastaví vnútorné odsadenie v dp.
setLoadingAnimationEnabled(enabled)	Boolean	Povoľuje alebo zakazuje shimmer sweep animaci počas spracovania platby. Predvolené: true.

Informácie

Pre väčšinu prípadov odporúčame používať *Dp varianty setterů (setButtonBorderWidthDp, setButtonCornerRadiusDp, setButtonPaddingDp). Vstupy jsou v dp a knižnica převod na pixely zajistí interně.

Príklad v Compose (update blok)

SecurePayButton(
    session = session,
    collector = collector,
    onPaymentResult = { result -> /* ... */ },
    paymentParamsProvider = { /* ... */ },
    modifier = Modifier.fillMaxWidth(),
    update = {
        setText("Zaplatit")
        setButtonBackgroundColor(Color.parseColor("#1E88E5"))
        setButtonTextColor(Color.WHITE)
        setButtonCornerRadiusDp(12f)
        setButtonBorderColor(Color.parseColor("#1565C0"))
        setButtonBorderWidthDp(1f)
        setDisabledBackgroundColor(Color.parseColor("#CFD8DC"))
        setDisabledTextColor(Color.parseColor("#78909C"))
        setButtonTextSize(16f)
        setLoadingAnimationEnabled(true)
    }
)

XML atribúty

XML atribút	Formát	Popis
app:payButtonText	string	Text tlačidla (predvolené: "Pay").
app:payButtonTextColor	color	Farba textu v aktívnom stave.
app:payButtonTextSize	dimension	Velikost textu.
app:payButtonFontFamily	string	Rodina písma.
app:payButtonBackgroundColor	color	Farba pozadí v aktívnom stave.
app:payButtonBorderColor	color	Farba orámovania.
app:payButtonBorderWidth	dimension	Šírka orámovania.
app:payButtonCornerRadius	dimension	Zaoblení rohů.
app:payButtonDisabledBackgroundColor	color	Farba pozadí v deaktivovanom stave.
app:payButtonDisabledTextColor	color	Farba textu v deaktivovanom stave.
app:payButtonPaddingHorizontal	dimension	Horizontální vnútorné odsadenie.
app:payButtonPaddingVertical	dimension	Vertikální vnútorné odsadenie.
app:payButtonLoadingAnimation	boolean	Povoluje/zakazuje shimmer sweep animaci počas spracovania platby. Predvolené: true.

Automatický deaktivované stav

Ak nejsou explicitně nastaveny barvy pro deaktivované stav (payButtonDisabledBackgroundColor, payButtonDisabledTextColor), tlačidlo automaticky vypočítá tlumenou variantu z aktivních barev snížením průhlednosti na 50 %.

Animace počas spracovania platby

Po stisku tlačidla je nad jeho obsahem zobrazena shimmer sweep animace — poloprůhledný třpytivý pruh, který neustále přejíždí zleva doprava přes tlačidlo. Tlačítko přitom zachovává plnou farbu pozadí a původní text — animace nese informaci o probíhajícím spracovania.

Animaci lze vypnout v update bloku alebo priamo na stavu:

SecurePayButton(
    // ...
    update = {
        setLoadingAnimationEnabled(false)
    }
)

Po vypnutí animace zůstává tlačidlo počas spracovania v klidném deaktivovaném vzhledu bez vizualního efektu.

SecurePaymentStatusView (stavový banner)

Použití v Compose

V Compose se komponenta používa přes rememberPaymentStatusState(). Vizuální stylování není v Compose API priamo exponováno — komponenta automaticky aplikuje příslušné barvy (zelená/oranžová/červená) podle stavu platby. Překlad zpráv lze nastavit přes translation na stavu:

val statusState = rememberPaymentStatusState()
statusState.translation = Translation.Czech

SecurePaymentStatusView(state = statusState)

// Zobrazení výsledku:
statusState.showStatus(paymentResult)
// alebo:
statusState.showError("Vlastní chybová zpráva")
// Skrytí:
statusState.clear()

XML atribúty

XML atribút	Formát	Popis
app:statusViewText	string	Počáteční text zprávy (volitelné).
app:statusViewTextColor	color	Farba textu.
app:statusViewTextSize	dimension	Velikost textu.
app:statusViewFontFamily	string	Rodina písma.
app:statusViewBackgroundColor	color	Farba pozadí banneru.
app:statusViewBorderColor	color	Farba orámovania.
app:statusViewBorderWidth	dimension	Šírka orámovania.
app:statusViewCornerRadius	dimension	Zaoblení rohů.
app:statusViewPaddingHorizontal	dimension	Horizontální vnútorné odsadenie.
app:statusViewPaddingVertical	dimension	Vertikální vnútorné odsadenie.

Metódy štylizácie

Metoda	Parametr	Popis
setTextColor(color)	Int	Nastaví farbu textu.
setTextSize(sp)	Float	Nastaví velikost textu v sp.
setFontFamily(family)	String	Nastaví rodinu písma.
setTypeface(typeface)	Typeface	Nastaví písmo pomocí instance Typeface.
setStatusBackgroundColor(color)	Int	Nastaví farbu pozadí.
setBorderColor(color)	Int	Nastaví farbu orámovania.
setBorderWidth(widthPx)	Int	Nastaví šírku orámovania v pixeloch.
setBorderWidthDp(widthDp)	Float	Nastaví šírku orámovania v dp.
setCornerRadius(radiusPx)	Float	Nastaví zaoblenie rohů v pixeloch.
setCornerRadiusDp(radiusDp)	Float	Nastaví zaoblenie rohů v dp.
setStatusPadding(horizontalPx, verticalPx)	Int, Int	Nastaví vnútorné odsadenie v pixeloch.
setStatusPaddingDp(horizontalDp, verticalDp)	Float, Float	Nastaví vnútorné odsadenie v dp.

Informácie

Pre väčšinu prípadov odporúčame používať *Dp varianty setterů (setBorderWidthDp, setCornerRadiusDp, setStatusPaddingDp). Vstupy jsou v dp a knižnica převod na pixely zajistí interně.

Tip

Komponenta začíná ve stavu GONE (skrytá). Zobrazí se automaticky po zavolání showStatus() a skryje se po zavolání clear(). Více informací o zobrazování stavů nájdete v sekcii Výsledky platby.