Реквизиты компании для безналичной оплаты в корзине Тильды

Модификация добавляет поля ввода реквизитов компании (ИНН, КПП, Название компании и другие данные) для оформления безналичной оплаты напрямую в корзину Тильды.
Инструкция по установке:
Вроде способ безналичной оплаты есть, но как-то это все сыро. Либо полей ввода вообще нет и надо связываться, запрашивать реквизиты, либо открывается еще один попап, но зачем? Никто не знает.
Сделал такую модификацию, которая перемещает поля реквизитов, которые мы сами задаем в форме корзины, под поле выбора способа оплаты "Безналичный расчет". Эти поля показываются только после выбора способа оплаты "Безналичный расчет" и отправляются в сервис приема данных вместе с остальными полями.

И да, модификация работает, если выбрано "Оформление заказа в несколько этапов".
  1. В настройках сайта открываем Платежные системы → Безналичный расчет → Поведение "Отправлять заявку сразу" → Сохранить.
  2. В блоке корзины ST100 добавили необходимые поля (можно как и 1 поле, так и несколько - например: Название компании, ИНН, КПП)
  3. Каждому полю задали свою переменную (например, ИНН - inn, КПП - kpp)
  4. Поле оставляем необязательным для заполнения, иначе при оплате другим способом, например картой или наличными пользователь не сможет заполнить эти скрытые поля.
  5. Копируйте код ниже и вставляйте в блок T123 ниже блока корзины ST100 или в настройки сайта "Html-код для вставки внутрь HEAD", если надо расшарить на весь сайт эту модификацию.
  6. В коде смотрим комментарии и меняем название переменных, которые указали для полей в корзине.
<!-- Реквизиты компании при безналичной оплате в корзине https://dabreeze.ru/blog/details-company -->

