Tilda: номер заказа на странице Спасибо после оплаты

Tilda оплата и работа с Tilda корзиной по умолчанию не вставляют номер заказа на статическую страницу «Спасибо» — это нужно реализовать самостоятельно через tilda api (webhook) или клиентский JavaScript. Проще всего — сохранить orderId и состав заказа при отправке формы (localStorage или redirect с параметром) и вывести их на странице благодарности; надёжнее — принимать JSON webhook на сервере и отдавать данные странице по API. Ниже — варианты, конкретный код и чек‑лист для тестирования.

Содержание

• Как Tilda передаёт данные заказа (tilda оплата, tilda корзина)
• Способ 1 — Клиентский JavaScript: показать номер и состав на странице Спасибо (tilda javascript, страница спасибо tilda)
• Способ 2 — Webhook + сервер: надёжный поток через tilda api (tilda webhook, tilda api)
• Примеры кода и шаги реализации (чек‑лист)
• Отладка, безопасность и типичные ошибки
• Источники
• Заключение

Как Tilda передаёт данные заказа (tilda оплата, tilda корзина)

Tilda создаёт заказ при отправке корзины/формы и формирует внутренний orderId, но статические страницы (обычная «Спасибо») не получают эти данные автоматически. Официальная документация объясняет, как настроить страницу благодарности и редиректы, но для персонализации нужен код или серверная интеграция — см. руководство Tilda по странице благодарности.

Два рабочих паттерна:

• Клиентский: перехватить результат формы/корзины на стороне браузера (JS), сохранить orderId + массив товаров (localStorage / cookie / redirect с параметром) и отобразить на странице «Спасибо».
• Серверный: включить webhook в настройках проекта, получать JSON с orderId и составом товаров и хранить на сервере/CRM; страница «Спасибо» запрашивает сервер и показывает данные.

Для webhook важно включить опцию «передавать данные по товарам — массивом» и отправлять JSON, как рекомендовано в инструкциях по webhook (см. пример настройки в ChatApp — webhook для Tilda). Если нужен быстрый клиентский рендер — смотрите пример с window.myAfterSendedFunction в mo‑ti.ru.

Способ 1 — Клиентский JavaScript: показать номер и состав на странице Спасибо (tilda javascript, страница спасибо tilda)

Идея простая: при успешной отправке формы/корзины на странице оформления вы перехватываете результат и сохраняете orderId + состав в localStorage, затем на странице «Спасибо» читаете и рендерите.

Шаги кратко:

1. На странице оформления (корзина) добавьте скрипт в Head/Body, который использует хук Tilda window.myAfterSendedFunction или слушает событие отправки формы.
2. Сохраните объект заказа в localStorage: localStorage.setItem('tildaOrder', JSON.stringify(...)).
3. После возврата на страницу «Спасибо» (redirect или success URL) прочитайте localStorage и вставьте номер и состав в DOM.
4. Очистите localStorage, чтобы при повторном заходе старые данные не показывались.

Пример кода (страница оформления):

// Поместите в Head/Before body close на странице оформления
window.myAfterSendedFunction = function($form) {
 try {
 var formresult = $form.data('tildaformresult') || $form.data('formResult') || {};
 var orderId = formresult.orderId || formresult.order_id || formresult.result_id || null;
 var items = formresult.order_items || formresult.items || []; // названия полей могут отличаться
 var order = {orderId: orderId, items: items, ts: Date.now()};
 localStorage.setItem('tildaOrder', JSON.stringify(order));
 // Если вы НЕ перенаправляетесь на внешний платёжный шлюз, можно сразу редиректить:
 // if (orderId) location.href = '/thank-you/?order=' + encodeURIComponent(orderId);
 } catch (e) {
 console.warn('Tilda save order error', e);
 }
};

Пример кода (страница «Спасибо»):

document.addEventListener('DOMContentLoaded', function() {
 try {
 var json = localStorage.getItem('tildaOrder');
 if (!json) return;
 var order = JSON.parse(json);
 if (order && order.orderId) {
 document.getElementById('order-id').textContent = order.orderId;
 var list = document.getElementById('order-items');
 if (list && Array.isArray(order.items)) {
 list.innerHTML = order.items.map(function(it){
 return '<li>'+ (it.name || it.title || 'Товар') +' — '+ (it.quantity || it.qty || 1) +'</li>';
 }).join('');
 }
 // могём очистить
 localStorage.removeItem('tildaOrder');
 }
 } catch(e){ console.warn(e); }
});

Плюсы: быстро, не требует сервера, можно сделать за час. Минусы: если пользователь не вернулся на сайт (не попал обратно на success URL) — данные не покажутся; нельзя безопасно подтянуть данные из CRM; данные в client‑side видны в браузере.

Источник примера хука: mo‑ti.ru — пример вывода номера заказа.

Способ 2 — Webhook + сервер: надёжный поток через tilda api (tilda webhook, tilda api)

Если нужен надёжный, масштабируемый вариант (например, показать точный состав заказа, цену, статус), делаем так:

