Подключение к Tilda
📋 Общее описание
🚀 Быстрый старт
1. Установка кода на Tilda
<script>
/**
* Интеграция Tilda с процессингом SteamFuel
* Версия 2.2
*/
(function() {
'use strict';
const DEBUG = true;
const API_BASE_URL = 'https://wtfpay.tech';
function debugLog(message, data = null) {
if (!DEBUG) return;
console.log(`[SteamFuel Tilda] ${message}`, data || '');
}
function findFormFields() {
const steamSelectors = [
'input[li_name="Steam_ID"]',
'input[name*="steam" i]',
'input[placeholder*="Steam" i]'
];
const telegramSelectors = [
'input[li_name="Telegram_ID"]',
'input[name*="telegram" i]',
'input[placeholder*="Telegram" i]'
];
const sumSelectors = [
'input[li_name="sum"]',
'input[name*="sum" i]',
'input[type="number"]'
];
let steamField = null;
for (const selector of steamSelectors) {
const field = document.querySelector(selector);
if (field) { steamField = field; break; }
}
let telegramField = null;
for (const selector of telegramSelectors) {
const field = document.querySelector(selector);
if (field) { telegramField = field; break; }
}
let sumField = null;
for (const selector of sumSelectors) {
const field = document.querySelector(selector);
if (field) { sumField = field; break; }
}
return { steamField, telegramField, sumField };
}
function showNotification(message, type = 'success') {
const notification = document.createElement('div');
notification.textContent = message;
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: ${type === 'success' ? '#10b981' : '#ef4444'};
color: white;
padding: 12px 24px;
border-radius: 8px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 500;
z-index: 10000;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
animation: slideIn 0.3s ease;
`;
const style = document.createElement('style');
style.textContent = `@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }`;
document.head.appendChild(style);
document.body.appendChild(notification);
setTimeout(() => {
notification.style.opacity = '0';
notification.style.transition = 'opacity 0.5s';
setTimeout(() => {
notification.parentNode?.removeChild(notification);
style.parentNode?.removeChild(style);
}, 500);
}, 3000);
}
async function sendData(formData) {
if (!formData.steamId || !formData.telegram || !formData.amount) {
throw new Error('Заполните все поля');
}
const widgetData = {
amount: formData.amount,
steamId: formData.steamId,
telegram: formData.telegram,
timestamp: new Date().toISOString(),
sourceUrl: window.location.href,
sourceHostname: window.location.hostname,
userAgent: navigator.userAgent,
widgetVersion: '2.2',
source: 'tilda-form'
};
const response = await fetch(`${API_BASE_URL}/api/widget/payment-request`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Origin': window.location.origin },
body: JSON.stringify(widgetData)
});
const result = await response.json();
if (response.ok && result.success) {
return result;
} else {
throw new Error(result.error || `HTTP ${response.status}`);
}
}
async function init() {
await new Promise(resolve => setTimeout(resolve, 1500));
const buttonSelectors = [
'.t396__elem.tn-elem.tn-elem__11600254061749788709501 .tn-atom',
'.tn-atom__button-text',
'button',
'input[type="submit"]'
];
let button = null;
for (const selector of buttonSelectors) {
button = document.querySelector(selector);
if (button) break;
}
if (!button) {
const allElements = document.querySelectorAll('div, span, button, a');
for (const element of allElements) {
const text = element.textContent?.trim();
if (text && text.includes('Пополнить')) {
button = element;
break;
}
}
}
if (!button) return;
button.style.cursor = 'pointer';
button.style.transition = 'opacity 0.2s';
button.addEventListener('mouseenter', () => button.style.opacity = '0.8');
button.addEventListener('mouseleave', () => button.style.opacity = '1');
button.addEventListener('click', async function(event) {
event.preventDefault();
event.stopPropagation();
const originalText = this.textContent;
this.textContent = 'Отправка...';
this.style.opacity = '0.7';
this.disabled = true;
try {
const fields = findFormFields();
const formData = {
steamId: fields.steamField?.value?.trim() || '',
telegram: fields.telegramField?.value?.trim() || '',
amount: fields.sumField?.value ? parseInt(fields.sumField.value) || 0 : 0
};
const result = await sendData(formData);
if (result.success) {
showNotification('✅ Данные направлены, перенаправляю...', 'success');
this.textContent = '✅ Успешно!';
this.style.opacity = '1';
setTimeout(() => {
if (result.requestId) {
const paymentUrl = new URL('https://wtfpay.tech/pay');
paymentUrl.searchParams.set('requestId', result.requestId);
window.location.href = paymentUrl.toString();
}
}, 1500);
}
} catch (error) {
let errorMessage = error.message;
if (errorMessage.includes('Заполните все поля')) {
errorMessage = 'Заполните все поля формы';
}
showNotification(`❌ ${errorMessage}`, 'error');
this.textContent = originalText;
this.style.opacity = '1';
this.disabled = false;
}
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => setTimeout(init, 1000));
} else {
setTimeout(init, 1000);
}
})();
</script>⚙️ Настройка полей формы
Для корректной работы необходимо настроить поля в Tilda:
🎯 Как найти правильные селекторы
Для полей:
Для кнопки:
🔧 Кастомизация скрипта
Изменить селекторы полей:
Изменить селектор кнопки:
📊 Архитектура решения
Схема работы:
Отправляемые данные:
ndpoint:
🐛 Отладка и решение проблем
Включить отладку:
Проверка в консоли:
Частые проблемы и решения:
🔒 Безопасность
Защитные механизмы:
Рекомендации:
📈 Мониторинг
Логи для отладки:
Ключевые метрики:
🔄 Процесс обновления
При изменении формы Tilda:
При обновлении API:
📞 Поддержка
При возникновении проблем:
Контактная информация:
✅ Чеклист внедрения
Последнее обновление