Skip to content

Themed form styling

Last updated: December 21, 2022

If you want to customize your forms beyond what is supported by the default integration, you can apply a theme using the Theme object.

The default payment form

The default billing form

The default country picker

When instantiating a new Theme object, you must supply the following fields at a minimum:

  • accentColor
  • textColor
  • errorColor
  • backgroundColor
  • fieldBackgroundColor
  • enabledButtonColor
  • disabledButtonColor

You can then optionally provide additional values to customize other elements including button styling, custom placeholder and error text, and field input controls.

Dynamic font sizing based on the user's device is built into the Theme object.

1
// Create a color object with generic colors which will be used on all screens
2
private val paymentFormThemeColors = PaymentFormThemeColors(
3
    accentColor = 0XFF00CC2D,
4
    textColor = 0XFFB1B1B1,
5
    errorColor = 0XFFFF0000,
6
    backgroundColor = 0xFF17201E,
7
    fieldBackgroundColor = 0XFF24302D,
8
    enabledButtonColor = 0xFFFFFFFF,
9
    disabledButtonColor = 0XFF003300
10
)
11


12
// Customize card number component
13
private val cardNumber = PaymentFormComponentBuilder()
14
    .setPaymentFormField(PaymentFormComponentField.CardNumber)
15
    .setTitleTextId(R.string.cko_card_number_title)
16
    .setSubTitleText("Card number is required")
17
    .build()
18


19
// Customize address line 1 component
20
private val addressLineOne = PaymentFormComponentBuilder()
21
    .setPaymentFormField(PaymentFormComponentField.AddressLineOne)
22
    .setTitleTextId(R.string.cko_billing_form_input_field_address_line_one)
23
    .setSubTitleText("Eg. street address, apartment number")
24
    .setInfoTextId(R.string.cko_input_field_optional_info)
25
    .setIsFieldOptional(true)
26
    .setIsFieldHidden(false)
27
    .build()
28


29
// Customize address line 2 component
30
private val addressLineTwo = PaymentFormComponentBuilder()
31
    .setPaymentFormField(PaymentFormComponentField.AddressLineTwo)
32
    .setIsFieldHidden(true)
33
    .build()
34


35
// Customize summary button
36
private val addBillingSummaryButton = PaymentFormComponentBuilder()
37
    .setPaymentFormField(PaymentFormComponentField.AddBillingSummaryButton)
38
    .setIsFieldOptional(false)
39
    .setTitleText("Add billing address")
40
    .build()
41


42
// Customize billing summary button
43
private val editBillingSummaryButton = PaymentFormComponentBuilder()
44
    .setPaymentFormField(PaymentFormComponentField.EditBillingSummaryButton)
45
    .setTitleText("Edit billing address")
46
    .build()
47


48
// Create a payment form theme
49
fun providePaymentFormTheme(): PaymentFormTheme {
50
    return PaymentFormTheme(
51
        paymentFormThemeColors = paymentFormThemeColors,
52
        /**
53
         * option 1: Use combination of default and custom components
54
         */
55
        paymentFormComponents = DefaultPaymentFormTheme.providePaymentFormComponents
56
            cardNumber = cardNumber,
57
            addressLineOne = addressLineOne,
58
            addressLineTwo = addressLineTwo,
59
            addBillingSummaryButton = addBillingSummaryButton,
60
            editBillingSummaryButton = editBillingSummaryButton
61
        ),
62
        /**
63
         * option 2: Use default components
64
         * paymentFormComponents = DefaultPaymentFormTheme.provideComponents()
65
         */
66
        paymentFormShape = PaymentFormShape(
67
            inputFieldShape = Shape.RoundCorner,
68
            addressSummaryShape = Shape.Rectangle, buttonShape = Shape.Circle
69
        ),
70
        paymentFormCornerRadius = PaymentFormCornerRadius(
71
            inputFieldCornerRadius = CornerRadius(INPUT_FIELD_CORNER_RADIUS),
72
            addressSummaryCornerRadius = CornerRadius(INPUT_FIELD_CORNER_RADIUS)
73
        )
74
    )
75
}

See our example project on GitHub.