Как настроить оплату на лендинге Tilda

Если ваш сайт собран с помощью конструктора Tilda, подключите оплату через GetPlatinum одним из способов:

• Кнопка со ссылкой на оплату

• Заполнение формы

В статье разберём каждый способ подробнее.

Добавьте быструю ссылку для оплаты предложения прямо на кнопку вашего лендинга. Для этого:

1. Создайте платёжную ссылку с помощью функционала «Быстрая ссылка» или из предложения, как описано в разделе «Как создать платежную ссылку».

2. В настройках кнопки на Tilda добавьте вашу ссылку в соответствующее поле и сохраните изменения.

Таким образом, при клике на кнопку клиент будет переадресован на страницу оплаты заказа.

С помощью webhook можно настроить автоматическую передачу данных из формы заказа на стороне Tilda в ваш аккаунт GetPlatinum.

Для настройки выполните последовательно следующие шаги.

Для активации webhook в Tilda:

1. Перейдите в настройки вашего сайта в раздел «Формы — Webhook».

2. В открывшемся меню «Подключение сервиса приёма данных Webhook» укажите следующие значения:

3. После заполнения всех полей нажмите кнопку «Добавить».

Далее перейдите на страницу Tilda с формой заказа и в меню «Контент» в поле «Подключённые сервисы:» активируйте webhook включением соответствующего селектора. Сохраните изменения.

Важно!

Чтобы покупатель был автоматически авторизован на странице оплаты GetPlatinum и сразу переходил к выбору способа оплаты, необходимо в форме заказа Tilda сделать поля «email» и «номер телефона» обязательными.

Для корректной работы в аккаунте GetPlatinum предварительно должна быть настроена организация и добавлено хотя бы одно предложение. Далее:

1. Перейдите в настройки предложения, нажав значок карандаша, и нажмите «Получить код для Tilda».

Обратите внимание: если вы создаёте новое предложение, ссылка «Получить код для Tilda» появится в настройках только после его сохранения.

2. Скопируйте готовый JS-код из модального окна.

3. На странице Tilda с формой заказа добавьте блок «T123» и вставьте скопированный JS-скрипт из формы предложения GetPlatinum.

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

1. Перейдите в раздел «Продажи — Предложения» и для нужного предложения скопируйте offerId в колонке «ID».

2. На странице Tilda откройте меню «Контент» блока форма заказа, добавьте элемент «Поля для ввода — Скрытое поле» и заполните следующие параметры:

   • Имя переменной — offerId;

   • Значение — числовое значение идентификатора предложения offerId.

   Сохраните настройки формы.

3. Аналогичным образом разместите на странице Tilda необходимое количество форм с разными идентификаторами предложения.

4. Добавьте один блок «T123» и вставьте в него JS-скрипт из GetPlatinum:

<script>

(function () {

const WAIT_URL = 'https://subdomain.getplatinum.ru/tilda/wait';

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>

Обратите внимание:

• В строке const WAIT_URL = 'https://subdomain.getplatinum.ru/tilda/wait'; необходимо заменить subdomain на поддомен вашего аккаунта GetPlatinum.

• При данной настройке JS-код не должен содержать параметр offerId, так как он был добавлен ранее в формы заказа.