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;
}