FinancingModule
Financing Module displays financing/instalment purchase information — monthly price, interest rate, an optional total price label, and an actionable item.
Use FinancingModuleVariant.Default to show the full grid with price details and an actionable item. Use FinancingModuleVariant.Fallback when financing details are unavailable — renders only the actionable item with an emphasised title.
Example of usage:
Parameters
FinancingModuleVariant per above.
Title for the actionable item.
Modifier to be applied to the FinancingModule.
Optional secondary text displayed below actionTitle in the actionable item.
Icon to be shown for the actionable item. Defaults to the hand-with-wallet drawable. Note: Only use approved icons from Skapa used for financing.
Called when the item is clicked.
See also
Samples
SkapaTheme2(isSystemInDarkTheme()) {
Column(
verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100),
modifier = Modifier.padding(SkapaSpacing.space100)
) {
// Default financing module with the hand-with-wallet icon and a final price label.
FinancingModule(
variant = FinancingModuleVariant.Default(
monthlyPriceLabel = "Pay monthly for 12 months",
monthlyPriceValue = PriceParams(
integerValue = "149",
decimalValue = "00",
currencyLabel = "kr",
decimalSign = DecimalSign.Comma,
currencyPosition = CurrencyPosition.Trailing,
subscriptLabel = "/month",
captionPrefix = null
),
interestRateLabel = "Interest rate",
interestRateValue = "6.99%",
finalPriceLabel = "Final price incl. interest: 12 345 kr"
),
actionTitle = "Learn more and apply",
actionDescription = "Subject to status. T&Cs apply.",
iconId = R.drawable.ic_financing_module_hand_with_wallet
) { /* Do something when action is clicked */ }
// Same layout, but without the final price label to show the shorter default state.
FinancingModule(
variant = FinancingModuleVariant.Default(
monthlyPriceLabel = "Pay monthly for 12 months",
monthlyPriceValue = PriceParams(
integerValue = "149",
decimalValue = "00",
currencyLabel = "kr",
decimalSign = DecimalSign.Comma,
currencyPosition = CurrencyPosition.Trailing,
captionPrefix = null
),
interestRateLabel = "Interest rate",
interestRateValue = "6.99%"
),
actionTitle = "Learn more and apply",
actionDescription = "Provided by Bank",
iconId = R.drawable.ic_financing_module_hand_with_wallet
) { /* Do something when action is clicked */ }
// Fallback state when financing details are unavailable.
FinancingModule(
variant = FinancingModuleVariant.Fallback,
actionTitle = "Financing available from 149 kr/month",
actionDescription = "Apply for financing",
iconId = R.drawable.ic_financing_module_hand_with_wallet
) { /* Do something when action is clicked */ }
}
}