Component Styling

Library components can be styled using the update block in Jetpack Compose or with XML attributes in layouts. Both approaches can be combined.

SecureTextField (input fields)

Attributes and methods apply to all SecureTextField input components: SecurePanField, SecureExpiryField, SecureCvvField, and SecureFullNameField.

Styling methods

Method	Parameter	Description
setHint(hint)	String	Sets placeholder text.
setTextColor(color)	Int	Sets text color.
setHintColor(color)	Int	Sets placeholder text color.
setTextSize(sp)	Float	Sets text size in sp.
setFontFamily(family)	String	Sets font family by name.
setTypeface(typeface)	Typeface	Sets font using Typeface instance.
setBackgroundColor(color)	Int	Sets background color.
setBorderColor(color)	Int	Sets border color in normal state.
setFocusedBorderColor(color)	Int	Sets border color in focused state.
setBorderWidth(widthPx)	Int	Sets border width in pixels.
setBorderWidthDp(widthDp)	Float	Sets border width in dp.
setCornerRadius(radiusPx)	Float	Sets corner radius in pixels.
setCornerRadiusDp(radiusDp)	Float	Sets corner radius in dp.
setErrorColor(color)	Int	Sets error color (text and border).
setErrorTextSize(sp)	Float	Sets error text size in sp.
setPadding(horizontalPx, verticalPx)	Int, Int	Sets internal padding in pixels.
setPaddingDp(horizontalDp, verticalDp)	Float, Float	Sets internal padding in dp.
showLabel	Boolean	Shows label above field (true/false). Default true.
labelText	String?	Custom label text. If null, default translated label is used.
setLabelColor(color)	Int	Sets label color.
setLabelTextSize(sp)	Float	Sets label text size in sp.

Information

For most cases, we recommend using *Dp setter variants (setBorderWidthDp, setCornerRadiusDp, setPaddingDp). Inputs are in dp and pixel conversion is handled internally by the library. These API methods are annotated with @Dimension(unit = Dimension.DP) to make expected unit explicit.

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

Compose example (update block)

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 = use default translation from session.translation
		setLabelColor(Color.parseColor("#616161"))
		setLabelTextSize(12f)
	}
)

To hide the label:

update = {
	showLabel = false
}

XML attributes

XML attribute	Format	Description
app:secureFieldHint	string	Placeholder text shown when field is empty.
app:secureFieldTextColor	color	Text color.
app:secureFieldHintColor	color	Placeholder text color.
app:secureFieldTextSize	dimension	Text size (for example 18sp).
app:secureFieldFontFamily	string	Font family (for example "monospace", "sans-serif-medium").
app:secureFieldBackgroundColor	color	Field background color.
app:secureFieldBorderColor	color	Border color in normal state.
app:secureFieldBorderWidth	dimension	Border width (for example 2dp).
app:secureFieldCornerRadius	dimension	Corner radius (for example 12dp).
app:secureFieldFocusedBorderColor	color	Border color in focused state.
app:secureFieldErrorColor	color	Error text and border color in error state.
app:secureFieldErrorTextSize	dimension	Error text size.
app:secureFieldPaddingHorizontal	dimension	Horizontal inner padding.
app:secureFieldPaddingVertical	dimension	Vertical inner padding.
app:secureFieldLabel	string	Custom label above field. If missing, default translated label is used.
app:secureFieldShowLabel	boolean	Shows label (true/false). Default true.
app:secureFieldLabelColor	color	Label color.
app:secureFieldLabelTextSize	dimension	Label size (for example 12sp).

Border states

Field border changes automatically based on current state:

State	Border color	Priority
Error	errorColor	Highest
Focused	focusedBorderColor	Medium
Normal	borderColor	Lowest

Styling multiple fields at once

Using extension function, you can apply common style in each update block:

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")  // PAN-specific
	}
)
SecureExpiryField(
	state = expiryState,
	modifier = Modifier.fillMaxWidth(),
	update = { applyCommonStyle() }
)
SecureCvvField(
	state = cvvState,
	modifier = Modifier.fillMaxWidth(),
	update = {
		applyCommonStyle()
		setTypeface(Typeface.MONOSPACE)  // CVV-specific
	}
)
SecureFullNameField(
	state = fullNameState,
	modifier = Modifier.fillMaxWidth(),
	update = {
		applyCommonStyle()
		setHint("First and last name") // payer name specific
	}
)

Using android:background

For SecureField, standard android:background can also be used in XML:

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

For clearer configuration, we recommend using app:secureFieldBackgroundColor, which is designed specifically for field background styling.

SecurePayButton (payment button)

Styling methods