<script>
(function () {
  var config = {
    cartSelector: '.t706',
    formSelector: '.t706__orderform form',
    paymentSystem: 'banktransfer',
    fields: [
      { name: 'inn', required: true }, 
/* меняем inn на свою переменную, если отличается. Можно заменить  true на false, если это поле необязательное для заполнения */ 
      /* { name: 'еще_одна_переменная', required: true }, добавляйте столько переменных, сколько требуется через запятую в конце */ 
    ]
  };

  var visibleClass = 'conditional-payment-field-visible';
  var cartObservers = new WeakMap();

  function escapeValue(value) {
    return String(value)
      .replace(/\\/g, '\\\\')
      .replace(/"/g, '\\"');
  }

  function getGroupSelector(name) {
    return (
      '.t-input-group[data-field-name="' +
      escapeValue(name) +
      '"]'
    );
  }

  function addStyles() {
    if (document.getElementById('conditional-payment-fields-styles')) {
      return;
    }

    var hiddenSelectors = [];
    var visibleSelectors = [];

    config.fields.forEach(function (field) {
      var selector =
        config.cartSelector + ' ' + getGroupSelector(field.name);

      hiddenSelectors.push(selector);
      visibleSelectors.push(selector + '.' + visibleClass);
    });

    var style = document.createElement('style');

    style.id = 'conditional-payment-fields-styles';
    style.textContent =
      hiddenSelectors.join(',') +
      '{display:none!important;}' +
      visibleSelectors.join(',') +
      '{display:block!important;}';

    document.head.appendChild(style);
  }

  function getFields(form) {
    return config.fields.map(function (settings) {
      var group = form.querySelector(
        getGroupSelector(settings.name)
      );

      var input = form.querySelector(
        'input[name="' + escapeValue(settings.name) + '"],' +
        'textarea[name="' + escapeValue(settings.name) + '"],' +
        'select[name="' + escapeValue(settings.name) + '"]'
      );

      if (!group || !input) {
        return null;
      }

      return {
        name: settings.name,
        required: settings.required,
        group: group,
        input: input
      };
    }).filter(function (field) {
      return field !== null;
    });
  }

  function getPaymentOption(form) {
    return form.querySelector(
      'input[name="paymentsystem"]' +
      '[data-payment-variant-system="' +
      escapeValue(config.paymentSystem) +
      '"]'
    );
  }

  function clearError(field) {
    var error = field.group.querySelector('.t-input-error');

    field.input.removeAttribute('aria-invalid');

    if (error) {
      error.textContent = '';
      error.style.display = 'none';
    }
  }

  function updateForm(form) {
    var paymentGroup = form.querySelector('.t-input-group_pm');
    var paymentOption = getPaymentOption(form);

    if (!paymentGroup || !paymentOption) {
      return;
    }

    var fields = getFields(form);
    var isSelected = paymentOption.checked;
    var anchor = paymentGroup;

    fields.forEach(function (field) {
      if (anchor.nextElementSibling !== field.group) {
        anchor.insertAdjacentElement('afterend', field.group);
      }

      anchor = field.group;

      field.group.style.removeProperty('display');
      field.group.classList.toggle(visibleClass, isSelected);

      var isRequired = isSelected && field.required;

      field.input.required = isRequired;

      if (isRequired) {
        field.input.setAttribute('data-tilda-req', '1');
        field.input.setAttribute('aria-required', 'true');
        field.input.classList.add('js-tilda-rule');
      } else {
        field.input.removeAttribute('data-tilda-req');
        field.input.removeAttribute('aria-required');
        clearError(field);
      }
    });
  }

  function validateForm(form) {
    var paymentOption = getPaymentOption(form);

    if (!paymentOption || !paymentOption.checked) {
      return true;
    }

    var fields = getFields(form);
    var firstInvalidInput = null;

    fields.forEach(function (field) {
      if (!field.required || String(field.input.value || '').trim()) {
        clearError(field);
        return;
      }

      var error = field.group.querySelector('.t-input-error');

      field.input.setAttribute('aria-invalid', 'true');

      if (error) {
        error.textContent = 'Заполните поле';
        error.style.display = 'block';
      }

      if (!firstInvalidInput) {
        firstInvalidInput = field.input;
      }
    });

    if (!firstInvalidInput) {
      return true;
    }

    firstInvalidInput.focus();

    return false;
  }

  function initCart(cart) {
    var form = cart.querySelector(config.formSelector);

    if (form) {
      updateForm(form);
    }

    if (cartObservers.has(cart)) {
      return;
    }

    var observer = new MutationObserver(function () {
      var currentForm = cart.querySelector(config.formSelector);

      if (currentForm) {
        updateForm(currentForm);
      }
    });

    observer.observe(cart, {
      childList: true,
      subtree: true
    });

    cartObservers.set(cart, observer);
  }

  function initCarts() {
    document.querySelectorAll(config.cartSelector).forEach(initCart);
  }

  function init() {
    initCarts();

    document.addEventListener('change', function (event) {
      if (event.target.name !== 'paymentsystem') {
        return;
      }

      var cart = event.target.closest(config.cartSelector);

      if (cart) {
        initCart(cart);
        updateForm(event.target.closest('form'));
      }
    });

    document.addEventListener('input', function (event) {
      var settings = config.fields.find(function (field) {
        return field.name === event.target.name;
      });

      if (!settings || !String(event.target.value || '').trim()) {
        return;
      }

      var group = event.target.closest('.t-input-group');

      if (group) {
        clearError({
          group: group,
          input: event.target
        });
      }
    });

    document.addEventListener('click', function (event) {
      var submitButton = event.target.closest(
        'button[type="submit"], input[type="submit"]'
      );

      if (!submitButton) {
        return;
      }

      var form = submitButton.closest('form');

      if (
        form &&
        form.matches(config.formSelector) &&
        !validateForm(form)
      ) {
        event.preventDefault();
        event.stopImmediatePropagation();
      }
    }, true);

    document.addEventListener('submit', function (event) {
      var form = event.target;

      if (
        form.matches(config.formSelector) &&
        !validateForm(form)
      ) {
        event.preventDefault();
        event.stopImmediatePropagation();
      }
    }, true);
  }

  addStyles();

  if (typeof t_onReady === 'function') {
    t_onReady(init);
  } else if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>
А тут я собрал целую подборку модификаций для каталога товаров на Тильде
Больше кода для Tilda в ТГ-канале
Поблагодари за код - подпишись https://t.me/breeze_tilda