@paywolf/button

The drop-in "Pay with payWolf" checkout button for React. Self-contained (only React as a peer dep), on-brand, and locked — merchants restyle it via props but can't change the payWolf branding. Pin a version to freeze the design.

Install

npm i @paywolf/button

Use

Subscription — link straight to the plan's hosted page (zero backend):

import { PayWolfButton } from "@paywolf/button";

<PayWolfButton
  theme="lime"
  href="https://pay.paywolf.global/p/YOUR_PLAN_CODE"
/>

One-off payment — create an intent on your server (never expose your secret key in the browser), then pass the returned hosted_url. Drive the live states from your return_url handler or the payment_intent.succeeded webhook:

<PayWolfButton
  href={hostedUrl}
  status={status}        // "idle" | "loading" | "redirecting" | "success" | "error"
  onClick={startCheckout}
/>

Props

| Prop | Type | Default | | ----------- | ---------------------------------------------------------------- | ------------------ | | theme | "lime" \| "dark" \| "light" \| "outline" | "lime" | | size | "sm" \| "md" \| "lg" | "md" | | shape | "sharp" \| "rounded" \| "pill" | "rounded" | | compact | boolean — wolf mark + "Pay" (no wordmark) | false | | showMark | boolean — show the wolf mark (always on in compact) | true | | fullWidth | boolean | false | | status | "idle" \| "loading" \| "redirecting" \| "success" \| "error" | "idle" | | href | string | — | | onClick | () => void | — |

The label ("Pay with payWolf" / "Pay") and the wolf mark are fixed branding.

Publish (payWolf only)

npm run build      # tsup → dist (ESM + CJS + types)
npm publish        # scoped, public

Design the exact button in the Buttons studio.