Варианты встраивания на сайте QR кода для оплаты:
Рассмотрим подробнее каждый вариант
Для данного варианта можно предварительно сгенерировать нужный QR код, сохранить его на своём сайте в виде изображения и вставить соответствующий тег. Для этого:
- переходим на сервис подготовки QR кода для оплаты
- заполняем реквизиты организации получателя платежа (ИНН, КПП, БИК, р.с., юр.наименование)
- заполняем данные плательщика (ФИО, назначение, сумма). Для бесплатной версии обязательные к заполнению, в платной можно оставить пустыми.
- нажимаем внизу на кнопку «QR ДЛЯ ОПЛАТЫ»
- полученное изображение сохраняем на своём сайте и вставляем тег
<img src="URL" alt="QR код для оплаты">
Где вместо URL указываем путь до файла изображения с QR кодом.
Недостатком такого способа является то, что такой платежный QR код не будет содержать нужных данных плательщика. Будут зафиксированы только банковские реквизиты получателя. И при оплате через мобильное приложение (Сбербанк-Онлайн, Тинькофф и т.п.) придётся вводить данные плательщика вручную.
Данный путь предпологает вставку в свой сайт фрагмента html кода в виде тега iframe.
Преимуществом данного подхода является возможность получения готовой квитанции для оплаты со всем набором реквизитов.
При оплате через Сбербанк-Онлайн, Тинькофф или другим любым банком, плательщику нужно будет всего лишь подтвердить платеж на экране.
Чтобы получить данный код необходимо:
- создать личный кабинет сервиса подготовки квитанций с QR кодом
- оплатить использование сервиса на 1 месяц или 1 год.
- написать на почту analiticexpertpay@gmail.com и получить нужный код для вставки в сайт
Пример полученного html кода:
<iframe src="https://sbqr.ru/simpleQR/siteQR.php?inn=212907189988"
scrolling="no" height="1100px" width="700px" frameborder="0" marginheight="0" marginwidth="0">
</iframe>
Форма выше это образец того - как это будет выглядеть при вставке в сайт
<head>
<style type="text/css">
label {float:left; padding-right:10px;}
.field {clear:both; text-align:right; line-height:25px;}
.main {float:left;}
</style>
</head>
<body>
<form>
<div class="main">
<fieldset>
<legend>Информация для оплаты</legend>
<div class="field">
<label for="lastName">Плательщик </label><input type="text" id="lastName">
</div>
<div class="field">
<label for="Purpose">Назначение </label><input type="text" id="Purpose">
</div>
<div class="field">
<label for="Sum">Сумма (руб.) </label><input type="number" step="0.01" min="0" placeholder="0,00" id="Sum">
</div>
</fieldset>
<input type="button" onClick='getPngQR();' value="QR для оплаты">
<p>
<div id="imageQR"></div>
</p>
</div>
</form>
<script type="text/javascript">
function getPngQR(){
var lastName = document.getElementById("lastName").value.trim();
var Purpose = document.getElementById("Purpose").value.trim();
var Sum = document.getElementById("Sum").value.trim();
var imgText = '<img src="https://sbqr.ru/OVO/api_png_QR.php?PayeeINN=212907189988&lastName=' + lastName + '&Purpose=' + Purpose + '&Sum=' + Sum + '">';
document.getElementById("imageQR").innerHTML = imgText;
}
</script>
</body>
Форма ниже пример данной реализации