Как правильно прописать вызов функции на событие, например, нажатие кнопки «Оплатить»?

Question

[Алексей]

Здравствуйте! Недавно подключил на сайт платежную форму от CloudPayments. В их документации показан такой скрипт платежной формы:

var payments = new cp.CloudPayments({
    language: "ru-RU",
    email: "",
    applePaySupport: false,
    googlePaySupport: true,
    yandexPaySupport: true,
    tinkoffInstallmentSupport: true,
});

payments.pay("charge", {
    publicId: "ВАШ_ID",
    description: "Тестовая оплата",
    amount: 100,
    currency: "RUB",
    invoiceId: "",
    accountId: "",
    email: "",
    skin: "classic",
    requireEmail: true,
}).then(function(widgetResult) {
    console.log('result', widgetResult);
}).catch(function(error) {
    console.log('error', error);
});

Я добавил этот код, прямо перед закрывающимся body. Но форма оплаты почему-то вызывается, как только заходишь на сайт. А нужно, чтобы вызывалась при клике на кнопку.

В их документации также указано:

И прописать вызов функции на событие, например, нажатие кнопки «Оплатить»:

$('#checkout').click(pay);

Но, как бы я не пытался - форма оплаты все равно показывается при открытии страницы сразу. Подскажите, что я делаю не так. Заранее спасибо!

Comments

[StiflerProger]

напиши html карточки товара, или просто сайт свой скинь, тогда можно будет нормально подсказать. Пока только причину по которой оплата сразу открывается можно сказать

Answer 1

[StiflerProger]

ну потому-что тебе в html нужно просто добавить

var payments = new cp.CloudPayments({
    language: "ru-RU",
    email: "",
    applePaySupport: false,
    googlePaySupport: true,
    yandexPaySupport: true,
    tinkoffInstallmentSupport: true,
});

а второй участок кода, уже запихнуть в функцию, и вызывать её по клику.
А сейчас у тебя как только загружается страница выполняется метод payments.pay(...> который открывает форму оплаты

upd:

--<a href = "#pay" class="btn btn-success d-block btn-lg ajax-modal"><?php echo html_svg_icon('solid', 'shopping-cart'); ?> Купить</a>
++<a href = "#pay" onclick="checkout" class="btn btn-success d-block btn-lg ajax-modal"><?php echo html_svg_icon('solid', 'shopping-cart'); ?> Купить</a>

в после body добавить это

<script>
var payments = new cp.CloudPayments({
    language: "ru-RU",
    email: "",
    applePaySupport: false,
    googlePaySupport: true,
    yandexPaySupport: true,
    tinkoffInstallmentSupport: true,
});

function checkout() {
  payments.pay("charge", {
    publicId: "ВАШ_ID",
    description: "Тестовая оплата",
    amount: 100,
    currency: "RUB",
    invoiceId: "",
    accountId: "",
    email: "",
    skin: "classic",
    requireEmail: true,
  });
}
</script>

Comments

[Алексей]

Не подскажете пошаговый процесс?) Что и куда разместить, и как на кнопку правильно повесить вызов этой формы. Отблагодарю на пиво

[StiflerProger]

Алексей, просто либо скинь ссылку на сайт свой, либо HTML карточки товара

[StiflerProger]

а так пошаговый процесс такой
1. Добавить в html первый блок кода, var payments = new cp.CloudPayments
2. Добавить метод оплаты в тэге

[Алексей]

StiflerProger, https://disk.yandex.ru/d/tc02Wlm_NViDDQ - внутри архива два файла - main.tpl.php - это основная разметка сайта и addons_item.tpl.php - страница карточки товара

В файле main.tpl.php подключен скрипт в head от cloudpayments такого формата:

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

Может неправильно его подключил, но на странице документации указано что надо именно так: https://developers.cloudpayments.ru/#demo-widget

[StiflerProger]

Алексей, обновил ответ. Но у тебя тут без данных по цене и тп будет открываться.

[Алексей]

StiflerProger, сделал все по вашей инструкции - форма перестала открываться при загрузке страницы. Но и при клике на кнопку ничего не происходит ((

[Алексей]

StiflerProger, и не совсем понял про "ну потому-что тебе в html нужно просто добавить"

var payments = new cp.CloudPayments({
    language: "ru-RU",
    email: "",
    applePaySupport: false,
    googlePaySupport: true,
    yandexPaySupport: true,
    tinkoffInstallmentSupport: true,
});

Это просто также в head можно прописать? Но зачем тогда перед закрывающимся body то же самое объявляется? Совсем запутался (((

[StiflerProger]

Алексей, в консоли что-то пишется?

[StiflerProger]

сайт скинули бы, было бы проще)

[Алексей]

StiflerProger, можно куда-то в лс?

[StiflerProger]

Алексей, через минут 40 напишу, сейчас занят резко стал) я по документации не правильно подключил скрипт вам, поэтому ничего не происходит

[Алексей]

Хорошо, спасибо ) Всё таки, если поможете, с радостью бы отблагодарил вас

Answer 2

[Загир Меджидов]

Для того чтобы вызвать функцию pay() при нажатии на кнопку «Оплатить», нужно прописать следующий код:

$('#checkout').click(function() {
    payments.pay("charge", {
        publicId: "ВАШ_ID",
        description: "Тестовая оплата",
        amount: 100,
        currency: "RUB",
        invoiceId: "",
        accountId: "",
        email: "",
        skin: "classic",
        requireEmail: true,
    }).then(function(widgetResult) {
        console.log('result', widgetResult);
    }).catch(function(error) {
        console.log('error', error);
    });
});

В этом коде мы используем метод click() объекта jQuery для привязки функции к событию клика на кнопке с id checkout. Внутри этой функции вызываем функцию payments.pay(), которая откроет форму оплаты. Теперь форма будет вызываться только при клике на кнопку «Оплатить»

Answer 3

[Kardanchik]

На данный момент при генерации виджета изменился нейминг параметра tinkoffInstallmentSupport -> tinkoffPaySupport
Пример использования функции new cp.CloudPayments() со всеми возможными кнопками (актуальный на момент написания комментария):

var payments = new cp.CloudPayments({
    language: "ru-RU",
    applePaySupport: true,
    googlePaySupport: true,
    yandexPaySupport: true,
    tinkoffPaySupport: true,
    mirPaySupport: true,
    sbpSupport: true
});