Send users to checkout

<CheckoutButton> calls POST /v1/checkout-sessions and redirects the browser to the returned hosted Stripe Checkout URL. Checkout runs on the platform's Stripe account (deferred Connect onboarding, RFC 001) — a developer never has to touch Stripe just to accept a first payment.

Basic usage

import { CheckoutButton } from "@vibemonetize/react";

<CheckoutButton planId="01H...pro" successUrl="/welcome" cancelUrl="/pricing">
  Upgrade to Pro
</CheckoutButton>

successUrl/cancelUrl default to the current page URL. The button never throws — a failed request renders an inline, CSS-var-themeable error message and console.warns; pass onError to handle it yourself instead.

Identifying the buyer

<MonetizeProvider> already knows the current endUserId (or a persisted anonId for pre-signup trials) and passes it through automatically — you don't pass an identity prop to <CheckoutButton> itself.

After checkout

Stripe webhooks (verified, idempotent by event id) project the completed session into a Membership. The SDK's background refresh picks up the new entitlement within its normal refresh window, or call refresh() from useEntitlements() right after redirecting back from successUrl to force it immediately.

Theming

:root {
  --vibemonetize-primary: #16a34a;
  --vibemonetize-primary-hover: #15803d;
  --vibemonetize-error: #dc2626;
}