Checkout & payments

// app/layout.tsx
import { HyperyProvider } from "@hyperyai/sdk";
 
export default function RootLayout({ children }) {
  return (
    <HyperyProvider
      config={{
        clientId: process.env.NEXT_PUBLIC_HYPERY_CLIENT_ID!,
        redirectUri: "https://yourapp.com/callback",
        gatewayUrl: "https://hypery.ai",
        interactionMode: "auto", // 'auto' | 'popup' | 'redirect'
      }}
    >
      {children}
    </HyperyProvider>
  );
}

import { BuyButton } from "@hyperyai/sdk";
 
<BuyButton
  appId="app_123"
  amountCents={499}
  description="Pro upgrade"
  onSuccess={(r) => console.log("paid", r.paymentIntentId)}
  onError={(e) => toast.error(e.message)}
/>;

import { SubscribeButton } from "@hyperyai/sdk";
 
<SubscribeButton
  planId="66f…"
  interval="year"          // "month" (default) or "year" — the plan must offer it
  priceCents={10000}       // display only; Hypery charges the plan's price
  onSuccess={(r) => toast.success(r.alreadySubscribed ? "already subscribed" : "subscribed")}
  onError={(e) => toast.error(e.message)}
/>

import { useAppSubscription, planPriceCents } from "@hyperyai/sdk";
 
function Plans({ appId }: { appId: string }) {
  const {
    plans, isSubscribed, activeSubscription, interval, pendingInterval,
    nextGrantAt, remainingCreditUsd, subscribe, cancel, resume, switchInterval,
  } = useAppSubscription(appId);
 
  if (!isSubscribed) {
    return plans.map((p) => (
      <button key={p.id} onClick={() => subscribe(p.id, { interval: "year" })}>
        {p.name} · ${(planPriceCents(p, "year") ?? 0) / 100}/yr
      </button>
    ));
  }
 
  return (
    <div>
      <p>${remainingCreditUsd.toFixed(2)} credit left · next credit {nextGrantAt}</p>
      {interval === "month" && <button onClick={() => switchInterval(undefined, "year")}>switch to yearly</button>}
      {interval === "year" && !pendingInterval && (
        <button onClick={() => switchInterval(undefined, "month")}>switch to monthly at renewal</button>
      )}
      {activeSubscription?.cancelAtPeriodEnd
        ? <button onClick={() => resume()}>resume</button>
        : <button onClick={() => cancel()}>cancel</button>}
    </div>
  );
}

import { useCheckout } from "@hyperyai/sdk";
 
function AddCredits() {
  const { checkout, status, isRunning } = useCheckout();
 
  const buy = async () => {
    const result = await checkout({ kind: "topup", usdAmount: 5 });
    if (result.status === "success") {
      // balance is funded
    }
  };
 
  return (
    <button onClick={buy} disabled={isRunning}>
      {status === "charging" ? "charging…" : "add $5 of credits"}
    </button>
  );
}

// marketplace purchase (Stripe Connect)
checkout({ kind: "purchase", appId: "app_123", amountCents: 499, description: "Pro" });
 
// buy AI credits for the signed-in user's balance
checkout({ kind: "topup", usdAmount: 5 });
 
// subscribe to one of your app's plans (monthly by default)
checkout({ kind: "subscription", planId: "66f…", interval: "year" });

const result = await checkout({ kind: "topup", usdAmount: 5 });
 
switch (result.status) {
  case "success":     /* result.data has the charge */ break;
  case "error":       /* result.error is a ParsedError */ break;
  case "cancelled":   /* user closed a popup — no-op */ break;
  case "redirecting": /* navigating away; resumes on return */ break;
}

import { useMarketplace, useBuyerWallet } from "@hyperyai/sdk";
 
function Buy({ orderId }: { orderId: string }) {
  const { buy, isBuying } = useMarketplace();
  const { addCard } = useBuyerWallet();
 
  const onClick = async () => {
    const r = await buy({ appId: "app_123", amountCents: 499, description: "Pro", idempotencyKey: orderId });
    if (r.ok) return toast.success(`paid ${r.paymentIntentId}`);
    if (r.needsPaymentMethod) return addCard();
    toast.error(r.error.message);
  };
 
  return <button onClick={onClick} disabled={isBuying}>Buy</button>;
}

import { planPriceCents } from "@hyperyai/sdk";
 
const yearly = planPriceCents(plan, "year");
if (yearly !== null) label = `$${(yearly / 100).toFixed(2)}/yr`;