Customize Universal Checkout


Primer Universal Checkout look and feel can be styled to suit your preferred branding and make it blend seamlessly in your website or mobile app.

This guide is designed to help you style our default Universal Checkout UI. If you would like to build your own UI from scratch then check out our Headless Universal Checkout guide.

The fastest way to add custom colors and dimensions to the Android SDK is to override the SDK's resource values.

To learn more see the complete set of resources below or check out one of our theming examples:

Colors

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
<!--  PRIMER THEME  --><!--  override these values for custom theming  --> <!--  primary color for buttons, borders, etc. --><color name="primer_primary">@color/primer_app_primary</color> <!--  default color for SDK background --><color name="primer_background">@color/primer_app_background</color> <!--  default color for disabled borders, buttons, etc. --><color name="primer_disabled">#8FBEC2C4</color> <!--  default color for errors --><color name="primer_error">@color/primer_android_red</color> <!--  default color for all text views --><color name="primer_default_text">@color/primer_secondary</color> <!--  custom color resource for title text --><color name="primer_title">@color/primer_secondary</color> <!--  custom color resource for subtitle text --><color name="primer_subtitle">#808080</color> <!--  custom color for system text and links --><color name="primer_system_text">@color/primer_primary</color> <!--  custom color for amount label in Universal Checkout --><color name="primer_amount">@color/primer_secondary</color> <!--  custom colors for payment method buttons in Universal Checkout --><color name="primer_payment_method_button_border">@color/primer_disabled</color><color name="primer_payment_method_button_border_selected">@color/primer_primary</color><color name="primer_payment_method_button_border_error">@color/primer_error</color><color name="primer_payment_method_button_text">@color/primer_secondary</color><color name="primer_payment_method_button">@color/primer_background</color><color name="primer_payment_method_button_disabled">@color/primer_background</color><color name="primer_payment_method_button_error">@color/primer_disabled</color> <!--  custom colors for main buttons ("PAY", "NEXT", etc.) in Universal Checkout --><color name="primer_main_button_border">@color/primer_disabled</color><color name="primer_main_button_border_selected">@color/primer_primary</color><color name="primer_main_button_border_error">@color/primer_error</color><color name="primer_main_button_text">@android:color/white</color><color name="primer_main_button">@color/primer_primary</color><color name="primer_main_button_disabled">@color/primer_disabled</color><color name="primer_main_button_error">@color/primer_error</color> <!--  custom colors for text inputs in Universal Checkout --><color name="primer_input_border">@color/primer_primary</color><color name="primer_input_border_selected">@color/primer_primary</color><color name="primer_input_border_error">@color/primer_error</color><color name="primer_input_background">@color/primer_app_background</color><color name="primer_input_text">@color/primer_disabled</color><color name="primer_input_cursor">@color/primer_primary</color>
xml
copy

Dimensions

1234567891011121314151617181920212223242526
<!-- PRIMER THEME --><dimen name="primer_default_border_width">1dp</dimen><dimen name="primer_default_corner_radius">6dp</dimen><dimen name="primer_bottom_sheet_corner_radius">24dp</dimen> <!-- text --><dimen name="primer_default_fontsize">18sp</dimen><dimen name="primer_title_fontsize">20sp</dimen><dimen name="primer_amount_label_fontsize">34sp</dimen><dimen name="primer_subtitle_fontsize">14sp</dimen><dimen name="primer_system_text_fontsize">@dimen/primer_subtitle_fontsize</dimen> <!--  custom colors for payment method buttons in Universal Checkout --><dimen name="primer_payment_method_button_corner_radius">@dimen/primer_default_corner_radius</dimen><dimen name="primer_payment_method_button_fontsize">@dimen/primer_subtitle_fontsize</dimen><dimen name="primer_payment_method_button_border_width">1dp</dimen> <!--  custom colors for main buttons ("PAY", "NEXT", etc.) in Universal Checkout --><dimen name="primer_main_button_corner_radius">@dimen/primer_default_corner_radius</dimen><dimen name="primer_main_button_fontsize">@dimen/primer_subtitle_fontsize</dimen><dimen name="primer_main_button_border_width">0dp</dimen> <!--  custom colors for text inputs in Universal Checkout --><dimen name="primer_input_corner_radius">@dimen/primer_default_corner_radius</dimen><dimen name="primer_input_fontsize">@dimen/primer_default_fontsize</dimen><dimen name="primer_input_border_width">1dp</dimen>
xml
copy

