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.


To customize the appearance of the SDK define the PrimerTheme object, then pass it in as an argument when configuring the SDK.

// example:let theme = PrimerTheme(    cornerRadiusTheme: CornerRadiusTheme(textFields: 8),    colorTheme: PrimerDefaultTheme(tint1: themeColor),    layout: PrimerLayout(showTopTitle: false, textFieldHeight: 44),    textFieldTheme: .outlined) Primer.shared.configure(theme: theme)

Custom Colors

Access the colorTheme property to add custom colors.

PrimerTheme(  colorTheme: ColorTheme  darkTheme: ColorTheme // iOS 13.0+ only) protocol ColorTheme {  var text1: UIColor { get } // headers, main text  var text2: UIColor { get } // white text for darker buttons  var text3: UIColor { get } // system text, theme colored text  var secondaryText1: UIColor { get } // less visible subheaders  var main1: UIColor { get } // backgrounds  var main2: UIColor { get } // table cells, default buttons  var tint1: UIColor { get } // borders, theme colored components  var neutral1: UIColor { get } // unselected buttons  var disabled1: UIColor { get } // disabled components  var error1: UIColor { get } // error borders and messages} // example:let colorTheme = PrimerDefaultTheme(tint1: .systemPink)

Rounded Corners

Update the cornerRadiusTheme to change the corner radius of different components.

let cornerRadiusTheme = CornerRadiusTheme(buttons: 8, sheetView: 18)let theme = PrimerTheme(cornerRadiusTheme: cornerRadiusTheme)