Skip to main content
Primer Checkout is a standard SwiftUI View. Integrate it with any SwiftUI navigation pattern.
struct ContentView: View {
  @State private var path = NavigationPath()
  let clientToken: String

  var body: some View {
    NavigationStack(path: $path) {
      CartView(onCheckout: {
        path.append("checkout")
      })
      .navigationDestination(for: String.self) { destination in
        if destination == "checkout" {
          PrimerCheckout(
            clientToken: clientToken,
            onCompletion: { state in
              if case .success = state {
                path.append("confirmation")
              }
            }
          )
          .navigationTitle("Payment")
          .navigationBarTitleDisplayMode(.inline)
        }
      }
    }
  }
}

Sheet presentation

struct ContentView: View {
  @State private var showCheckout = false
  let clientToken: String

  var body: some View {
    Button("Checkout") {
      showCheckout = true
    }
    .sheet(isPresented: $showCheckout) {
      PrimerCheckout(
        clientToken: clientToken,
        onCompletion: { state in
          if case .success = state {
            showCheckout = false
          }
        }
      )
    }
  }
}

Full-screen cover

struct ContentView: View {
  @State private var showCheckout = false
  let clientToken: String

  var body: some View {
    Button("Checkout") {
      showCheckout = true
    }
    .fullScreenCover(isPresented: $showCheckout) {
      NavigationView {
        PrimerCheckout(
          clientToken: clientToken,
          onCompletion: { state in
            if case .success = state, case .dismissed = state {
              showCheckout = false
            }
          }
        )
        .navigationTitle("Payment")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
          ToolbarItem(placement: .cancellationAction) {
            Button("Cancel") {
              showCheckout = false
            }
          }
        }
      }
    }
  }
}

Dismissal handling

Handle checkout dismissal to keep navigation state consistent:
PrimerCheckout(
  clientToken: clientToken,
  onCompletion: { state in
    switch state {
    case .success:
      // Navigate forward
      showCheckout = false
      showConfirmation = true
    case .dismissed:
      // User swiped to dismiss or tapped close
      showCheckout = false
    case .failure:
      // Error is shown in the checkout UI — don't dismiss
      break
    default:
      break
    }
  }
)

See also

UIKit integration

Use with UIKit

Handle payment result

React to payment outcomes