Для платёжной формы

Метод запроса

POST

URL запроса

/v2/merchant/orders

Параметры запроса

Название

Формат

Описание

extId

string

Идентификатор транзакции клиента

paymentMethods

string[]

Платежные методы доступные на форме ( Card, Sbp, SberPay, TPay, CrossBorder )

currency

string(3-4)

Код валюты ISO 4217 (RUB, UZS и т.д.)

amount (опционально)

decimal

Сумма

callbackUrl

(опционально)

string(1-255)

Адрес колбэка для транзакции

successUrl (опционально)

string(1-255)

Ссылка для редиректа после успешной оплаты ордера

failureUrl (опционально)

string(1-255)

Ссылка для редиректа в случае отмены ордера

Пример запроса

curl --request POST \
  --url https://{{domain}}/v2/merchant/orders \
  --header 'Authorization: Bearer {{your_api_token}}' \
  --header 'X-Signature: {{sign}}' \
  -d '{
  "extId": "123456789",  
  "callbackUrl": "https://webhook.site/#!/view/151a4e3c",
  "currency": "RUB",
  "successUrl": "https://example.com/success",
  "failureUrl": "https://example.com/failure", 
  "paymentMethods": [ "Card", "SBP", "SberPay", "TPay", "CrossBorder"]
}'

$httpClient = new \GuzzleHttp\Client();
$response = $httpClient->post('https://{{domain}}/v2/merchant/orders', [
    'headers' => [
        'Authorization' => 'Bearer {{your_api_token}}',
        'X-Signature'   => '{{sign}}'
    ],
    'body' => "{\n  \"extId\": \"123456789\",\n  \"currency\": \"RUB\"\n,"paymentMethods":[\"Card\",\"SBP\",\"SberPay\",\"TPay\",\"CrossBorder\"]\n}"
]);

Параметры ответа

Название

Формат

Описание

orderId

string(1-255)

Идентификатор ордера

paymentPageUrl

string(1-255)

Ссылка на платёжную форму

expiresAt

string(1-255)

Срок действия ссылки на платёжную форму

Пример ответа

{
  "orderId": "39f2af5d-8666-4a94-b28f-104a46a3d5f3",
  "paymentPageUrl": "https://example.com",
  "expiresAt": "2024-07-19T09:00:33"
}

Платёжная форма в iframe

Вместо открытия платёжной формы в новой вкладке, вы можете открывать её поверх вашего сайта с помощью iframe. Для этого:

Создайте iframe во весь экран
Дождитесь события message с event.data === "ready"
Чтобы открыть форму, отправьте "open" через postMessage и поставьте стиль pointer-events: auto
Чтобы закрыть форму, отправьте "close" через postMessage и поставьте стиль pointer-events: none
При событии message с event.data === "requestClose" закрывайте форму

Пример

<body>
  <button onclick="openPaymentDialog()">
    Открыть платёжную форму
  </button>
  <script>
    const paymentPageUrl = "https://[...]"; // должно быть получено из /v2/merchant/orders
    const paymentPageOrigin = new URL(paymentPageUrl).origin;

    // Создаём iframe
    const iframe = document.createElement("iframe");
    iframe.style.position = "fixed";
    iframe.style.top = "0";
    iframe.style.left = "0";
    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.style.border = "none";
    iframe.style.pointerEvents = "none";
    iframe.src = paymentPageUrl;
    document.body.append(iframe);

    function openPaymentDialog() {
      iframe.contentWindow.postMessage("open", paymentPageOrigin);
      iframe.style.pointerEvents = "auto";
    }

    function closePaymentDialog() {
      iframe.contentWindow.postMessage("close", paymentPageOrigin);
      iframe.style.pointerEvents = "none";
    }

    window.addEventListener("message", (event) => {
      // Смотрим сообщения только от платёжной страницы
      if (event.origin !== paymentPageOrigin) {
        return;
      }

      if (event.data === "ready") {
        // Как только форма готова, открываем её
        openPaymentDialog();
      } else if (event.data === "requestClose") {
        // По сигналу из формы закрываем её (например, если нажат крестик, фон или клавиша Esc)
        closePaymentDialog();
      }
    });
  </script>
</body>

import { useCallback, useEffect, useRef, useState } from "react";

export function DemoPage() {
  const paymentPageUrl = "https://[...]"; // должно быть получено из /v2/merchant/orders
  const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);

  return (
    <>
      <button onClick={() => setPaymentDialogOpen(true)}>
        Открыть платёжную форму
      </Button>
      <PaymentDialog
        paymentPageUrl={paymentPageUrl}
        open={paymentDialogOpen}
        onClose={() => setPaymentDialogOpen(false)}
      />
    </>
  );
}

export function PaymentDialog({
  open,
  onClose,
  paymentPageUrl,
}: {
  open: boolean;
  onClose?: () => void;
  paymentPageUrl?: string;
}) {
  const ref = useRef<HTMLIFrameElement>(null);
  const origin = paymentPageUrl != null && new URL(paymentPageUrl).origin;

  const synchronizeOpenState = useCallback(() => {
    if (origin) {
      ref.current?.contentWindow?.postMessage(open ? "open" : "close", origin);
    }
  }, [open, origin]);

  const handleMessage = useCallback(
    (event: MessageEvent) => {
      // Смотрим сообщения только от платёжной страницы
      if (event.origin !== origin) {
        return;
      }

      if (event.data === "ready") {
        // Как только форма готова, синхронизируем её с пропом `open`
        synchronizeOpenState();
      } else if (event.data === "requestClose") {
        // По сигналу из формы закрываем её (например, если нажат крестик, фон или клавиша Esc)
        onClose?.();
      }
    },
    [origin, synchronizeOpenState, onClose],
  );

  useEffect(() => {
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [handleMessage]);

  // Синхронизируем форму с изменениями пропа `open`
  useEffect(synchronizeOpenState, [synchronizeOpenState]);

  return (
    <iframe
      ref={ref}
      src={paymentPageUrl}
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        border: "none",
        pointerEvents: paymentPageUrl && open ? "auto" : "none",
      }}
    />
  );
}

PreviousДля эквайринга NextДля QR НСПК

Last updated 2 months ago