Checkout

Checkout is a hosted purchase flow rendered inside your app. It collects shipping details, computes taxes, confirms delivery options, and completes payment.

Checkout is launched automatically when the shopper taps Buy in Product Cards. Hosts can also present it programmatically.

Web API


import { ShopOps } from '@shopops/agentic-shopping'
 
ShopOps.configure({ sessionToken })
 
const result = await ShopOps.Checkout.present({
  offerId,
  mode: 'modal',
  prefill: {
    email: shopperEmail,
    shippingCountry: 'US'
  }
})
 
console.log(result.orderId, result.receiptUrl)

React Native


import { ShopOpsCheckout } from '@shopops/agentic-shopping/react-native'
 
ShopOpsCheckout.present({
  sessionToken,
  offerId,
  prefill: { email: shopperEmail, shippingCountry: 'US' }
})

SwiftUI


import ShopOpsAgenticShopping
 
ShopOps.configure(sessionToken: sessionToken)
 
ShopOpsCheckout.present(
  offerId: offerId,
  prefill: .init(email: shopperEmail, shippingCountry: "US")
)

Jetpack Compose


import com.shopops.agenticshopping.ShopOps
import com.shopops.agenticshopping.ui.ShopOpsCheckout
 
ShopOps.configure(sessionToken = sessionToken)
 
ShopOpsCheckout.present(
  offerId = offerId,
  prefill = ShopOpsCheckoutPrefill(email = shopperEmail, shippingCountry = "US")
)

Result

Checkout returns an order confirmation and emits an event for conversation updates.


export type CheckoutResult = {
  orderId: string
  receiptUrl: string
  total: { amount: number; currency: string }
}


export type ShopOpsEvent =
  | { type: 'checkout.opened'; checkoutId: string }
  | { type: 'checkout.cancelled'; checkoutId: string }
  | { type: 'checkout.completed'; orderId: string; receiptUrl: string }
  | { type: 'error'; code: string; message: string }

On completion, the SDK clears transient checkout state but keeps the shopping session active so additional items can be purchased in the same thread.