@kordiva/react — React and Next.js checkout

Published release: SDK 0.1.3 is publicly available on npm. Package installation does not activate new backend features.

@kordiva/react

Public npm package · Full React / Next.js guide

A React 18.2+/19 checkout button for client components, including Next.js. It calls your own backend and uses @kordiva/checkout to validate the URL. It never imports the credential-bearing Node SDK.

pnpm add @kordiva/react@0.1.3 @kordiva/checkout@0.1.3

Client component

"use client";
import { CheckoutButton } from "@kordiva/react";

export function BuyButton() {
  return (
    <CheckoutButton
      allowedOrigins={["https://store.kordiva.com"]}
      onCheckout={async () => {
        const response = await fetch("/api/checkout", {
          method: "POST",
          credentials: "same-origin",
        });
        if (!response.ok) throw new Error("Checkout unavailable");
        return response.json() as Promise<{ url: string }>;
      }}
      onError={(error) => { /* Display a safe message to the customer */ }}
      pendingLabel="Opening checkout…"
    >
      Buy now
    </CheckoutButton>
  );
}

/api/checkout is your protected backend route. Implement session/cart ownership, CSRF/rate limits, server-only Store API key, stable idempotency attempt and durable session persistence there. The example illustrates component wiring only: it does not create that route or prove payment. For local isolated TEST navigation, the component accepts checkoutOptions={{ environment: "TEST", allowLocalTest: true }} with an exact local origin.

Payment success: never infer paid from navigation. Kordiva receives Stripe notifications; your backend confirms LIVE payment using @kordiva/sdk payments.confirm(). Read the payment-status example before granting access or fulfilling an order.

See the full React/Next.js walkthrough, Node backend client, and browser navigation helper.

Business integration

Recurring checkout and subscription reads → Signed Business events → Raw-body verification → Business refunds → API reference. Individual MoR follows its separate refund process.