Checkout

pnpm add @sazito/checkout

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

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

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

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

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

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

export default function CheckoutPage() {
  return (
    <SazitoCheckoutPage
      credentials={{ cart: { identifier: '<cart-identifier>' } }}
      config={{
        locale: 'fa',
        continueShoppingUrl: '/',
        theme: { accent: '#4f46e5', radius: 16 },
      }}
    />
  );
}

interface CheckoutCredentials {
  cart?: { id?: number; identifier: string };
  invoice?: { 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
    radius: 12,                  // base border-radius in px (scaled per element)
    fontFamily: 'inherit',       // font — defaults to host page font
  },
}}

// app/checkout/return/page.tsx
import { SazitoCheckoutPage } from '@sazito/checkout/next';

export default function ReturnPage({
  searchParams,
}: {
  searchParams: Record<string, string>;
}) {
  return (
    <SazitoCheckoutPage
      credentials={{ cart: { identifier: '<cart-identifier>' } }}
      config={{ locale: 'fa', returnUrl: '/checkout/return' }}
      paymentReturnParams={searchParams}
    />
  );
}

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

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,
  OrderSummary,
  Stepper,
} 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' }}
    >
      <div className="my-layout">
        <Stepper />
        <main>
          <SazitoCheckout />
        </main>
        <aside>
          <OrderSummary />
        </aside>
      </div>
    </CheckoutProvider>
  );
}