Интеграция GetPlatinum с формой Tilda

Схема

  1. На странице Tilda покупатель заполняет форму.
  2. JS на странице добавляет в форму техническое поле leadToken.
  3. Tilda отправляет webhook в GetPlatinum: https://<subdomain>.getplatinum.ru/tilda/webhook.
  4. GetPlatinum создаёт клиента и заказ.
  5. После успешной отправки формы JS переводит покупателя на https://<subdomain>.getplatinum.ru/tilda/wait?token=<leadToken>.
  6. Страница ожидания опрашивает GetPlatinum и редиректит покупателя на страницу оплаты.

Настройки в GetPlatinum

Для работы должна быть настроена организация и добавлено хотя-бы одно предложение.

После сохранения предложения в его форме появится ссылка Получить код для Tilda. Нажмите её, скопируйте готовый JS-код из модального окна и вставьте этот код в блок T123 на странице Tilda с формой.

В готовом коде уже подставлены:

Если используете готовый код из формы предложения, отдельно добавлять поле offerId в форме Tilda не нужно.

Настройки Webhook в Tilda

В разделе Подключение сервиса приема данных Webhook:

НастройкаЗначение
WEBHOOK URLhttps://<subdomain>.getplatinum.ru/tilda/webhook
API methodHEADER
API nameAuthorization
API keyAPI-ключ организации из кабинета GetPlatinum
Посылать CookiesНе обязательно
Передавать данные по товарам в заказе - массивомНе обязательно
Передавать externalid в товарахНе обязательно
Отправлять данные в виде application/jsonОбязательно
Передавать дополнительные данные в товарахНе обязательно
Отправлять только после оплатыНе включать

API-key передавать нужно через HEADER:

Authorization: <API_KEY>

Настройки формы в Tilda

Включить Webhook в форме.

Добавить блок T123 и вставить готовый JS-скрипт из формы предложения GetPlatinum.

Если настраиваете форму самостоятельно, вручную добавьте скрытое поле offerId со значением ID предложения из кабинета GetPlatinum и замените <subdomain> в WAIT_URL на поддомен вашего аккаунта:

<script>
  (function () {
    const WAIT_URL = 'https://<subdomain>.getplatinum.ru/tilda/wait';
    const OFFER_ID = '<offerId>';
    const TOKEN_FIELD = 'leadToken';
    const OFFER_FIELD = 'offerId';

    function generateToken() {
      if (window.crypto && crypto.randomUUID) {
        return crypto.randomUUID();
      }

      return 'gpl_' + Date.now() + '_' + Math.random().toString(36).slice(2, 12);
    }

    function ensureHiddenField(form, name, value) {
      let input = form.querySelector('input[name="' + name + '"]');

      if (!input) {
        input = document.createElement('input');
        input.type = 'hidden';
        input.name = name;
        form.appendChild(input);
      }

      input.value = value;
      return input;
    }

    function ensureToken(form) {
      let input = form.querySelector('input[name="' + TOKEN_FIELD + '"]');

      if (!input) {
        input = document.createElement('input');
        input.type = 'hidden';
        input.name = TOKEN_FIELD;
        form.appendChild(input);
      }

      if (!input.value) {
        input.value = generateToken();
      }

      return input.value;
    }

    function bindForms() {
      document.querySelectorAll('form').forEach(function (form) {
        if (form.dataset.gplTokenBound === '1') {
          return;
        }

        form.dataset.gplTokenBound = '1';
        ensureToken(form);
        ensureHiddenField(form, OFFER_FIELD, OFFER_ID);
      });
    }

    document.addEventListener('DOMContentLoaded', function () {
      bindForms();

      let attempts = 0;
      const timer = setInterval(function () {
        bindForms();

        attempts++;
        if (attempts >= 20) {
          clearInterval(timer);
        }
      }, 500);
    });

    document.addEventListener('tildaform:aftersuccess', function (event) {
      const form = event.target;
      if (!form || form.tagName !== 'FORM') {
        return;
      }

      const token = ensureToken(form);
      ensureHiddenField(form, OFFER_FIELD, OFFER_ID);
      if (!token) {
        return;
      }

      window.location.replace(WAIT_URL + '?token=' + encodeURIComponent(token));
    });
  })();
</script>

<style>
  .t-form__successbox,
  .js-successbox,
  .t-form-success-popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
</style>

Корзина Tilda

В настоящее время работа с корзиной не реализована, возможно передавать только один offerId