React и Next.js

Објавено издание: SDK 0.1.3 е јавно достапен на npm. Инсталацијата не активира серверски функции.

@kordiva/react — готово копче Купи

Инсталирајте @kordiva/react и @kordiva/checkout во React 18.2+/19 или Next.js:

pnpm add @kordiva/[email protected] @kordiva/[email protected]

CheckoutButton бара URL за наплата од вашиот автентициран backend, го проверува доверливиот Kordiva host, спречува дупли кликови и пренасочува. Не обработува податоци за картичка и не смета дека пренасочувањето е успешно плаќање. Чувајте ги @kordiva/sdk и Store API клучевите на Node backend, а не во клиентските компоненти. Целосниот тестиран пример подолу повикува /api/checkout.

1. Чувајте @kordiva/sdk и сите тајни во Node серверска рута. Не внесувајте го клиентот во компонента со 'use client'.
2. Користете го обработувачот од водичот за наплата во app/api/checkout/route.ts, извезувајќи го конфигурираниот резултат како POST. Обезбедете постојна купувачка сесија и авторизација на кошничка. Изберете Node runtime за серверски crypto.
3. Прикажете го тестираниот BuyButton подолу. Чувајте attempt стабилен за одобрената кошничка. Доставете доверлива allowedOrigins листа од конфигурација и onError за корисна порака за повторување/усогласување.
4. Копчето се оневозможува додека отвора наплата, блокира двоен клик во тек и го проверува добиениот origin. Пренасочување не го третира како успешно плаќање.

Прелистувачкиот callback испраќа кон вашето /api/checkout; никогаш не испраќа Kordiva клуч. Заштитете ја рутата со origin/сесија и ограничувања по корисник. SSR не создава сесии. React е peer зависност; компонентата не бара Next.js зависност.

react.ts

"use client";
import { createElement } from "react";
import type { CheckoutNavigationOptions } from "@kordiva/checkout";
import { CheckoutButton } from "@kordiva/react";
/** Keep attempt stable for the server-authorized cart, including uncertain results. */
export function BuyButton({
  attempt,
  allowedOrigins,
  checkoutOptions,
  onError,
}: {
  attempt: string;
  allowedOrigins: string[];
  checkoutOptions?: CheckoutNavigationOptions;
  onError: (error: Error) => void;
}) {
  return createElement(CheckoutButton, {
    allowedOrigins,
    checkoutOptions,
    onError,
    onCheckout: async () => {
      const response = await fetch("/api/checkout", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ attempt }),
      });
      if (!response.ok) throw new Error("Checkout unavailable");
      return response.json();
    },
  });
}

Како купувачот го гледа успешното плаќање

CheckoutButton отвора наплата, но не означува платена нарачка. Kordiva го обработува Stripe webhook. По враќањето UI може да го провери автентицираниот GET /api/payment-status?attempt=... endpoint на вашиот backend. Серверот проверува сопственост на кошничката и повикува LIVE-only payments.confirm() со зачувани референци. Покажете paid само по проверена потврда; инаку pending, expired или привремена недостапност. Проверувајте кратко (на пример секои пет секунди, најмногу една минута), со трајно серверско усогласување за доцнења. Видете го тестираниот Node пример.

Локален TEST и прелистувачки граници

checkoutOptions={{ environment: 'TEST', allowLocalTest: true }} е изречен развоен избор за изолиран локален TEST линк. Изоставете го за вообичаен HTTPS тек. Точната дозволена origin листа и понатаму е задолжителна. LIVE /q/ линк преку HTTP се одбива и со оваа дозвола.

Внесување @kordiva/sdk или неговиот webhook export во прелистувачка влезна точка е блокирано преку package exports, пред создавање клиент. Користете само прелистувачки функции во клиентски компоненти; не ставајте тајни во props или апликациски код. Next.js App Router може да користи сопствен React runtime; одделно се проверуваат самостоен React SSR и framework builds.

Поврзани водичи

SDK · Checkout · Безбедност · API

Business integration

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