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
Arabicv2.30.0
Bulgarianv2.30.0
Catalanv2.27.0
Czechv2.30.0
Danishv0.15.5
Germanv0.15.5
Greekv0.15.5
Englishv0.1.0
Spanishv0.15.5
Spanish (Argentina)v2.30.0
Spanish (Mexico)v2.30.0
Estonianv2.30.0
Finnishv2.27.0
Frenchv0.15.5
Hebrewv2.27.0
Croatianv2.30.0
Hungarianv2.30.0
Indonesianv2.27.0
Italianv0.15.5
Japanesev2.30.0
Koreanv2.27.0
Lithuanianv2.27.0
Latvianv2.30.0
Malayv2.19.2
Norwegianv0.15.5
Dutchv0.15.5
Polishv0.15.5
Portuguesev0.15.5
Portuguese (Brazil)v2.30.0
Romanianv2.30.0
Russianv2.30.0
Slovakv2.30.0
Slovenianv2.27.0
Serbianv2.27.0
Swedishv1.15.5
Thaiv2.19.2
Turkishv0.15.5
Ukrainianv2.27.0
Vietnamesev2.30.0
Chinese (Mainland China - Simplified characters)v2.19.2
[BETA] Chinese (Hong-Kong - Traditional characters)v2.19.2
[BETA] Chinese (Taiwan - Traditional characters)v2.19.2

​
Right-to-left

Universal Checkout automatically switches to a right-to-left layout when necessary.

​
Theme

To customize the appearance of the SDK, pass a theme mapping under uiOptions in PrimerSettings, for example:

JSON
uiOptions: {
  /* ... other options ... */
  theme: {
      colors: {
          mainColor: {
              red: 7,
              green: 138,
              blue: 88,
              alpha: 255
          },
          background: {
              red: 216,
              green: 242,
              blue: 240,
              alpha: 255
          },
          text: {
              red: 7,
              green: 138,
              blue: 88,
              alpha: 255
          },
          disabled: {
              red: 100,
              green: 100,
              blue: 100,
              alpha: 255
          },
          error: {
              red: 235,
              green: 126,
              blue: 16,
              alpha: 255
          },
          borders: {
              red: 209,
              green: 96,
              blue: 209,
              alpha: 255
          }
      },
      darkModeColors: {
          mainColor: {
              red: 1,
              green: 255,
              blue: 1,
              alpha: 255
          },
          background: {
              red: 255,
              green: 1,
              blue: 255,
              alpha: 255
          },
          text: {
              red: 1,
              green: 255,
              blue: 1,
              alpha: 255
          },
          disabled: {
              red: 100,
              green: 100,
              blue: 100,
              alpha: 255
          },
          error: {
              red: 173,
              green: 10,
              blue: 10,
              alpha: 255
          },
          borders: {
              red: 209,
              green: 96,
              blue: 209,
              alpha: 255
          }
      }
  }
},

Minimally, you can set only mainColor and background to achieve a basic two-tone theme. Other properties can be used to override specific styles:

PropertyDescription
mainColorThe default primary color used to theme text and accents.
backgroundThe default background color for views.
textOverrides mainColor with a specific color for text labels.
disabledOverrides mainColor with a specific color for disabled buttons.
errorA specific color for validation error label text. Red by default.
bordersOverrides mainColor for button borders and view borders.