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";
 
await ShopOpsCheckout.present({
  sessionToken,
  offerId,
  prefill: { email: shopperEmail, shippingCountry: "US" },
});

SwiftUI


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

Jetpack Compose


import com.shopops.agenticshopping.ShopOps
import com.shopops.agenticshopping.ui.ShopOpsCheckout
import com.shopops.agenticshopping.model.ShopOpsCheckoutPrefill
 
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.