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}
# Наименование параметра Тип данных Описание
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 Ссылка, на которую пользователь попадёт после оплаты

* 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 Ссылка, на которую пользователь попадёт после оплаты

* 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"/>
                                    <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="сайт поставщика"/>
<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;
}
© 2018 Click