@light-stack/yookassa-payments-react

React hook for YooKassa payments. Thin adapter over @light-stack/yookassa-payments with support for smart payment, widget, and direct API integrations.

Install

npm install @light-stack/yookassa-payments-react @light-stack/yookassa-payments

pnpm add @light-stack/yookassa-payments-react @light-stack/yookassa-payments

yarn add @light-stack/yookassa-payments-react @light-stack/yookassa-payments

Requires React 18+ as a peer dependency.

Quick start

Use only in client components — the hook loads YooKassa CDN scripts in the browser.

Your backend must create payments with the YooKassa secret key. The hook calls your endpoint via the createPayment callback.

Smart payment

'use client';

import { useYookassaPayment } from '@light-stack/yookassa-payments-react';

export function PayButton() {
  const { pay, isLoading } = useYookassaPayment({
    integration: 'smart',
    createPayment: async ({ integration }) => {
      const res = await fetch('/api/payments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          integration,
          amount: '100.00',
          returnUrl: `${window.location.origin}/thanks`,
        }),
      });

      return res.json();
    },
  });

  return (
    <button type="button" disabled={isLoading} onClick={() => pay()}>
      Pay
    </button>
  );
}

Widget

'use client';

import { useYookassaPayment } from '@light-stack/yookassa-payments-react';

export function PaymentPage() {
  const { pay, status } = useYookassaPayment({
    integration: 'widget',
    containerId: 'payment-form',
    returnUrl: 'https://example.com/payment/complete',
    createPayment: async ({ integration }) => {
      const res = await fetch('/api/payments', {
        method: 'POST',
        body: JSON.stringify({ integration, amount: '100.00' }),
      });

      return res.json();
    },
  });

  return (
    <div>
      <div id="payment-form" />
      {status === 'idle' && (
        <button type="button" onClick={() => pay()}>
          Show payment form
        </button>
      )}
    </div>
  );
}

Direct API (SBP only)

'use client';

import { bindCreatePayment } from '@light-stack/yookassa-payments';
import { useYookassaPayment } from '@light-stack/yookassa-payments-react';

export function SbpPayButton() {
  const { pay, isLoading } = useYookassaPayment({
    integration: 'direct',
    paymentMethod: 'sbp',
    createPayment: bindCreatePayment(
      async (input) => {
        const res = await fetch('/api/payments', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(input),
        });
        return res.json();
      },
      {
        amount: '100.00',
        returnUrl: `${window.location.origin}/thanks`,
        receipt: {
          customer: { email: '[email protected]' },
          items: [
            {
              description: 'Order',
              quantity: 1,
              amount: { value: '100.00', currency: 'RUB' },
              vat_code: 1,
              payment_mode: 'full_payment',
              payment_subject: 'service',
            },
          ],
          internet: 'true',
        },
      },
    ),
  });

  return (
    <button type="button" disabled={isLoading} onClick={() => pay()}>
      Pay with SBP
    </button>
  );
}

Server-side handler: createYookassaPaymentSession from @light-stack/yookassa-payments/server — see the @light-stack/yookassa-payments docs.

API

| Export | Description | |--------|-------------| | useYookassaPayment(options) | Hook — call pay() to start the integration | | UseYookassaPaymentOptions | Hook configuration | | UseYookassaPaymentResult | { pay, status, error, session, destroyWidget, isLoading } |

Status values

| Status | Meaning | |--------|---------| | idle | Not started | | loading | Creating payment / loading scripts | | redirecting | Smart or direct — browser redirect in progress | | ready | Widget rendered | | error | Something failed — see error |

License

MIT