Checkout

1. Customer selects a plan (PricingTable or CheckoutButton component)
2. React SDK calls POST /api/v1/checkout with { customer_id, plan_code, success_url }
3. Nozle API creates a Stripe Checkout Session in “setup” mode
4. Returns { client_secret, invoice_id, amount_cents, currency }
5. The Checkout component renders Stripe Elements using the client_secret
6. Customer enters payment details
7. On success, Stripe sends checkout.session.completed webhook to /webhooks/stripe
8. Nozle API processes the webhook: creates subscription, provisions entitlements

​

React implementation

​

Option A — CheckoutButton (simplest)

<CheckoutButton planId="growth" label="Subscribe to Growth" />

​

Option B — Custom flow with useCheckout

const { fetchClientSecret, isLoading } = useCheckout();

const handleCheckout = async () => {
  const clientSecret = await fetchClientSecret('growth', '/success');
  // Use clientSecret with Stripe Elements
};

​

Option C — Full Stripe Elements

<Checkout
  clientSecret={secret}
  publishableKey="pk_live_..."
  submitLabel="Subscribe"
  onSuccess={(paymentIntentId) => router.push('/welcome')}
/>

​

Server-side (bypass checkout UI)

const result = await nozle.subscribe('customer_123', 'growth');
// { subscription_id: 'sub_...', status: 'active' }