Checkout

pnpm add @sazito/client-sdk @sazito/checkout react@18 react-dom@18

import '@sazito/checkout/styles.css';

NEXT_PUBLIC_SAZITO_DOMAIN=shop.example.com
SAZITO_STORE_DOMAIN=shop.example.com

// app/providers.tsx
'use client';

import { createSazitoClient } from '@sazito/client-sdk';
import { SazitoProvider } from '@sazito/checkout/next';

const client = createSazitoClient({
  domain: process.env.NEXT_PUBLIC_SAZITO_DOMAIN!,
});

export function Providers({ children }: { children: React.ReactNode }) {
  return <SazitoProvider client={client}>{children}</SazitoProvider>;
}

// app/layout.tsx
import '@sazito/checkout/styles.css';
import { Providers } from './providers';

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

// app/checkout/page.tsx
'use client';

import { SazitoCheckoutPage } from '@sazito/checkout/next';

export default function CheckoutPage() {
  return (
    <SazitoCheckoutPage
      credentials={{ cart: { identifier: '<cart-identifier>' } }}
      config={{ locale: 'fa', continueShoppingUrl: '/' }}
    />
  );
}

// app/checkout/[...callback]/route.ts
import { SazitoCheckout } from '@sazito/checkout/next/server';

export const { GET, POST } = SazitoCheckout({
  domain: process.env.SAZITO_STORE_DOMAIN!,
  checkoutPath: '/checkout',
}).handlers;

interface CheckoutCredentials {
  cart?: { id?: number; identifier: string };
  invoice?: { id: number; identifier: string };
  payment?: { id: number; identifier: string };
}

config={{
  theme: {
    accent: '#7c3aed',           // primary colour — buttons, active states, selected rows
    accentForeground: '#ffffff', // text rendered on top of accent
    accentSoft: '#ede9fe',       // subtle accent tint — hover, selection background
    background: '#ffffff',       // page background
    foreground: '#0f172a',       // primary text
    muted: '#f1f5f9',            // muted surface background
    mutedForeground: '#64748b',  // secondary text
    border: '#e2e8f0',           // borders and dividers
    card: '#ffffff',             // form, product card, shipping card background
    summaryBackground: '#f8fafc', // order-summary sidebar background
    danger: '#ef4444',           // error and destructive states
    success: '#22c55e',          // success and completed states
    successForeground: '#ffffff', // content on solid success surfaces
    logoBackground: '#ffffff',   // plate behind shipping-provider logos
    shippingNeutral: '#f1f5f9', // fallback surface for white shipping colors
    shippingNeutralForeground: '#475569', // content on that neutral surface
    radius: 12,                  // base border-radius in px (scaled per element)
    fontFamily: 'inherit',       // font — defaults to host page font
  },
}}

<SazitoCheckoutPage
  credentials={{ cart: { identifier: '<cart-identifier>' } }}
  config={{
    locale: 'fa',
    theme: {
      accent: 'var(--color-primary)',
      accentForeground: 'var(--color-on-primary)',
      accentSoft: 'var(--color-primary-soft)',
      background: 'var(--color-background)',
      foreground: 'var(--color-foreground)',
      muted: 'var(--color-muted)',
      mutedForeground: 'var(--color-muted-foreground)',
      border: 'var(--color-border)',
      card: 'var(--color-card)',
      summaryBackground: 'var(--color-surface)',
      danger: 'var(--color-danger)',
      success: 'var(--color-success)',
      successForeground: 'var(--color-on-success)',
      logoBackground: 'var(--color-logo-plate)',
      shippingNeutral: 'var(--color-muted)',
      shippingNeutralForeground: 'var(--color-muted-foreground)',
      fontFamily: 'var(--font-sans)',
      radius: 12,
    },
  }}
/>

:root {
  --color-primary: #6d28d9;
  --color-on-primary: #ffffff;
  --color-background: #ffffff;
  --color-foreground: #18181b;
  --color-card: #ffffff;
  --color-border: #e4e4e7;
}

[data-theme='dark'] {
  --color-background: #09090b;
  --color-foreground: #fafafa;
  --color-card: #111113;
  --color-border: #27272a;
}

<SazitoCheckoutPage
  className="store-checkout"
  credentials={{ cart: { identifier: '<cart-identifier>' } }}
/>

.szc-root.store-checkout {
  --szc-accent: var(--color-primary);
  --szc-accent-foreground: var(--color-on-primary);
  --szc-bg: var(--color-background);
  --szc-fg: var(--color-foreground);
  --szc-muted: var(--color-muted);
  --szc-muted-fg: var(--color-muted-foreground);
  --szc-border: var(--color-border);
  --szc-card: var(--color-card);
  --szc-summary-bg: var(--color-surface);
  --szc-danger: var(--color-danger);
  --szc-success: var(--color-success);
  --szc-font: var(--font-sans);
  --szc-radius: var(--radius-lg);
}

/checkout/paymentinplaceresult/payment/304/identifier/6f8a717eb211f0839e522a5358932968

pnpm --dir docs dev

http://localhost:3000/checkout-demo?mockPayment=success-minimal

