Виджет для сайта — скрипт (JS или JQuery) +HTML для изменения

Задача

Написать виджет для сайта — скрипт (JS или JQuery) +HTML для изменения в браузере опций в атрибуте платежной кнопки Сбер эквайринга из инпутов и рэнж-слайдера для вызова скрипта оплаты с переменными данными.

Нужно 2 виджета:

Для фиксированной цены:

Пользователь вводит в 1 поле — Фамилию Имя Отчество, в поле 2 — Номер телефона. И кликает на кнопку Оплатить, срабатывает скрипт приема оплаты с измененными даннымиПри вводе опция description атрибута onclick меняет содержимое на значения из инпутов + Название страницы из тега . </p><p> </p><p>Итоговый код кнопки перед кликом </p><p><code> </p><p><a onclick="ipayCheckout({ </p><p> amount:500, </p><p> currency:'RUB', </p><p> order_number:'', </p><p> description: 'Название страницы из тега <title> / Иванов Иван Иванович / +7 910 1234567'}, </p><p> function(order) { showSuccessfulPurchase(order) }, </p><p> function(order) { showFailurefulPurchase(order) })" </p><p> </p><p> class="btn btn-xs btn-outline btn-primary">Оплатить 500 руб. </p><p></a> </p><p></code> </p><p> </p><p><b>Для изменяемой цены:</b> </p><p>Пользователь вводит в 1 поле — Фамилию Имя Отчество, в поле 2 — Номер телефона, в рэнж-слайдере выбирает значение от 500 до 10 000 с шагом 500 (при этом изменяется сумма выше слайдера и на кнопке оплаты). И кликает на кнопку Оплатить, срабатывает скрипт приема оплаты с измененными данными. </p><p> </p><p>При вводе опция description атрибута onclick меняет содержимое на значения из инпутов + Название страницы из тега <title>. Опция amount меняет значение на сумму из рэнж-слайдера. </p><p><code> </p><p><a onclick="ipayCheckout({ </p><p> amount:1500, </p><p> currency:'RUB', </p><p> order_number:'', </p><p> description: 'Название страницы из тега <title> / Иванов Иван Иванович / +7 910 1234567'}, </p><p> function(order) { showSuccessfulPurchase(order) }, </p><p> function(order) { showFailurefulPurchase(order) })" </p><p> </p><p> class="btn btn-xs btn-outline btn-primary">Оплатить 1500 руб. </p><p></a> </p><p></code> </p><p> </p><p><b>Требования к верстке и доп. сведения</b><ul><li>JS или JQuery (минималистичный код).<li>HTML Bootstrap 4<li>CSS не нужен, за исключением рэнж сладера. Слайдер должен выглядеть примерно как на эскизе.<li>Должно работать на десктопах и на тачскринах.</ul>Инструкция по настройке кнопки Сбербанка:<a href="<a href="https://securepayments.sberbank.ru/wiki/doku.php/integration:paybutton:start">https://securepayments.sberbank.ru/wiki/doku.php/integration:paybutton:start</a></p>">https://securepayments.sberbank.ru/wiki/doku.php/integration:paybutton:start">https://securepayments.sberbank.ru/wiki/doku.php/integration:paybutton:start</a></p></a>