Primer Platform
Client Session
Client Session
Client Token
Client Token
- Web
- Android
- iOS
Primer Dashboard
Primer Dashboard
Diagnostics ID
Diagnostics ID
diagnosticsId so the team can locate the exact request in their logs.- Web
- Android
- iOS
SDK & Architecture
Primer Checkout SDK
Primer Checkout SDK
@primer-io/primer-js), Android (io.primer:checkout), and iOS (PrimerSDK).Web Components (Web)
Web Components (Web)
<primer-checkout> and <primer-card-form>) work in any framework. See Core Concepts.Shadow DOM (Web)
Shadow DOM (Web)
Controller (Android)
Controller (Android)
remember* function (e.g., rememberPrimerCheckoutController()). Provides observable state via StateFlow and action methods. Follows the standard Jetpack Compose pattern.Composable (Android)
Composable (Android)
@Composable that describes a piece of UI. All Android SDK components are Composables that integrate naturally with Jetpack Compose.StateFlow (Android)
StateFlow (Android)
StateFlow<PrimerCheckoutState> for reactive UI updates. Collect with collectAsStateWithLifecycle() in Compose.Session (iOS)
Session (iOS)
@MainActor object that owns the checkout lifecycle and exposes the state and actions for a specific part of the checkout. PrimerCheckoutSession owns the top-level lifecycle and is attached with the .primerCheckoutSession(_:theme:onCompletion:) modifier. Per-feature sessions (PrimerCardFormSession and PrimerSelectionSession) are passed to the section slots of the composable views so you can read state and call actions from your custom UI. Examples are the cardDetails, billingAddress and submitButton slots of PrimerCardForm, and the header slot of PrimerPaymentMethods.@Published / ObservableObject (iOS)
@Published / ObservableObject (iOS)
ObservableObject whose @Published properties drive reactive UI updates. PrimerCheckoutSession publishes phase and clientSession. PrimerCardFormSession and PrimerSelectionSession publish state, and PrimerSelectionSession also publishes vaultedPaymentMethods. Observe a session with @StateObject (when you own it) or @ObservedObject (when it is passed into a slot), and read these properties directly in your view’s body.PrimerCheckoutPresenter (iOS)
PrimerCheckoutPresenter (iOS)
UIViewController and delivers results through a PrimerCheckoutPresenterDelegate. Use this when integrating the SDK in a UIKit-based app.Customization point
Customization point
@Composable lambda parameters (e.g., the submitButton parameter on PrimerCardForm). On iOS, these are slot parameters on the composable views (for example, the submitButton slot on PrimerCardForm). Section slots receive the relevant session so they can read state and call actions. Examples are the cardDetails, billingAddress and submitButton slots on PrimerCardForm, and the header and emptyState slots on PrimerPaymentMethods. Row slots, such as method on PrimerPaymentMethods, receive the row’s data and a select action instead.Design Token
Design Token
--primer-color-brand). On Android, they are properties in PrimerTheme. On iOS, they are properties in PrimerCheckoutTheme.Defaults Object
Defaults Object
CardFormDefaults, PrimerCheckoutSheetDefaults) that provides pre-built sub-components. Use them to customize specific parts while keeping others at their defaults.On iOS, the CardFormDefaults, PaymentMethodsDefaults and VaultedPaymentMethodsDefaults namespaces provide the default slot bodies and per-field building blocks. Examples are CardFormDefaults.submitButton(_:) and CardFormDefaults.cardNumber(_:).Hosted Input (Web)
Hosted Input (Web)
Payment Concepts
Payment Method
Payment Method
PAYMENT_CARD, PAYPAL, or APPLE_PAY.Vault / Vaulted Payment Methods
Vault / Vaulted Payment Methods
primer:vault-methods-update event and the <primer-vault-manager> component. On iOS, read vaultedPaymentMethods on PrimerSelectionSession, which is also available as selection on your PrimerCheckoutSession. Call selectVaulted(_:) to pay with a saved method and delete(_:) to remove one. You can also render the PrimerVaultedPaymentMethods view. It shows the selected saved method with a way to open the full list. See SDK Options — Vault.Payment Instrument Data
Payment Instrument Data
network (e.g. VISA), last4Digits, expirationMonth, and expirationYear. You access it via the paymentInstrumentData property on a vaulted payment object.PCI Compliance
PCI Compliance
3DS (3D Secure)
3DS (3D Secure)
AUTO Payment Handling
AUTO Payment Handling
PrimerSettings(paymentHandling: .manual), it fails and reports a .failure. With PrimerCheckoutSession, that .failure ends the session.Co-badge
Co-badge
Events
primer:ready
primer:ready
event.detail) which provides SDK methods like refreshSession(), getPaymentMethods(), and setCardholderName(). See Events Guide.On Android, the equivalent is observing checkout.state for PrimerCheckoutState.Ready via StateFlow.On iOS, observe phase on your PrimerCheckoutSession and wait for .ready. From then on, clientSession is set. onCompletion only delivers outcomes (.failure, .success and .dismissed), never .initializing or .ready.primer:payment-success / primer:payment-failure
primer:payment-success / primer:payment-failure
primer:payment-success fires after a successful payment and the event detail includes the payment summary (order ID, last 4 digits, network). primer:payment-failure fires after a failed payment and includes the error object with the diagnosticsId. These are your primary integration points for redirects, confirmations, and error logging.checkout.state and handle the terminal PrimerCheckoutState.Success and PrimerCheckoutState.Failure cases.On iOS, results arrive as a PrimerCheckoutState in the onCompletion closure on PrimerCheckout or the .primerCheckoutSession(_:theme:onCompletion:) modifier. .failure(error, checkoutData) arrives once for each failed payment attempt, and the checkout stays open for a retry. The final .success(result) or .dismissed then arrives exactly once. With PrimerCheckoutSession, a failure during initialization arrives as a single .failure and ends the session. No retry screen appears, and no other outcome follows. In UIKit, implement these methods on the PrimerCheckoutPresenterDelegate: primerCheckoutPresenterDidCompleteWithSuccess(_:), primerCheckoutPresenterDidFailWithError(_:checkoutData:) and primerCheckoutPresenterDidDismiss(). The delegate methods follow the same rules.primer:payment-start
primer:payment-start
event.preventDefault() to run validation before the payment is created. The event detail includes continuePaymentCreation() and abortPaymentCreation() handlers to control the payment flow. See Events Guide for usage.On Android, payment interception is not available in the Composable module. Use the headless API (onBeforePaymentCreated) if you need this capability.On iOS, payment interception is available only in the inline integration. Set the onBeforePaymentCreate handler on the PrimerCheckoutSession. It runs before every payment, saved payment methods included. Its decision handler lets you supply an idempotency key or abort payment creation. PrimerCheckout and PrimerCheckoutPresenter do not expose it.Integration Modes
Drop-in (Sheet / Full Component)
Drop-in (Sheet / Full Component)
<primer-checkout>. On Android, use PrimerCheckoutSheet. On iOS, use PrimerCheckout as a SwiftUI view or PrimerCheckoutPresenter for UIKit. The SDK handles navigation between screens.Inline (Custom Layout)
Inline (Custom Layout)
<primer-card-form>. On Android, use PrimerCheckoutHost with child composables. On iOS, hold a PrimerCheckoutSession and apply the .primerCheckoutSession(_:theme:onCompletion:) modifier, then place composable views like PrimerCardForm and PrimerPaymentMethods in your own layout — override their @ViewBuilder slots to build custom forms. You control navigation and layout. On iOS, the SDK still presents follow-up screens in its own sheet over your content. These are the processing, success and failure screens, native payment method screens such as Klarna or ACH, saved payment method management, and CVV entry.