Loading...
Mobile SDKiOS

Quick start

A complete working checkout screen that collects a payment and prints the result.


The example below is a checkout screen that collects EUR 77.00 from a customer and prints the result. Each part is explained in the .

import SwiftUI
import VoltCheckout

@MainActor
final class CheckoutModel: ObservableObject {
    let checkout = VoltCheckout(
        configuration: .sandbox(
            customerId: "your-customer-id",
            tokenProvider: { try await YourAuth.fetchAccessToken() }
        )
    )

    @Published var result: CheckoutResult?

    func pay() async {
        let intent = PaymentIntent {
            Amount(currency: .EUR, minorUnits: 7700)
            Payer(reference: "user@example.com") {
                Payer.Person(firstName: "Jane", lastName: "Doe")
            }
            TransactionType.goods
        }
        guard let intent else { return }

        result = await checkout.payment(with: intent)
    }
}

struct CheckoutView: View {
    @StateObject private var model = CheckoutModel()

    var body: some View {
        VStack(spacing: 24) {
            Text(VoltCheckout.AgreementClause.attributedText)
                .multilineTextAlignment(.center)
                .tint(.accentColor)

            Button("Pay EUR 77.00") {
                Task { await model.pay() }
            }
            .buttonStyle(.borderedProminent)

            if let result = model.result {
                Text(result.debugDescription)
                    .font(.caption)
            }
        }
        .padding()
        .voltCheckoutSheet(using: model.checkout)
    }
}

The .voltCheckoutSheet(using:) modifier is what makes the SDK's full-screen flow appear when you call checkout.payment(with:). It must be attached to a view that is visible when you start the flow.

How is this guide?

Last updated on