Drop-in Checkout
Tier 1 -- a single component that handles auth, address, payment, and order creation.
TSX
"use client";
import { CimplifyCheckout } from "@cimplify/sdk/react";
export default function CheckoutPage() {
return (
<CimplifyCheckout
orderTypes={["pickup", "delivery", "dine_in"]}
defaultOrderType="pickup"
onComplete={(result) => {
if (result.success) {
window.location.href = "/order/" + result.order?.id;
}
}}
onError={(error) => console.error(error.code, error.message)}
/>
);
}With Explicit Client
TSX
import { createCimplifyClient } from "@cimplify/sdk";
import { CimplifyCheckout } from "@cimplify/sdk/react";
const client = createCimplifyClient({
publicKey: process.env.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY,
});
<CimplifyCheckout
client={client}
cartId="cart_123"
locationId="loc_1"
orderTypes={["pickup", "delivery"]}
enrollInLink={true}
appearance={{
theme: "light",
variables: { primaryColor: "#10B981", borderRadius: "10px" },
}}
onStatusChange={(status, context) => {
console.log(status, context.display_text);
}}
onComplete={(result) => {
console.log("Order:", result.order?.id);
console.log("Enrolled in Link:", result.enrolled_in_link);
}}
onError={(error) => console.error(error)}
/>Props
| Prop | Type | Description |
|---|---|---|
client | CimplifyClient | Required. Created via createCimplifyClient(). |
cartId? | string | Specific cart to checkout. If omitted, uses active cart. |
locationId? | string | Business location for the order. |
orderTypes? | ('pickup' | 'delivery' | 'dine_in')[] | Available order types. Built-in selector shown when multiple provided. |
defaultOrderType? | 'pickup' | 'delivery' | 'dine_in' | Pre-selected order type. Defaults to first item in orderTypes. |
enrollInLink? | boolean | Enroll customer in Cimplify Link for faster future checkouts. Defaults to true. |
appearance? | Appearance | Theme, colors, border radius, font. Keep memoized to avoid remounts. |
demoMode? | boolean | Force demo mode. Simulates checkout with delays, creates fake order. |
className? | string | CSS class for the container element. |
onComplete | (result) => void | { success, order?, error?, enrolled_in_link? } |
onError? | (error) => void | Called on unrecoverable errors. |
onStatusChange? | (status, context) => void | Status updates during checkout flow. |
Built-in Behavior
| Feature | Detail |
|---|---|
| Order type selector | Rendered automatically when multiple orderTypes provided. |
| Address field | Auto-shown for delivery orders, hidden for pickup/dine-in. |
| Cart summary | When a cartId is provided (or resolved automatically), the SDK sends cart data to the iframe for an inline order summary with line items, tax, and totals. |
| Built-in submit button | The checkout element renders its own submit button inside the iframe. When pressed, it emits request_submit to trigger the checkout flow. |
| Test mode indicator | Shown automatically when using a pk_test_ key. |
| Demo mode | Simulated checkout flow with artificial delays, creates a fake order. |
Status Tracking
TSX
<CimplifyCheckout
onStatusChange={(status, context) => {
// status: "preparing" | "recovering" | "processing" | "awaiting_authorization"
// | "polling" | "finalizing" | "success" | "failed"
console.log(status, context.display_text);
}}
onComplete={(result) => {
if (result.success) {
router.push('/order/' + result.order?.id);
}
}}
/>