config={{
  onEvent(event) {
    analytics.track(event.name, {
      step: event.step,
      value: event.value,         // order total in Rials where applicable
      ...event.metadata,
      timestamp: event.timestamp,
    });
  },
}}

<SazitoCheckoutPage
  config={{ locale: 'fa', continueShoppingUrl: '/products' }}
  emptyCart={{
    title: 'هنوز چیزی انتخاب نکرده‌اید',
    description: 'محصولات فروشگاه را ببینید و انتخاب‌های خود را به سبد اضافه کنید.',
    actionLabel: 'مشاهده محصولات',
    icon: <MyBagIcon />,
  }}
/>

<SazitoCheckoutPage
  credentials={{ cart: { identifier: '<cart-identifier>' } }}
  config={{ locale: 'fa', continueShoppingUrl: '/products' }}
  renderEmptyCart={({ continueShoppingUrl, title, description }) => (
    <EmptyCart
      actionHref={continueShoppingUrl ?? '/products'}
      actionLabel="Browse products"
      title={title}
      description={description}
    />
  )}
/>

'use client';

import { SazitoCheckoutPage } from '@sazito/checkout/next';

export function ThemeCheckout() {
  return (
    <SazitoCheckoutPage
      config={{ locale: 'fa', continueShoppingUrl: '/fa/products' }}
      getOrderDetailsUrl={(order) =>
        `/fa/orders/${encodeURIComponent(String(order.id))}?identifier=${encodeURIComponent(order.orderIdentifier)}`
      }
    />
  );
}

import type { RenderResultProps } from '@sazito/checkout/next';

function StorefrontResult({
  status,
  order,
  result,
  continueShoppingUrl,
  onRetry,
}: RenderResultProps) {
  if (status === 'pending') return <PaymentVerification />;

  if (status !== 'success') {
    return (
      <PaymentError message={result?.message} onRetry={onRetry} />
    );
  }

  return (
    <OrderSuccess
      order={order}
      continueHref={continueShoppingUrl ?? '/products'}
    />
  );
}

<SazitoCheckoutPage
  credentials={{ cart: { identifier: '<cart-identifier>' } }}
  config={{ locale: 'fa', continueShoppingUrl: '/products' }}
  renderResult={(props) => <StorefrontResult {...props} />}
/>

<CheckoutProvider client={sazito} credentials={credentials}>
  <SazitoCheckout renderResult={(props) => <StorefrontResult {...props} />} />
</CheckoutProvider>

import type { RenderButtonProps } from '@sazito/checkout/next';

<SazitoCheckoutPage
  credentials={{ cart: { identifier: '<cart-identifier>' } }}
  config={{ locale: 'fa' }}
  renderNextButton={({ loading, disabled, onClick, children }) => (
    <MyButton loading={loading} disabled={disabled} onClick={onClick}>
      {children}
    </MyButton>
  )}
  renderBackButton={({ onClick, children }) => (
    <MyGhostButton onClick={onClick}>{children}</MyGhostButton>
  )}
/>

import { Button } from '@sazito/checkout/next';

<Button asChild loading={isLoading} disabled={isDisabled} onClick={handleClick}>
  <MyButton variant="filled">Continue</MyButton>
</Button>

import { Field } from '@sazito/checkout/next';

<Field label="Email" id="email" error={errors.email} asChild>
  <MyInput placeholder="you@example.com" />
</Field>

import { Spinner } from '@sazito/checkout/next';

<Spinner asChild>
  <MyLoadingIndicator />
</Spinner>

import { ErrorBanner } from '@sazito/checkout/next';

<ErrorBanner message={errorMessage} asChild>
  <MyAlert />
</ErrorBanner>

import { SectionTitle } from '@sazito/checkout/next';

<SectionTitle asChild>
  <h2 className="text-xl font-bold">Payment method</h2>
</SectionTitle>

import { ProductPlaceholder } from '@sazito/checkout/next';

<ProductPlaceholder asChild>
  <img src="/fallback-product.png" alt="" />
</ProductPlaceholder>

'use client';

import { useCheckout } from '@sazito/checkout/next';

export function DiscountWidget() {
  const { state, actions } = useCheckout();

  return (
    <div>
      <input
        value={state.discountCode}
        onChange={(e) => actions.setDiscountCode(e.target.value)}
      />
      <button
        onClick={() => actions.applyDiscount()}
        disabled={state.flags.applyingDiscount}
      >
        Apply
      </button>
      {/* Invalid/expired codes set an inline error, not the global banner. */}
      {state.discountError ? <p role="alert">{state.discountError}</p> : null}
      {state.appliedDiscountCode ? (
        <button onClick={() => actions.removeDiscount()}>
          Remove {state.appliedDiscountCode}
        </button>
      ) : null}
    </div>
  );
}

import {
  CheckoutProvider,
  SazitoCheckout,
} from '@sazito/checkout/next';

// SazitoProvider must still wrap the tree above this component.
export default function CheckoutPage() {
  return (
    <CheckoutProvider
      credentials={{ cart: { identifier: '<cart-identifier>' } }}
      config={{ locale: 'fa' }}
    >
      <SazitoCheckout className="my-checkout" />
    </CheckoutProvider>
  );
}