PrimerCheckoutTheme

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

Parameter	Type	Default	Description
`colors`	`ColorOverrides?`	`nil`	Color token overrides. `nil` uses internal defaults.
`radius`	`RadiusOverrides?`	`nil`	Corner radius token overrides. `nil` uses internal defaults.
`spacing`	`SpacingOverrides?`	`nil`	Spacing (padding and margin) token overrides. `nil` uses internal defaults.
`sizes`	`SizeOverrides?`	`nil`	Size token overrides for icons and touch targets. `nil` uses internal defaults.
`typography`	`TypographyOverrides?`	`nil`	Typography token overrides (font, weight, size, line height, letter spacing). `nil` uses internal defaults.
`borderWidth`	`BorderWidthOverrides?`	`nil`	Border 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.

Property	Type	Description
`colors`	`ColorOverrides?`	The color token overrides, or `nil` for defaults.
`radius`	`RadiusOverrides?`	The radius token overrides, or `nil` for defaults.
`spacing`	`SpacingOverrides?`	The spacing token overrides, or `nil` for defaults.
`sizes`	`SizeOverrides?`	The size token overrides, or `nil` for defaults.
`typography`	`TypographyOverrides?`	The typography token overrides, or `nil` for defaults.
`borderWidth`	`BorderWidthOverrides?`	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.

Group	Override type	Covers	Reference
Colors	`ColorOverrides`	Brand, grays, semantic, text, border, icon, and state colors	Color tokens
Spacing	`SpacingOverrides`	Padding and margin scale	Spacing tokens
Typography	`TypographyOverrides`	Title and body text styles	Typography tokens
Radius	`RadiusOverrides`	Corner radius scale	Shape tokens
Sizes	`SizeOverrides`	Icon and touch-target sizes	Shape tokens
Border width	`BorderWidthOverrides`	Thin, medium, and thick border widths	Shape 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 point	Parameter	Reference
`PrimerCheckout` (SwiftUI managed view)	`primerTheme`	PrimerCheckout
`PrimerCheckoutSession` (custom SwiftUI layout)	`theme`	PrimerCheckoutSession
`PrimerCheckoutPresenter` (UIKit)	`primerTheme`	PrimerCheckoutPresenter

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.

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.

​Declaration

​Initializer

​Parameters

​Properties

​Token groups

​Applying a theme

​With the managed view

​With a custom layout

​Theme example

​See also

Color tokens

Typography tokens

Spacing tokens

Shape tokens

Declaration

Initializer

Parameters

Properties

Token groups

Applying a theme

With the managed view

With a custom layout

Theme example

See also