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

LanguageMinimum versions
Arabicv1.29.0
Bulgarianv2.35.0
Catalanv2.30.0
Czechv2.35.0
Danishv1.26.0
Germanv1.26.0
Greekv1.26.0
Englishv1.0.0
Spanishv1.26.0
Spanish (Argentina)v2.35.0
Spanish (Mexico)v2.35.0
Estonianv2.35.0
Finnishv2.30.0
Frenchv1.26.0
Hebrewv2.30.0
Croatianv2.35.0
Hungarianv2.35.0
Indonesianv2.30.0
Italianv1.26.0
Japanesev2.35.0
Koreanv2.30.0
Lithuanian (Lithuania)v2.30.0
Latvianv2.35.0
Malayv2.16.3
Norwegianv1.26.0
Dutchv1.26.0
Polishv1.26.0
Portuguesev1.26.0
Portuguese (Brazil)v2.35.0
Romanianv2.35.0
Russianv2.35.0
Slovakv2.35.0
Slovenianv2.30.0
Serbianv2.30.0
Swedishv1.0.2
Thaiv2.16.3
Turkishv1.26.0
Ukrainianv2.30.0
Vietnamesev2.35.0
Chinese (Mainland China - Simplified characters)v2.16.3
[BETA] Chinese (Hong-Kong - Traditional characters)v2.16.3
[BETA] Chinese (Taiwan - Traditional characters)v2.16.3

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.

SWIFT
// 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.

SWIFT
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.

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