Skip to main content
Primer Checkout iOS SDK is currently in beta (v3.0.0-beta.1). The API is subject to change before the stable release.
PrimerCheckoutTheme is the single container for design-token overrides. Pass it to the entry-point APIs to restyle the checkout UI without replacing Primer’s internal token system. Internally, the SDK ships auto-generated DesignTokens (light) and DesignTokensDark (dark) values that remain the source of truth. When you supply a PrimerCheckoutTheme, the SDK merges your overrides on top of those defaults — any nil value falls back to the internal default. You only set the tokens you want to change.
Every override property is optional. A PrimerCheckoutTheme() with no arguments applies the SDK’s default appearance, so you can start from the defaults and override one group, or one token, at a time.

​
Declaration

@available(iOS 15.0, *)
public struct PrimerCheckoutTheme: Equatable

​
Initializer

public init(
  colors: ColorOverrides? = nil,
  radius: RadiusOverrides? = nil,
  spacing: SpacingOverrides? = nil,
  sizes: SizeOverrides? = nil,
  typography: TypographyOverrides? = nil,
  borderWidth: BorderWidthOverrides? = nil
)

​
Parameters

ParameterTypeDefaultDescription
colorsColorOverrides?nilColor token overrides. nil uses internal defaults.
radiusRadiusOverrides?nilCorner radius token overrides. nil uses internal defaults.
spacingSpacingOverrides?nilSpacing (padding and margin) token overrides. nil uses internal defaults.
sizesSizeOverrides?nilSize token overrides for icons and touch targets. nil uses internal defaults.
typographyTypographyOverrides?nilTypography token overrides (font, weight, size, line height, letter spacing). nil uses internal defaults.
borderWidthBorderWidthOverrides?nilBorder width token overrides. nil uses internal defaults.

​
Properties

PrimerCheckoutTheme is Equatable and exposes one immutable property per override group. Each is the optional value you passed to the initializer.
PropertyTypeDescription
colorsColorOverrides?The color token overrides, or nil for defaults.
radiusRadiusOverrides?The radius token overrides, or nil for defaults.
spacingSpacingOverrides?The spacing token overrides, or nil for defaults.
sizesSizeOverrides?The size token overrides, or nil for defaults.
typographyTypographyOverrides?The typography token overrides, or nil for defaults.
borderWidthBorderWidthOverrides?The border width token overrides, or nil for defaults.

​
Token groups

A theme is made up of six override groups. Each group is its own optional struct whose properties are all optional, so you only specify the tokens you want to change. The four documentation pages below cover the full property list, types, and defaults for every group.
GroupOverride typeCoversReference
ColorsColorOverridesBrand, grays, semantic, text, border, icon, and state colorsColor tokens
SpacingSpacingOverridesPadding and margin scaleSpacing tokens
TypographyTypographyOverridesTitle and body text stylesTypography tokens
RadiusRadiusOverridesCorner radius scaleShape tokens
SizesSizeOverridesIcon and touch-target sizesShape tokens
Border widthBorderWidthOverridesThin, medium, and thick border widthsShape tokens
The Shape tokens page documents three groups together: RadiusOverrides, SizeOverrides, and BorderWidthOverrides.

​
Applying a theme

PrimerCheckoutTheme is accepted by all three entry points. The managed view and the UIKit presenter take it as primerTheme; the session takes it as theme.
Entry pointParameterReference
PrimerCheckout (SwiftUI managed view)primerThemePrimerCheckout
PrimerCheckoutSession (custom SwiftUI layout)themePrimerCheckoutSession
PrimerCheckoutPresenter (UIKit)primerThemePrimerCheckoutPresenter

​
With the managed view

import SwiftUI
import PrimerSDK

struct CheckoutView: View {
  let clientToken: String

  var body: some View {
    PrimerCheckout(
      clientToken: clientToken,
      primerTheme: brandTheme
    )
  }
}

​
With a custom layout

import SwiftUI
import PrimerSDK

struct CustomCheckoutView: View {
  @StateObject private var session: PrimerCheckoutSession

  init(clientToken: String) {
    _session = StateObject(
      wrappedValue: PrimerCheckoutSession(
        clientToken: clientToken,
        theme: brandTheme
      )
    )
  }

  var body: some View {
    ScrollView {
      PrimerPaymentMethods()
      PrimerCardForm()
    }
    .primerCheckoutSession(session) { state in
      // React to the terminal state.
    }
  }
}

​
Theme example

Build a theme by composing the override groups. Each group only sets the tokens you care about; everything else inherits the SDK defaults. 
import SwiftUI
import PrimerSDK

let brandTheme = PrimerCheckoutTheme(
  colors: ColorOverrides(
    primerColorBrand: Color(red: 0.91, green: 0.51, blue: 0.47),
    primerColorBackground: .white,
    primerColorTextPrimary: Color(white: 0.1)
  ),
  radius: RadiusOverrides(
    primerRadiusMedium: 12,
    primerRadiusLarge: 16
  ),
  spacing: SpacingOverrides(
    primerSpaceMedium: 16,
    primerSpaceLarge: 20
  ),
  typography: TypographyOverrides(
    titleLarge: TypographyOverrides.TypographyStyle(
      font: "Inter",
      weight: .semibold,
      size: 18,
      lineHeight: 24
    ),
    bodyMedium: TypographyOverrides.TypographyStyle(
      font: "Inter",
      weight: .regular,
      size: 14,
      lineHeight: 20
    )
  ),
  borderWidth: BorderWidthOverrides(
    primerBorderWidthThin: 1,
    primerBorderWidthMedium: 2
  )
)
Start small. Override primerColorBrand alone and Primer’s default tokens fill in the rest of the palette, then layer in additional tokens as your branding requires.

​
See also

Color tokens

Override brand, semantic, text, border, and icon colors.

Typography tokens

Customize title and body text styles.

Spacing tokens

Tune padding and margin values.

Shape tokens

Radius, size, and border-width overrides.