Stripe payments & subscriptions

// apps/<app>/src/api/createPaymentIntent.ts
import { z } from 'zod';
import { createEndpoint } from 'zitejs/backend';
import Stripe from 'stripe';

export default createEndpoint({
  description: 'Create a PaymentIntent for embedded checkout',
  inputSchema: z.object({
    email: z.string().email(),
    amount: z.number(), // in cents — $20.00 = 2000
    currency: z.string().default('usd'),
  }),
  outputSchema: z.object({ clientSecret: z.string() }),
  execute: async ({ input }) => {
    const stripe = new Stripe(process.env.ZITE_STRIPE_ACCESS_TOKEN!, {
      httpClient: Stripe.createFetchHttpClient(),
    });

    // Stripe rejects payment flows in Connect mode without a Customer — find or create one.
    const existing = await stripe.customers.list({ email: input.email, limit: 1 });
    const customer = existing.data[0] ?? (await stripe.customers.create({ email: input.email }));

    const pi = await stripe.paymentIntents.create({
      customer: customer.id,
      amount: input.amount,
      currency: input.currency,
    });

    return { clientSecret: pi.client_secret! };
  },
});

import { useEffect, useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
import { createPaymentIntent } from 'zitejs/api';
import { Button } from '@project/components/ui/button';

// Guard: VITE_STRIPE_PUBLISHABLE_KEY is briefly missing while Vite restarts right after
// Stripe is first connected.
const pk = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
const stripePromise = pk ? loadStripe(pk) : null;

function CheckoutForm({ onSuccess }: { onSuccess?: () => void }) {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string>();
  const [processing, setProcessing] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!stripe || !elements) return;
    setProcessing(true);
    const { error } = await stripe.confirmPayment({ elements, redirect: 'if_required' });
    if (error) { setError(error.message); setProcessing(false); }
    else onSuccess?.();
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <Button type="submit" disabled={!stripe || processing} className="mt-4">
        {processing ? 'Processing…' : 'Pay'}
      </Button>
      {error && <p className="text-destructive mt-2">{error}</p>}
    </form>
  );
}

export default function PaymentPage() {
  const [clientSecret, setClientSecret] = useState<string>();
  useEffect(() => {
    createPaymentIntent({ email: 'buyer@example.com', amount: 2000 })
      .then(r => setClientSecret(r.clientSecret));
  }, []);

  if (!stripePromise) return <div>Connecting to Stripe…</div>;
  if (!clientSecret) return <div>Loading…</div>;

  return (
    <Elements stripe={stripePromise} options={{ clientSecret }}>
      <CheckoutForm onSuccess={() => { /* toast, navigate, refresh */ }} />
    </Elements>
  );
}

const sub = await stripe.subscriptions.create({
  customer: customer.id,
  items: [{ price: input.priceId }],
  payment_behavior: 'default_incomplete',
  expand: ['latest_invoice.payment_intent'],
});
const invoice = sub.latest_invoice as Stripe.Invoice;
const pi = invoice.payment_intent as Stripe.PaymentIntent;
return { subscriptionId: sub.id, clientSecret: pi.client_secret! };