Custom form styling
For complete control over how the various UI elements on your forms look, you can use our fully custom solution.
You can use the objects and properties listed below to edit each individual UI component displayed across the forms:
Custom PaymentDetailsStyle
1object CustomPaymentDetailsStyle {2
3 fun providePaymentDetailsStyle() = PaymentDetailsStyle(4 paymentDetailsHeaderStyle = provideHeaderStyle(),5 cardSchemeStyle = provideCardSchemeStyle(),6 cardNumberStyle = provideCardNumberStyle(),7 expiryDateStyle = provideExpiryDateStyle(),8 cvvStyle = provideCVVStyle(),9 addressSummaryStyle = provideAddressSummaryStyle(),10 payButtonStyle = providePayButtonStyle(),11 fieldsContainerStyle = ContainerStyle(12 color = backgroundColor,13 padding = Padding(14 start = PaymentFormConstants.padding,15 end = PaymentFormConstants.padding16 )17 )18 )19
20 private fun providePayButtonStyle(): PayButtonComponentStyle {21 val buttonStyle = DefaultButtonStyle.lightSolid(22 textId = R.string.cko_pay,23 contentColor = inputFieldColor,24 containerColor = textColor,25 disabledContentColor = PaymentButtonConstants.disabledContentColor,26 disabledContainerColor = PaymentButtonConstants.disabledContainerColor,27 contentPadding = PaymentButtonConstants.contentPadding,28 fontWeight = FontWeight.Bold,29 margin = Margin(top = marginBottom),30 shape = Shape.Circle,31 cornerRadius = inputFieldCornerRadius32 )33 return PayButtonComponentStyle(buttonStyle = buttonStyle)34 }35
36 private fun provideAddressSummaryStyle(): AddressSummaryComponentStyle {37 var style = DefaultAddressSummaryComponentStyle.light(isOptional = false)38 val containerStyle =39 ContainerStyle(color = inputFieldColor, shape = Shape.RoundCorner, cornerRadius = inputFieldCornerRadius)40
41 style = style.copy(42 titleStyle = null,43 subTitleStyle = null,44 containerStyle = containerStyle,45 addAddressButtonStyle = DefaultButtonStyle.lightSolid(46 textId = R.string.cko_add_billing_address,47 trailingIconStyle = DefaultImageStyle.buttonTrailingImageStyle(tinColor = textColor),48 fontWeight = FontWeight.SemiBold,49 contentColor = textColor50 ),51 summarySectionStyle = style.summarySectionStyle.copy(52 editAddressButtonStyle = DefaultButtonStyle.lightSolid(53 textId = R.string.cko_edit_billing_address,54 trailingIconStyle = DefaultImageStyle.buttonTrailingImageStyle(tinColor = textColor),55 fontWeight = FontWeight.SemiBold,56 contentColor = textColor57 ),58 containerStyle = containerStyle59 )60 )61 return style62 }63
64 private fun provideCardNumberStyle(): CardNumberComponentStyle {65 val inputStyle = DefaultLightStyle.inputComponentStyle(66 placeholderResourceTextId = R.string.cko_card_number_title,67 withLeadingIcon = false,68 )69 return CardNumberComponentStyle(70 inputStyle = inputStyle.copy(71 errorMessageStyle = provideErrorMessageStyle(),72 inputFieldStyle = inputStyle.inputFieldStyle.copy(73 containerStyle = provideContainerStyle(inputFieldCornerRadius.copy(bottomStart = 0, bottomEnd = 0)),74 indicatorStyle = provideIndicatorStyle(),75 placeholderStyle = inputStyle.inputFieldStyle.placeholderStyle.copy(76 color = placeHolderTextColor77 )78 )79 )80 )81 }82
83 private fun provideExpiryDateStyle(): ExpiryDateComponentStyle {84 val inputStyle = DefaultLightStyle.inputComponentStyle(85 placeholderResourceTextId = R.string.cko_expiry_date_component_title,86 margin = Margin(top = 2)87 )88 return ExpiryDateComponentStyle(89 inputStyle.copy(90 errorMessageStyle = provideErrorMessageStyle(),91 inputFieldStyle = inputStyle.inputFieldStyle.copy(92 containerStyle = provideContainerStyle(CornerRadius()),93 indicatorStyle = provideIndicatorStyle(),94 placeholderStyle = inputStyle.inputFieldStyle.placeholderStyle.copy(95 color = placeHolderTextColor96 )97 )98 )99 )100 }101
102 private fun provideCVVStyle(): CvvComponentStyle {103 val inputStyle = DefaultLightStyle.inputComponentStyle(104 placeholderResourceTextId = R.string.cko_cvv_component_title,105 margin = Margin(top = 2, bottom = margin)106 )107 return CvvComponentStyle(108 inputStyle.copy(109 errorMessageStyle = provideErrorMessageStyle(),110 inputFieldStyle = inputStyle.inputFieldStyle.copy(111 containerStyle = provideContainerStyle(inputFieldCornerRadius.copy(topStart = 0, topEnd = 0)),112 indicatorStyle = provideIndicatorStyle(),113 placeholderStyle = inputStyle.inputFieldStyle.placeholderStyle.copy(114 color = placeHolderTextColor115 )116 )117 )118 )119 }120
121 private fun provideErrorMessageStyle(): TextLabelStyle =122 DefaultTextLabelStyle.error(123 padding = Padding(124 top = ErrorConstants.errorMessageTopPadding,125 bottom = ErrorConstants.errorMessageTopPadding126 )127 )128
129 private fun provideIndicatorStyle(): InputFieldIndicatorStyle = InputFieldIndicatorStyle.Underline(130 focusedUnderlineThickness = 0,131 unfocusedUnderlineThickness = 0132 )133
134 private fun provideContainerStyle(cornerRadius: CornerRadius): ContainerStyle {135 return ContainerStyle(136 shape = inputFieldBorderShape,137 color = inputFieldColor,138 cornerRadius = cornerRadius139 )140 }141
142 private fun provideCardSchemeStyle() = DefaultLightStyle.cardSchemeComponentStyle()143 .copy(144 containerStyle = ContainerStyle(145 margin = Margin(146 top = marginTop,147 bottom = marginBottom148 )149 ),150 titleStyle = DefaultTextLabelStyle.subtitle(textId = R.string.accepted_card_schemes, color = textColor),151 imageStyle = null152 )153
154 private fun provideHeaderStyle() = DefaultLightStyle.screenHeader(155 textId = R.string.cko_payment_details_title,156 imageId = R.drawable.ic_back_arrow,157 leadingIconSize = backIconSize,158 textColor = textColor,159 fontWeight = FontWeight.Bold160 ).copy(161 containerStyle = ContainerStyle(color = backgroundColor)162 )163}
See an example on our GitHub project.
Custom BillingFormStyle
1object CustomBillingFormStyle {2 private val defaultKeyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)3
4 fun provideBillingFormStyle() = BillingFormStyle(5 billingAddressDetailsStyle = provideBillingAddressDetailsStyle(),6 countryPickerStyle = provideCountryPickerStyle()7 )8
9 private fun provideCountryPickerStyle(): CountryPickerStyle {10 var style = DefaultCountryPickerStyle.light()11
12 style = style.copy(13 screenTitleStyle = style.screenTitleStyle.copy(14 textStyle = style.screenTitleStyle.textStyle.copy(color = textColor),15 leadingIconStyle = style.screenTitleStyle.leadingIconStyle?.copy(tinColor = textColor)16 ),17 containerStyle = style.containerStyle.copy(18 color = backgroundColor19 ),20 searchFieldStyle = with(style.searchFieldStyle) {21 copy(22 containerStyle = provideContainerStyle().copy(23 margin = Margin(24 start = CountryPickerScreenConstants.margin,25 end = CountryPickerScreenConstants.margin,26 bottom = CountryPickerScreenConstants.margin27 )28 ),29 indicatorStyle = provideIndicatorStyle(),30 placeholderStyle = placeholderStyle.copy(color = PaymentFormConstants.placeHolderTextColor),31 leadingIconStyle = leadingIconStyle?.copy(32 tinColor = textColor33 ),34 trailingIconStyle = trailingIconStyle?.copy(35 tinColor = textColor36 )37 )38 },39 searchItemStyle = style.searchItemStyle.copy(40 textStyle = style.searchItemStyle.textStyle.copy(41 color = textColor42 )43 )44 )45 return style46 }47
48 private fun provideBillingAddressDetailsStyle() = BillingAddressDetailsStyle(49 headerComponentStyle = provideHeaderComponentStyle(),50 inputComponentsContainerStyle = InputComponentsContainerStyle(fetchInputComponentStyleValues()),51 countryComponentStyle = provideCountryComponentStyle(),52 containerStyle = ContainerStyle(color = backgroundColor)53 )54
55 private fun provideCountryComponentStyle(): CountryComponentStyle {56 var style = DefaultCountryComponentStyle.light()57 var inputStyle = style.inputStyle58
59 inputStyle = inputStyle.copy(60 inputFieldStyle = provideInputFieldStyle(inputStyle.inputFieldStyle),61 titleStyle = inputStyle.titleStyle?.copy(62 textStyle = inputStyle.titleStyle?.textStyle?.copy(color = textColor) ?: TextStyle(),63 containerStyle = ContainerStyle(padding = Padding(start = cornerRadius, bottom = paddingTenDp))64 )65 )66
67 style = style.copy(68 inputStyle = inputStyle69 )70
71 return style72 }73
74 private fun provideHeaderComponentStyle(): HeaderComponentStyle {75 var style = DefaultBillingAddressDetailsStyle.headerComponentStyle()76 style = style.copy(77 headerTitleStyle = style.headerTitleStyle.copy(78 textStyle = style.headerTitleStyle.textStyle.copy(79 color = textColor, fontWeight = FontWeight.Bold80 ),81 ),82 headerButtonStyle = style.headerButtonStyle83 .copy(84 contentColor = inputFieldColor,85 containerColor = textColor,86 shape = Shape.Circle,87 cornerRadius = inputFieldCornerRadius88 )89 )90
91 return style92 }93
94 @Suppress("LongMethod")95 private fun fetchInputComponentStyleValues(): LinkedHashMap<BillingFormFields, InputComponentStyle> {96 val inputComponentsStyles: LinkedHashMap<BillingFormFields, InputComponentStyle> = linkedMapOf()97
98 inputComponentsStyles[BillingFormFields.AddressLineOne] = provideInputComponentStyle(99 placeholderTextId = R.string.cko_billing_form_input_field_address_line_one,100 isFieldOptional = false,101 keyboardOptions = defaultKeyboardOptions,102 padding = Padding(103 start = LightStyleConstants.inputComponentLeftPadding,104 end = LightStyleConstants.inputComponentRightPadding,105 )106 )107
108 inputComponentsStyles[BillingFormFields.AddressLineTwo] = provideInputComponentStyle(109 placeholderTextId = R.string.cko_billing_form_input_field_address_line_two,110 infoTextId = R.string.cko_input_field_optional_info,111 isFieldOptional = true,112 keyboardOptions = defaultKeyboardOptions,113 padding = Padding(114 start = LightStyleConstants.inputComponentLeftPadding,115 end = LightStyleConstants.inputComponentRightPadding,116 bottom = LightStyleConstants.inputComponentBottomPadding117 )118 )119
120 inputComponentsStyles[BillingFormFields.City] = provideInputComponentStyle(121 placeholderTextId = R.string.cko_billing_form_input_field_city,122 isFieldOptional = false,123 keyboardOptions = defaultKeyboardOptions,124 padding = Padding(125 start = LightStyleConstants.inputComponentLeftPadding,126 end = LightStyleConstants.inputComponentRightPadding127 )128 )129
130 inputComponentsStyles[BillingFormFields.State] = provideInputComponentStyle(131 placeholderTextId = R.string.cko_billing_form_input_field_state,132 infoTextId = R.string.cko_input_field_optional_info,133 isFieldOptional = true,134 keyboardOptions = defaultKeyboardOptions,135 padding = Padding(136 start = LightStyleConstants.inputComponentLeftPadding,137 end = LightStyleConstants.inputComponentRightPadding,138 bottom = LightStyleConstants.inputComponentBottomPadding139 )140 )141
142 inputComponentsStyles[BillingFormFields.PostCode] = provideInputComponentStyle(143 placeholderTextId = R.string.cko_billing_form_input_field_postcode,144 isFieldOptional = false,145 keyboardOptions = defaultKeyboardOptions,146 padding = Padding(147 start = LightStyleConstants.inputComponentLeftPadding,148 end = LightStyleConstants.inputComponentRightPadding,149 bottom = LightStyleConstants.inputComponentBottomPadding150 )151 )152
153 inputComponentsStyles[BillingFormFields.Phone] = provideInputComponentStyle(154 placeholderTextId = R.string.cko_billing_form_input_field_phone_title,155 isFieldOptional = false,156 keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number, imeAction = ImeAction.Done),157 padding = Padding(158 start = LightStyleConstants.inputComponentLeftPadding,159 end = LightStyleConstants.inputComponentRightPadding,160 bottom = paddingTenDp161 )162 )163
164 return inputComponentsStyles165 }166
167 private fun provideInputComponentStyle(168 @StringRes placeholderTextId: Int? = null,169 @StringRes infoTextId: Int? = null,170 isFieldOptional: Boolean = false,171 keyboardOptions: KeyboardOptions = KeyboardOptions.Default,172 padding: Padding = Padding()173 ): InputComponentStyle {174 var style = DefaultLightStyle.inputComponentStyle(175 placeholderResourceTextId = placeholderTextId,176 infoTextId = infoTextId,177 padding = padding,178 isFieldOptional = isFieldOptional,179 keyboardOptions = keyboardOptions180 )181
182 style = style.copy(183 infoStyle = style.infoStyle?.copy(184 containerStyle = ContainerStyle(185 padding = Padding(186 top = paddingSixDp, bottom = paddingSixDp, end = cornerRadius187 )188 )189 ),190 inputFieldStyle = provideInputFieldStyle(style.inputFieldStyle)191 )192
193 return style194 }195
196 private fun provideInputFieldStyle(inputFieldStyle: InputFieldStyle): InputFieldStyle {197 return inputFieldStyle.copy(198 containerStyle = provideContainerStyle(),199 indicatorStyle = provideIndicatorStyle(),200 placeholderStyle = inputFieldStyle.placeholderStyle.copy(201 color = PaymentFormConstants.placeHolderTextColor202 ),203 trailingIconStyle = inputFieldStyle.trailingIconStyle?.copy(204 tinColor = textColor205 )206 )207 }208
209 private fun provideIndicatorStyle(): InputFieldIndicatorStyle = InputFieldIndicatorStyle.Underline(210 focusedUnderlineThickness = 0, unfocusedUnderlineThickness = 0211 )212
213 private fun provideContainerStyle(): ContainerStyle {214 return ContainerStyle(215 shape = inputFieldBorderShape, color = inputFieldColor, cornerRadius = inputFieldCornerRadius216 )217 }218}
See an example on our GitHub project.
Custom PaymentFormStyle
1PaymentFormStyle(2 CustomPaymentDetailsStyle.providePaymentDetailsStyle(),3 CustomBillingFormStyle.provideBillingFormStyle()4)
See an example on our our GitHub project.