Method	Parameter	Description
setText(text)	String	Sets button text.
setButtonTextColor(color)	Int	Sets text color (active state).
setButtonTextSize(sp)	Float	Sets text size in sp.
setButtonFontFamily(family)	String	Sets font family.
setButtonTypeface(typeface)	Typeface	Sets font using Typeface instance.
setButtonBackgroundColor(color)	Int	Sets background color (active state).
setButtonBorderColor(color)	Int	Sets border color.
setButtonBorderWidth(widthPx)	Int	Sets border width in pixels.
setButtonBorderWidthDp(widthDp)	Float	Sets border width in dp.
setButtonCornerRadius(radiusPx)	Float	Sets corner radius in pixels.
setButtonCornerRadiusDp(radiusDp)	Float	Sets corner radius in dp.
setDisabledBackgroundColor(color)	Int	Sets background color in disabled state.
setDisabledTextColor(color)	Int	Sets text color in disabled state.
setButtonPadding(horizontalPx, verticalPx)	Int, Int	Sets inner padding in pixels.
setButtonPaddingDp(horizontalDp, verticalDp)	Float, Float	Sets inner padding in dp.
setLoadingAnimationEnabled(enabled)	Boolean	Enables/disables shimmer sweep animation during payment processing. Default: true.

Information

For most cases, we recommend using *Dp setter variants (setButtonBorderWidthDp, setButtonCornerRadiusDp, setButtonPaddingDp). Inputs are in dp and conversion to pixels is handled internally.

Compose example (update block)

SecurePayButton(
	session = session,
	collector = collector,
	onPaymentResult = { result -> /* ... */ },
	paymentParamsProvider = { /* ... */ },
	modifier = Modifier.fillMaxWidth(),
	update = {
		setText("Pay")
		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 attributes

XML attribute	Format	Description
app:payButtonText	string	Button text (default: "Pay").
app:payButtonTextColor	color	Text color in active state.
app:payButtonTextSize	dimension	Text size.
app:payButtonFontFamily	string	Font family.
app:payButtonBackgroundColor	color	Background color in active state.
app:payButtonBorderColor	color	Border color.
app:payButtonBorderWidth	dimension	Border width.
app:payButtonCornerRadius	dimension	Corner radius.
app:payButtonDisabledBackgroundColor	color	Background color in disabled state.
app:payButtonDisabledTextColor	color	Text color in disabled state.
app:payButtonPaddingHorizontal	dimension	Horizontal inner padding.
app:payButtonPaddingVertical	dimension	Vertical inner padding.
app:payButtonLoadingAnimation	boolean	Enables/disables shimmer sweep animation during processing. Default: true.

Automatic disabled state

If disabled state colors are not explicitly set (payButtonDisabledBackgroundColor, payButtonDisabledTextColor), button automatically computes muted variant from active colors by reducing alpha to 50 %.

Processing animation

After button press, a shimmer sweep animation is displayed over button content - a semi-transparent sparkling band continuously moving left to right. Button keeps full background color and original text, while animation indicates ongoing processing.

You can disable animation in update block or directly on state:

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

When animation is disabled, button remains in calm disabled appearance during processing without visual effect.

SecurePaymentStatusView (status banner)

Compose usage

In Compose, component is used through rememberPaymentStatusState(). Visual styling is not exposed directly in Compose API - component automatically applies colors (green/orange/red) by payment state. Message translation can be configured via translation on state:

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

SecurePaymentStatusView(state = statusState)

// Show result:
statusState.showStatus(paymentResult)
// or:
statusState.showError("Custom error message")
// Hide:
statusState.clear()

XML attributes

XML attribute	Format	Description
app:statusViewText	string	Initial message text (optional).
app:statusViewTextColor	color	Text color.
app:statusViewTextSize	dimension	Text size.
app:statusViewFontFamily	string	Font family.
app:statusViewBackgroundColor	color	Banner background color.
app:statusViewBorderColor	color	Border color.
app:statusViewBorderWidth	dimension	Border width.
app:statusViewCornerRadius	dimension	Corner radius.
app:statusViewPaddingHorizontal	dimension	Horizontal inner padding.
app:statusViewPaddingVertical	dimension	Vertical inner padding.

Styling methods

Method	Parameter	Description
setTextColor(color)	Int	Sets text color.
setTextSize(sp)	Float	Sets text size in sp.
setFontFamily(family)	String	Sets font family.
setTypeface(typeface)	Typeface	Sets font using Typeface instance.
setStatusBackgroundColor(color)	Int	Sets background color.
setBorderColor(color)	Int	Sets border color.
setBorderWidth(widthPx)	Int	Sets border width in pixels.
setBorderWidthDp(widthDp)	Float	Sets border width in dp.
setCornerRadius(radiusPx)	Float	Sets corner radius in pixels.
setCornerRadiusDp(radiusDp)	Float	Sets corner radius in dp.
setStatusPadding(horizontalPx, verticalPx)	Int, Int	Sets inner padding in pixels.
setStatusPaddingDp(horizontalDp, verticalDp)	Float, Float	Sets inner padding in dp.

Information

For most cases, we recommend using *Dp setter variants (setBorderWidthDp, setCornerRadiusDp, setStatusPaddingDp). Inputs are in dp and pixel conversion is handled internally by the library.

Tip

Component starts in GONE state (hidden). It appears automatically after showStatus() and hides after clear(). More details in Payment Results.