Widget (Токенізація карток)

Widget Checkout дозволяє безпечно збирати дані карток клієнтів прямо на вашому сайті через iframe.

Інтеграція

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

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

Заувага

Скрипт завантажується асинхронно. Використовуйте __onWidgetReady callback для ініціалізації.

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

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.50,
    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": "token",
        "token": "tok_abc123..."
      }
    }
  }'