Night Theme

Night Theme

1234567891011121314151617181920212223242526272829
<!--  🌃 night example  --><color name="apple_dark_1">#8E8E93</color><color name="apple_dark_2">#48484A</color><color name="apple_dark_3">#2C2C2E</color><color name="apple_dark_4">#1C1C1E</color><color name="apple_dark_5">#F2F2F7</color><color name="apple_dark_6">#0A84FF</color><color name="apple_dark_7">#FF375F</color><color name="apple_dark_8">#FFD60A</color><color name="apple_dark_9">#FF9F0A</color><color name="apple_dark_10">#FF453A</color> <!--  override these Primer color values  --><color name="primer_primary">@color/apple_dark_6</color><color name="primer_background">@color/apple_dark_4</color><color name="primer_disabled">@color/apple_dark_3</color><color name="primer_title">@color/apple_dark_5</color><color name="primer_subtitle">@color/apple_dark_1</color><color name="primer_system_text">@color/apple_dark_6</color><color name="primer_amount">@color/apple_dark_5</color><color name="primer_payment_method_button_border">@color/apple_dark_3</color><color name="primer_payment_method_button_border_selected">@color/apple_dark_6</color><color name="primer_payment_method_button_text">@color/apple_dark_5</color><color name="primer_payment_method_button">@color/apple_dark_4</color><color name="primer_main_button_text">@color/apple_dark_5</color><color name="primer_main_button">@color/apple_dark_6</color><color name="primer_input_border">@color/apple_dark_1</color><color name="primer_input_text">@color/apple_dark_5</color><color name="primer_input_cursor">@color/apple_dark_5</color>
xml
copy

Dynamic Styling with Resources

Apart from overriding Primer SDK resource colors and dimensions, it's also possible to achieve a custom theme by passing in references to your app's resources when defining the SDK's PrimerTheme object in Kotlin/Java.

XML Resource

1234567891011
<!-- your app's custom colors --><color name="apple_dark_1">#8E8E93</color><color name="apple_dark_2">#48484A</color><color name="apple_dark_3">#2C2C2E</color><color name="apple_dark_4">#1C1C1E</color><color name="apple_dark_5">#F2F2F7</color><color name="apple_dark_6">#0A84FF</color><color name="apple_dark_7">#FF375F</color><color name="apple_dark_8">#FFD60A</color><color name="apple_dark_9">#FF9F0A</color><color name="apple_dark_10">#FF453A</color>
xml
copy

YourActivity.kt

1234567891011121314151617181920212223242526272829
// define the theme objectval darkTheme = PrimerTheme.build(    primaryColor = R.color.apple_dark_6,    backgroundColor = R.color.apple_dark_4,    disabledColor = R.color.apple_dark_3,    input = InputThemeData(        border = BorderThemeData(defaultColor = R.color.apple_dark_1),        text = TextThemeData(defaultColor = R.color.apple_dark_5)    ),    mainButton = ButtonThemeData(        defaultColor = R.color.apple_dark_6,        text = TextThemeData(defaultColor = R.color.apple_dark_5),    ),    titleText = TextThemeData(defaultColor = R.color.apple_dark_5),    amountLabelText = TextThemeData(defaultColor = R.color.apple_dark_5),    subtitleText = TextThemeData(defaultColor = R.color.apple_dark_1),    paymentMethodButton = ButtonThemeData(        defaultColor = R.color.apple_dark_4,        text = TextThemeData(defaultColor = R.color.apple_dark_5),        border = BorderThemeData(            defaultColor = R.color.apple_dark_3,            selectedColor = R.color.apple_dark_6,        ),    ),    systembutton = TextThemeData(defaultColor = R.color.apple_dark_6)) // initialize the SDKPrimer.initialize(context, clientToken, theme = darkTheme)
kotlin
copy