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.
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:
StructPrimerCheckoutTheme parameterControls
RadiusOverridesradiusCorner radius scale
BorderWidthOverridesborderWidthBorder / stroke thickness
SizeOverridessizesFixed 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
    )
}
TokenTypeDefaultDescription
primerRadiusXsmallCGFloat?2Subtle rounding for the smallest elements
primerRadiusSmallCGFloat?4Small radius for chips and tags
primerRadiusMediumCGFloat?8Default radius for input fields and cards
primerRadiusLargeCGFloat?12Large radius for sheets and prominent surfaces
primerRadiusBaseCGFloat?4Base 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
    )
}
TokenTypeDefaultDescription
primerBorderWidthThinCGFloat?1Input borders and dividers
primerBorderWidthMediumCGFloat?2Focus rings and selected borders
primerBorderWidthThickCGFloat?3Heavy 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
    )
}
TokenTypeDefaultDescription
primerSizeSmallCGFloat?16Small icons
primerSizeMediumCGFloat?20Default icons
primerSizeLargeCGFloat?24Large icons
primerSizeXlargeCGFloat?32Payment method icons
primerSizeXxlargeCGFloat?44Touch targets
primerSizeXxxlargeCGFloat?56Large touch targets
primerSizeBaseCGFloat?4Base 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.

​
See also

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.