Tilda + CloudPayments + Airtable

README.md

Tilda + CloudPayments + Airtable

Tilda

• Создать на странице сайта кнопку для оплаты.

• Открываем опубликованный сайт
• Наводим курсор на кнопку, правой клавишей мыши открываем контекстное меню, выбираем пункт меню "inspect"
• Находим "класс" кнопки "Оплаты" его надо будет добавить в html/js код

• Открываем редактирование сайта
• В настройках сайта пункт "Ещё"
• Далее "HTML код для вставки внутрь HEAD"
• нажимаете "Редатировать код"
• добавить код из файла embedded.html

embedded.html

<script src="https://widget.cloudpayments.ru/bundles/cloudpayments.js"></script>

<script>
//
//     Параметры которые надо поменять
//
var PUBLIC_ID = 'test_api_00000000000000000000002'  // ID CloudPayments
var BTN_SELECTOR = '.t-btn.t142__submit'   // CSS селектор кнопки оплаты
var AIRTABLE_FORM = 'https://airtable.com/**************'   // адрес формы
var DESCRIPTION = 'Оплата проверки рисунков'  // Описание платежа
var AMOUNT = 100    // Сумма платежа


function pay () {
    var airtableUrl = 
    var widget = new cp.CloudPayments();
    widget.pay('auth',
        { //options
            publicId: PUBLIC_ID, //id из личного кабинета
            description: DESCRIPTION, // назначение платежа
            amount: AMOUNT,  //сумма
            currency: 'RUB', //валюта
        },
        {
            onSuccess: function (options) { // success
                //действие при успешной оплате
                // console.log('DEBUG onSuccess', 'options', options)
                window.location.href = AIRTABLE_FORM
            },
            onFail: function (reason, options) { // fail
                //действие при неуспешной оплате
                //console.log('DEBUG onFail', 'reason', reason, 'options', options)
            },
            onComplete: function (paymentResult, options) { //Вызывается как только виджет получает от api.cloudpayments ответ с результатом транзакции.
                //например вызов вашей аналитики Facebook Pixel
                //console.log('DEBUG onComplete', 'paymentResult', paymentResult, 'options', options)
            }
        }
    )
};

(function () {
    if (document.readyState !== 'loading') {
        init();
    } else {
        document.addEventListener('DOMContentLoaded', init);
    }
})()

function init() {
    try {
        console.log('DEBUG init')

        $(BTN_SELECTOR).click(pay)

    } catch (ex) {
        console.error(ex)
        return
    }
}

</script>