Віджет токенізації карток

Віджет токенізації RozetkaPay дозволяє безпечно збирати дані карток клієнтів прямо на вашому сайті через iframe: дані картки йдуть у RozetkaPay, а ваш сервер отримує лише токен.

Інтеграція

Додайте скрипт на сторінку:

<script src="https://cdn.rozetkapay.com/widget.js" async></script>

Ініціалізація

function __onWidgetReady() {
  const widget = RPayCardWidget.init({
    // Обов'язкові параметри
    key: "hQ8aqcm/RG1RF7MaImmzZUsThYhAVDG6R7kazf9+r7zuoWo6",
    mode: "inline",
    selector: "widget-checkout",
    onToken: function (tokenData) {
      // Обробка отриманого токена
      console.log("Token:", tokenData.token);
      console.log("Card mask:", tokenData.card_mask);
      console.log("Expires:", tokenData.expires_at);

      // Відправте токен на ваш сервер для створення платежу
      submitPayment(tokenData.token);
    },

    // Опціональні параметри
    amount: 350.5,
    lang: "uk",
    style: "evo",
    type: "full_card",
    customer_ip: "127.0.0.1",
    customer_id: "123",
    customer_email: "customer@example.com",
  });

  // Відкрити віджет
  widget.open();
}

Параметри init()

Параметр	Тип	Обов’язковий	Опис
`key`	String	✅	Widget key від RozetkaPay
`mode`	String	✅	Завжди `inline`
`selector`	String	✅	ID HTML елемента для віджета
`onToken`	Function	✅	Callback при отриманні токена
`amount`	Number		Сума для відображення
`lang`	String		Мова: `uk`, `en`, `pl`
`style`	String		Стиль: `evo`
`type`	String		`full_card` (оплата) або `pan_only` (виплата)
`template`	String		Шаблон: `line`
`customer_ip`	String		IP клієнта
`customer_id`	String		ID клієнта (для External tokenization)
`customer_email`	String		Email клієнта (для External tokenization)
`locale`	Object		Кастомізація текстів

Відповідь onToken

{
  "token": "tok_abc123...",           // Токен для платежу
  "expires_at": "2099-12-31T00:00:00", // Термін дії токена
  "card_mask": "424242******4242"      // Маска картки
}

API віджета

Метод	Опис
`widget.open()`	Відобразити віджет
`widget.close()`	Закрити віджет

Приклади інтеграції

Eager loading (рекомендовано)

Ініціалізувати віджет при завантаженні сторінки, відкрити по кліку:

let widget;

function __onWidgetReady() {
  widget = RPayCardWidget.init({
    key: "your_widget_key",
    mode: "inline",
    selector: "widget-checkout",
    lang: "uk",
    onToken: function (tokenData) {
      // Відправка на сервер
      fetch("/api/payment", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: tokenData.token }),
      });
    },
  });
}

// Відкриття віджета по кліку на кнопку
document.getElementById("pay-button").addEventListener("click", function (e) {
  e.preventDefault();
  widget.open();
});

Lazy loading

Ініціалізувати та відкрити віджет при кліку:

function __onWidgetReady() {
  document.getElementById("pay-button").addEventListener("click", function (e) {
    e.preventDefault();

    RPayCardWidget.init({
      key: "your_widget_key",
      mode: "inline",
      selector: "widget-checkout",
      amount: 100,
      onToken: function (tokenData) {
        submitPayment(tokenData);
      },
    }).open();
  });
}

Instant open

Відкрити віджет одразу при завантаженні:

function __onWidgetReady() {
  RPayCardWidget.init({
    key: "your_widget_key",
    mode: "inline",
    selector: "widget-checkout",
    onToken: handleToken,
  }).open();
}

Події віджета

// Віджет успішно ініціалізовано
document.addEventListener("widget-init-ready", () => {
  console.log("Widget готовий");
  widget.open();
});

// Помилка ініціалізації
document.addEventListener("widget-init-error", (e) => {
  console.error("Widget error:", e.detail.id, e.detail.message);
});

Кастомізація текстів

RPayCardWidget.init({
  // ... інші параметри
  locale: {
    uk: {
      cardNumber: "Номер карти",
      expiryDate: "Строк дії",
      cvv: "CVV",
      submit: "Сплатити",
      yy: "ГГ",
      mm: "ММ",
      hints: {
        cvvHint: "Код міститься на зворотній стороні карти",
      },
      errors: {
        cardnumber: "Неправильний номер карти",
        expiryDate: "Строк дії карти закінчився",
        cvv: "Некорректний CVV/CVC2 код",
      },
    },
  },
});

HTML розмітка

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.rozetkapay.com/widget.js" async></script>
  </head>
  <body>
    <!-- Кнопка для відкриття віджета -->
    <button id="pay-button">Оплатити</button>

    <!-- Контейнер для віджета -->
    <div id="widget-checkout"></div>

    <script>
      function __onWidgetReady() {
        // Ваш код ініціалізації
      }
    </script>
  </body>
</html>

Використання токена

Після отримання токена у onToken, відправте його на сервер для створення платежу:

curl -X POST https://api.rozetkapay.com/api/payments/v1/new \
  -u "login:password" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 100,
    "currency": "UAH",
    "external_id": "order_12345",
    "mode": "direct",
    "customer": {
      "payment_method": {
        "type": "cc_token",
        "cc_token": {
          "token": "tok_abc123..."
        }
      }
    }
  }'