Shape Tokens - Primer

Primer Checkout iOS SDK is currently in beta (v3.0.0-beta.1). The API is subject to change before the stable release.

Shape tokens control the geometry of Primer Checkout components: how rounded their corners are, how thick their borders are, and how large their fixed-dimension elements (icons, touch targets) render. There are three override structs, each passed to the matching parameter of PrimerCheckoutTheme:

Struct	`PrimerCheckoutTheme` parameter	Controls
`RadiusOverrides`	`radius`	Corner radius scale
`BorderWidthOverrides`	`borderWidth`	Border / stroke thickness
`SizeOverrides`	`sizes`	Fixed component dimensions

Every property is an optional CGFloat?. Values you leave as nil fall back to the SDK’s internal design tokens, so you only override what you need.

All three structs are Equatable and annotated @available(iOS 15.0, *), matching the platform minimum for Primer Checkout.

RadiusOverrides

Corner radius scale, in points. Property names match the SDK’s internal DesignTokens.

@available(iOS 15.0, *)
public struct RadiusOverrides: Equatable {
    public let primerRadiusXsmall: CGFloat?
    public let primerRadiusSmall: CGFloat?
    public let primerRadiusMedium: CGFloat?
    public let primerRadiusLarge: CGFloat?
    public let primerRadiusBase: CGFloat?

    public init(
        primerRadiusXsmall: CGFloat? = nil,
        primerRadiusSmall: CGFloat? = nil,
        primerRadiusMedium: CGFloat? = nil,
        primerRadiusLarge: CGFloat? = nil,
        primerRadiusBase: CGFloat? = nil
    )
}

Token	Type	Default	Description
`primerRadiusXsmall`	`CGFloat?`	2	Subtle rounding for the smallest elements
`primerRadiusSmall`	`CGFloat?`	4	Small radius for chips and tags
`primerRadiusMedium`	`CGFloat?`	8	Default radius for input fields and cards
`primerRadiusLarge`	`CGFloat?`	12	Large radius for sheets and prominent surfaces
`primerRadiusBase`	`CGFloat?`	4	Base unit the radius scale derives from

BorderWidthOverrides

Border and stroke thickness, in points.

@available(iOS 15.0, *)
public struct BorderWidthOverrides: Equatable {
    public let primerBorderWidthThin: CGFloat?
    public let primerBorderWidthMedium: CGFloat?
    public let primerBorderWidthThick: CGFloat?

    public init(
        primerBorderWidthThin: CGFloat? = nil,
        primerBorderWidthMedium: CGFloat? = nil,
        primerBorderWidthThick: CGFloat? = nil
    )
}

Token	Type	Default	Description
`primerBorderWidthThin`	`CGFloat?`	1	Input borders and dividers
`primerBorderWidthMedium`	`CGFloat?`	2	Focus rings and selected borders
`primerBorderWidthThick`	`CGFloat?`	3	Heavy emphasis borders

SizeOverrides

Fixed component dimensions, in points. Used for icons, touch targets, and other elements with an intrinsic size.

@available(iOS 15.0, *)
public struct SizeOverrides: Equatable {
    public let primerSizeSmall: CGFloat?
    public let primerSizeMedium: CGFloat?
    public let primerSizeLarge: CGFloat?
    public let primerSizeXlarge: CGFloat?
    public let primerSizeXxlarge: CGFloat?
    public let primerSizeXxxlarge: CGFloat?
    public let primerSizeBase: CGFloat?

    public init(
        primerSizeSmall: CGFloat? = nil,
        primerSizeMedium: CGFloat? = nil,
        primerSizeLarge: CGFloat? = nil,
        primerSizeXlarge: CGFloat? = nil,
        primerSizeXxlarge: CGFloat? = nil,
        primerSizeXxxlarge: CGFloat? = nil,
        primerSizeBase: CGFloat? = nil
    )
}

Token	Type	Default	Description
`primerSizeSmall`	`CGFloat?`	16	Small icons
`primerSizeMedium`	`CGFloat?`	20	Default icons
`primerSizeLarge`	`CGFloat?`	24	Large icons
`primerSizeXlarge`	`CGFloat?`	32	Payment method icons
`primerSizeXxlarge`	`CGFloat?`	44	Touch targets
`primerSizeXxxlarge`	`CGFloat?`	56	Large touch targets
`primerSizeBase`	`CGFloat?`	4	Base unit the size scale derives from

Overriding shape tokens

Pass any combination of the three structs to PrimerCheckoutTheme. Unset properties inherit the SDK defaults.

import SwiftUI
import PrimerSDK

let theme = PrimerCheckoutTheme(
    radius: RadiusOverrides(
        primerRadiusMedium: 12,
        primerRadiusLarge: 20
    ),
    sizes: SizeOverrides(
        primerSizeXlarge: 40,
        primerSizeXxlarge: 48
    ),
    borderWidth: BorderWidthOverrides(
        primerBorderWidthThin: 1.5,
        primerBorderWidthMedium: 2.5
    )
)

Apply the theme on the prebuilt modal by passing it to primerTheme:

struct CheckoutView: View {
    let clientToken: String

    var body: some View {
        PrimerCheckout(
            clientToken: clientToken,
            primerTheme: theme
        ) { state in
            handle(state)
        }
    }
}

When you embed the composable views inline, pass the theme to the PrimerCheckoutSession instead. The composable views resolve the merged tokens from the session.

struct InlineCheckoutView: View {
    @StateObject private var session = PrimerCheckoutSession(
        clientToken: clientToken,
        theme: theme
    )

    var body: some View {
        ScrollView {
            PrimerCardForm()
        }
        .primerCheckoutSession(session) { state in
            handle(state)
        }
    }
}

Because every token is optional, you can override a single value, for example RadiusOverrides(primerRadiusMedium: 12), and leave the rest of the scale untouched. Combine shape overrides with color tokens and the other override structs on PrimerCheckoutTheme to build a complete custom appearance.

PrimerTheme

Assemble shape, color, spacing, and typography overrides into a theme.

Color Tokens

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

Spacing Tokens

Override the spacing scale used for layout and padding.

Typography Tokens

Override font family, weight, size, and line height per text style.

​RadiusOverrides

​BorderWidthOverrides

​SizeOverrides

​Overriding shape tokens

​See also

PrimerTheme

Color Tokens

Spacing Tokens

Typography Tokens

RadiusOverrides

BorderWidthOverrides

SizeOverrides

Overriding shape tokens

See also