Quickstart

Build a working storefront in 5 minutes with the React SDK, or integrate server-side with the REST API.

Fastest path: use @cimplify/sdk/react with drop-in checkout. For server-side flows, jump to the REST API section.

React SDK (recommended)

1. Install

curl

npm install @cimplify/sdk

2. Environment variable

.env.local

NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY=pk_test_your_public_key

3. Add CimplifyProvider

app/providers.tsx

'use client'

import { CimplifyProvider } from '@cimplify/sdk/react'

export default function Providers({ children }: { children: React.ReactNode }) {
  return <CimplifyProvider>{children}</CimplifyProvider>
}

// Then wrap your layout:
// app/layout.tsx
import Providers from './providers'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

4. Product list with add-to-cart

app/page.tsx

'use client'

import { useProducts, useCart } from '@cimplify/sdk/react'
import Link from 'next/link'

export default function StorePage() {
  const { data: products, isLoading } = useProducts()
  const { cart, addItem } = useCart()

  if (isLoading) return <p>Loading...</p>

  return (
    <div>
      <header>
        <Link href="/checkout">Cart ({cart?.items.length ?? 0})</Link>
      </header>
      <div className="grid grid-cols-3 gap-4">
        {products?.items.map((product) => (
          <div key={product.id}>
            <h2>{product.name}</h2>
            <p>{product.price.formatted}</p>
            <button onClick={() => addItem({ productId: product.id, quantity: 1 })}>
              Add to cart
            </button>
          </div>
        ))}
      </div>
    </div>
  )
}

5. Checkout page

app/checkout/page.tsx

'use client'

import { CimplifyCheckout, useCimplify } from '@cimplify/sdk/react'
import { useRouter } from 'next/navigation'

export default function CheckoutPage() {
  const { client } = useCimplify()
  const router = useRouter()

  return (
    <CimplifyCheckout
      client={client}
      onComplete={(result) => {
        if (result.success && result.order) {
          router.push(`/order/${result.order.id}`)
        }
      }}
    />
  )
}

curl

npm run dev

Open http://localhost:3000 -- you have a working storefront with products, cart, and checkout.

Next steps (React)

React Hooks

useProducts, useCart, useOrders, and more

Drop-in Checkout

Full prop reference and customization

Test Mode

Use pk_test keys and test payment cards

Appearance

Theme and style the checkout UI

REST API quickstart

For server-side integrations. Get a secret key from app.cimplify.io/settings/developer.

List products

cURL

curl https://api.cimplify.io/v1/businesses/{business_id}/catalogue/products \
  -H "X-API-Key: sk_test_your_api_key"

Create a cart and add an item