CheckoutComponents

Last updated: December 3, 2025

Initializes a CheckoutComponentConfiguration instance.


1/**
2   Initializes a new instance of `Configuration`.
3   - Parameter paymentSession: Payment session details (optional for sessionless components)
4   - Parameter publicKey: Public key to submit payment session
5   - Parameter environment: Environment selection to interact with
6   - Parameter appearance: Design token for the user interface elements
7   - Parameter locale: Locale to be used by the SDK
8   - Parameter translations: Custom translation override strings
9   - Parameter callbacks: Callbacks to handle the component lifecycle
10   */
11  public init(paymentSession: PaymentSession?,
12              publicKey: String,
13              environment: Environment,
14              appearance: DesignTokens = .init(),
15              locale: String? = nil,
16              translations: [String: [TranslationKey: String]] = [:],
17              callbacks: Callbacks) async throws(CheckoutComponents.Error)

Initializes a CheckoutComponent instance.


1// Initialize with a payment session
2let configuration = try await CheckoutComponents.Configuration(
3  paymentSession: paymentSession,
4  publicKey: "YOUR_PUBLIC_KEY",
5  environment: .sandbox,
6  callbacks: initialiseCallbacks())
7
8return CheckoutComponents(configuration: configuration)
9
10// Or initialize for sessionless components (no payment session)
11let sessionlessConfiguration = try await CheckoutComponents.Configuration(
12  paymentSession: nil,
13  publicKey: "YOUR_PUBLIC_KEY",
14  environment: .sandbox,
15  callbacks: initialiseCallbacks())
16
17return CheckoutComponents(configuration: sessionlessConfiguration)


1func initialiseCallbacks() -> CheckoutComponents.Callbacks {
2  .init(
3    onSuccess: { paymentMethod, paymentID in
4      // Handle payment success
5    },
6    onError: { paymentMethod in
7      // Handle payment error
8    }
9  )
10}

Initializes an Actionable instance for payment flow.


1// Create a `flow component` with multiple options
2try checkoutComponentsSDK.create(
3  .flow(options: [
4    .card(showPayButton: true, // show your own pay button when set to false
5          paymentButtonAction: .payment, // or `.tokenization`
6          displayCardHolderName: .top, // Position enum within the card view (.top, .bottom, .hidden)
7          addressConfiguration: addressConfiguration,
8          rememberMeConfiguration: rememberMeConfiguration),
9    .applePay(merchantIdentifier: "YOUR_MERCHANT_ID_HERE",
10              showPayButton: Bool = true) // show your own pay button when set to false
11  ])
12)
13
14// Create a specific payment method
15try checkoutComponentsSDK.create(
16  .card(showPayButton: true,
17        paymentButtonAction: .payment,
18        displayCardHolderName: .top, // Position enum within the card view (.top, .bottom, .hidden)
19        addressConfiguration: addressConfiguration,
20        rememberMeConfiguration: rememberMeConfiguration)
21)

Tip

If you use Apple Pay as a standalone component with your custom payment button, ensure you follow Apple's guidelines for showing Apple Pay logo.

Initialize a sessionless component that doesn't require a payment session.


1// Create a sessionless address component
2typealias ContactData = CheckoutComponents.ContactData
3typealias Address = CheckoutComponents.Address
4typealias Configuration = CheckoutComponents.AddressConfiguration
5
6let prefilledAddress = ContactData(address: .init(country: .unitedKingdom,
7                                                   addressLine1:  "Wenlock Works",
8                                                   addressLine2: "Shepherdess Walk",
9                                                   city: "London",
10                                                   zip: "N1 7BQ"),
11                                    phone: .init(countryCode: "+$4",
12                                                    number: "1234567890"),
13                                    name: .init(firstName: "John",
14                                                   lastName: "Doe"))
15
16let addressConfiguration = Configuration.init(data: prefilledAddress,
17                                              fields: CheckoutComponents.AddressField.billing
18                                                         + [.phone(isOptional: false)]) { collectedAddress in
19   debugPrint("Collected address: \(collectedAddress)")
20}
21
22try checkoutComponentsSDK.create(
23  .address(configuration: addressConfiguration)
24)

Updates a FlowComponent instance.


1if component.isAvailable {
2  component.render()
3}

This method only updates the UI. To update the payment session, use the handleSubmit callback.

The update() method takes the updateDetails object as a parameter, which contains the values to update. This object uses the amount property to update the purchase amount. This value must be:

Greater than zero
Expressed in the minor currency unit


1let callbacks = CheckoutComponents.Callbacks(handleSubmit: { sessionData in
2    submitPaymentSession(sessionData)
3  })
4let configuration = CheckoutComponents.Configuration(..., callbacks: callbacks)
5
6try checkoutComponentsSDK.update(with: UpdateDetails(amount: 100))

CheckoutComponents

CheckoutComponentConfiguration

Initialization

Callbacks

Methods

create(_:)

Tip

update(updateDetails)