1. В Tilda в настройках форм/корзины укажите ваш webhook URL и включите опции:

• Передавать данные по товарам — массивом
• Отправлять данные в виде application/json
  (см. инструкцию по webhook: ChatApp webhook для Tilda).

2. На сервере реализуйте приём POST JSON, распарсьте payload — там будет orderId (или похожее поле) и массив товаров. Сохраните в базу/CRM.

3. Сделайте публичный защищённый endpoint, по которому страница «Спасибо» сможет запросить данные заказа по orderId (без передачи секретных ключей в браузере). Возможные варианты:

• Генерировать уникальный одноразовый токен при приёме webhook и отправлять клиенту (в письме или в redirect);
• Или позволять клиенту запросить /api/orders/{orderId}, но проверять, что запрос исходит в краткий период после создания (anti-scraping), либо требовать токен.

Простой пример серверной обработки (Node.js/Express):

app.post('/webhook/tilda', express.json(), async (req, res) => {
 const payload = req.body;
 const orderId = payload.orderId || payload.order_id || payload.result_id;
 const items = payload.order_items || payload.products || [];
 // Сохранить в БД: orders.insert({orderId, items, raw: payload})
 res.status(200).send('ok');
});

app.get('/api/orders/:id', async (req, res) => {
 const id = req.params.id;
 // Получить из БД и вернуть JSON (без секретных полей)
 res.json({orderId: id, items: [...]});
});

На странице «Спасибо» вы берёте orderId либо из localStorage, либо из query‑param (если вы при отправке сделали редирект с параметром) и делаете fetch(‘/api/orders/’+orderId). Это безопаснее: все secret‑ключи и CRM‑запросы остаются на сервере.

Если вы используете RetailCRM — смотрите готовые модули/инструкции интеграции, например radis.by — интеграция Tilda ↔ RetailCRM.

Примеры кода и шаги реализации (чек‑лист)

Чек‑лист быстрого внедрения:

• [ ] Включить опцию передачи товаров массивом в webhook (если нужен состав).
• [ ] Решить стратегию: client‑only или webhook+server.
• [ ] Реализовать сохранение orderId в localStorage (или редирект с параметром).
• [ ] На странице «Спасибо» реализовать чтение и рендер.
• [ ] Тестировать: пробная отправка заказа, проверка payload webhook (лог сервера / requestbin).
• [ ] Убедиться, что API ключи не попадают в браузер.

HTML‑разметка для страницы «Спасибо» (пример):

<h2>Спасибо за заказ!</h2>
<p>Номер заказа: <strong id="order-id">—</strong></p>
<ul id="order-items"></ul>

Полезная схема действий (комбинированный подход):

• Client JS сохраняет snapshot заказа локально — чтобы пользователь видел номер сразу.
• Webhook сохраняет полную структуру на сервере/CRM — для истории, аналитики, письма и восстановления данных.
• Если локальные данные отсутствуют, страница «Спасибо» делает запрос к серверу по orderId (если он есть в URL или запрос был отправлен payment gateway).

Полезные ссылки с примерами и обсуждениями решений:

• Официальная страница «Спасибо» в Tilda
• практические примеры в сообществе: VK‑тема по выводу номера заказа

Отладка, безопасность и типичные ошибки

Что чаще всего ломает вывод номера/состава:

• Опция «передавать товары массивом» не включена — в webhook придёт неструктурированный текст.
• Неправильные имена полей в payload: в разных проектах orderId может называться по‑разному.
• Пытаются делать запросы к CRM прямо из браузера и кладут API‑ключи в JS — так делать нельзя.
• Пользователь не возвращается на success URL (платёж прошёл в новой вкладке/не было редиректа) — тогда client‑only метод не сработает.

Как отлаживать:

• Включите логирование тела webhook на сервере или используйте временный endpoint типа requestbin для проверки.
• В браузере используйте DevTools: Network → смотрите redirect и localStorage.
• В Tilda в разделе форм проверьте «Результаты форм» — там видны поля, которые отправляются.

Безопасность:

• Не храните секреты в клиентском коде.
• Если отдаёте детали заказа через публичный endpoint, добавьте проверку (одноразовый токен или временное ограничение по времени/рефереру).
• Не показывайте в публичном блоке личные данные покупателя без согласия.

Источники

• Как настроить страницу благодарности (успеха)
• Как персонализировать страницу “Спасибо” в Tilda
• Вопросы знающим пользователям Тильды (VK)
• Инструкция модуля интеграции Tilda/Тильда - RetailCRM
• Стандартный личный кабинет с историей заказов на Tilda. Обзор
• Получение запросов из Tilda через webhook / ChatApp

Заключение

Коротко: если нужен быстрый вывод номера — используйте клиентский JavaScript (сохранение в localStorage и рендер на странице «Спасибо»). Если нужен корректный состав заказа, история и интеграция с CRM — подключайте tilda webhook и обрабатывайте данные на сервере через tilda api. Комбинация обоих подходов даёт удобство пользователю и надёжность для бизнеса — ваши tilda заказы будут отображаться корректно и безопасно.