Click — Установка кнопки оплаты

Вариант 1 — Переход по ссылке:
Для перехода на страницу оплаты CLICK необходимо создать кнопку (ссылку) на следующий адрес:
https://my.click.uz/services/pay?service_id={service_id}&merchant_id={merchant_id}&amount={amount}&transaction_param={transaction_param}&return_url={return_url}&card_type={card_type}| # | Наименование параметра | Тип данных | Описание |
|---|---|---|---|
| 1 | merchant_id | mandatory | ID поставщика |
| 2 | merchant_user_id | optional | ID пользователя в системе поставщиков |
| 3 | service_id | mandatory | ID Сервиса поставщика |
| 4 | transaction_param | mandatory | ID заказа(для Интернет магазинов)/лицевого счета/логина в биллинге поставщика. Соответствует merchant_trans_id из SHOP-API |
| 5 | amount | mandatory | Сумма транзакции (формат: N.NN) |
| 6 | return_url | optional | Ссылка, на которую пользователь попадёт после оплаты |
| 7 | card_type | optional | Тип платёжной системы (uzcard, humo) |
* mandatory – обязательный параметр
* optional – необязательный параметр
Пример оформления кнопки (CSS) указан ниже в варианте 2
Вариант 2 — переход по HTML форме:
<form action="https://my.click.uz/services/pay" method="get" target="_blank"> <button typo="submit" class="pay_with_click"><i></i>Оплатить через CLICK</button> <input type=”hidden” name=”KEY” value=”VALUE” /> <input type=”hidden” name=”KEY” value=”VALUE” /> …</form>Для взаимодействия сайта поставщика и интерфейса оплаты CLICK необходимо передать следующие параметры c помощью hidden полей.
| # | Наименование параметра | Тип данных | Описание |
|---|---|---|---|
| 1 | merchant_id | mandatory | ID поставщика |
| 2 | merchant_user_id | optional | ID пользователя в системе поставщиков |
| 3 | service_id | mandatory | ID Сервиса поставщика |
| 4 | transaction_param | mandatory | ID заказа(для Интернет магазинов)/лицевого счета/логина в биллинге поставщика. Соответствует merchant_trans_id из SHOP-API |
| 5 | amount | mandatory | Сумма транзакции (формат: N.NN) |
| 6 | return_url | optional | Ссылка, на которую пользователь попадёт после оплаты |
| 7 | card_type | optional | Тип платёжной системы (uzcard, humo) |
* mandatory – обязательный параметр
* optional – необязательный параметр
Пример формирования формы (PHP Код):
<? $merchantID = 20; //Нужно заменить параметр на полученный ID $merchantUserID = 4; $serviceID = 31; $transID = "user23151"; $transAmount = number_format(1000, 2, '.', ''); $returnURL = "сайт поставщика"; $HTML = <<<CODE <form action="https://my.click.uz/services/pay" id=”click_form” method="get" target="_blank"> <input type="hidden" name="amount" value="$transAmount" /> <input type="hidden" name="merchant_id" value="$merchantID"/> <input type="hidden" name="merchant_user_id" value="$merchantUserID"/> <input type="hidden" name="service_id" value="$serviceID"/> <input type="hidden" name="transaction_param" value="$transID"/> <input type="hidden" name="return_url" value="$returnURL"/> <input type="hidden" name="card_type" value="$cardType"/> <button type="submit" class="click_logo"><i></i>Оплатить через CLICK</button> </form> CODE;Пример конечного HTML кода:
<form id="click_form" action="https://my.click.uz/services/pay" method="get" target="_blank"> <input type="hidden" name="amount" value="1000" /> <input type="hidden" name="merchant_id" value="46"/> <input type="hidden" name="merchant_user_id" value="4"/> <input type="hidden" name="service_id" value="36"/> <input type="hidden" name="transaction_param" value="user23151"/> <input type="hidden" name="return_url" value="сайт поставщика"/> <input type="hidden" name="card_type" value="uzcard/humo"/> <button type="submit" class="click_logo"><i></i>Оплатить через CLICK</button> </form>
CSS код для кнопки:
.click_logo { padding:4px 10px; cursor:pointer; color: #fff; line-height:190%; font-size: 13px; font-family: Arial; font-weight: bold; text-align: center; border: 1px solid #037bc8; text-shadow: 0px -1px 0px #037bc8; border-radius: 4px; background: #27a8e0; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI3YThlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYzhlZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -webkit-gradient(linear, 0 0, 0 100%, from(#27a8e0), to(#1c8ed7)); background: -webkit-linear-gradient(#27a8e0 0%, #1c8ed7 100%); background: -moz-linear-gradient(#27a8e0 0%, #1c8ed7 100%); background: -o-linear-gradient(#27a8e0 0%, #1c8ed7 100%); background: linear-gradient(#27a8e0 0%, #1c8ed7 100%); box-shadow: inset 0px 1px 0px #45c4fc; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27a8e0', endColorstr='#1c8ed7',GradientType=0 ); -webkit-box-shadow: inset 0px 1px 0px #45c4fc; -moz-box-shadow: inset 0px 1px 0px #45c4fc; -webkit-border-radius:4px; -moz-border-radius: 4px; }.click_logo i { background: url(https://m.click.uz/static/img/logo.png) no-repeat top left; width:30px; height: 25px; display: block; float: left; }