Remix

npm install @supapulse/core @supapulse/react

import { SupapulseProvider } from '@supapulse/react';
import { json } from '@remix-run/node';
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';
import { useMemo } from 'react';

export async function loader() {
  return json({ supapulseToken: process.env.SUPAPULSE_PUBLIC_TOKEN! });
}

export default function App() {
  const { supapulseToken } = useLoaderData<typeof loader>();
  const config = useMemo(() => ({ apiToken: supapulseToken }), [supapulseToken]);

  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <SupapulseProvider config={config}>
          <Outlet />
        </SupapulseProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

import { useEvent } from '@supapulse/react';

export default function Pricing() {
  const trackEvent = useEvent();
  return <button onClick={() => trackEvent('plan_selected', { plan: 'growth' })}>Choose Growth</button>;
}

import { useSupapulse } from '@supapulse/react';
import { Form } from '@remix-run/react';

export function BuyForm({ priceId }: { priceId: string }) {
  const supapulse = useSupapulse();

  async function addVisitor(event: React.FormEvent<HTMLFormElement>) {
    const form = event.currentTarget;
    form.elements.namedItem('fingerprint')?.setAttribute('value', (await supapulse.getVisitorFingerprint()) ?? '');
    form.elements.namedItem('sessionId')?.setAttribute('value', supapulse.getSessionId());
  }

  return (
    <Form method="post" action="/checkout" onSubmit={addVisitor}>
      <input type="hidden" name="priceId" value={priceId} />
      <input type="hidden" name="fingerprint" />
      <input type="hidden" name="sessionId" />
      <button>Buy</button>
    </Form>
  );
}

import { redirect, type ActionFunctionArgs } from '@remix-run/node';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function action({ request }: ActionFunctionArgs) {
  const form = await request.formData();
  const user = await requireUser(request); // your auth
  const metadata = {
    supapulse_customer_id: user.id,
    supapulse_visitor_fingerprint: String(form.get('fingerprint') ?? ''),
    supapulse_session_id: String(form.get('sessionId') ?? ''),
  };

  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    line_items: [{ price: String(form.get('priceId')), quantity: 1 }],
    success_url: 'https://acme.com/thanks',
    metadata,
    subscription_data: { metadata },
  });
  return redirect(session.url!);
}