Primer Drop-in 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 Drop-in Checkout UI.
If you would like to build your own UI from scratch then consider integrating Headless Checkout.
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.
Localization and languages
Universal Checkout supports multiple languages out of the box, enabling you to adapt its UI to the relevant market.
Universal Checkout uses the device language by default. If this language is not supported, Universal Checkout automatically falls back to English.
Supported locales
| Language | Minimum versions |
|---|---|
| Arabic |
|
| Danish |
|
| German |
|
| Greek |
|
| English |
|
| Spanish |
|
| French |
|
| Italian |
|
| Norwegian |
|
| Dutch |
|
| Polish |
|
| Portuguese |
|
| Turkish |
|
Right-to-left
Universal Checkout automatically switches to a right-to-left layout when necessary.
Theme
To customize the appearance of the SDK define the PrimerTheme object, then pass it in as an argument when configuring the SDK.
123456789
// 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.
1234567891011121314151617181920
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.
12
let cornerRadiusTheme = CornerRadiusTheme(buttons: 8, sheetView: 18)let theme = PrimerTheme(cornerRadiusTheme: cornerRadiusTheme)