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

Кнопка оплаты состоит из HTML кода в виде:

<form action="https://my.click.uz/pay/" method="post" 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 MERCHANT_SERVICE_ID mandatory ID Сервиса поставщика
4 MERCHANT_TRANS_ID mandatory Идентификационные данные пользователя в системе поставщика. Соответствует merchant_trans_id из SHOP-API
5 MERCHANT_TRANS_AMOUNT mandatory Сумма транзакции (формат: N.NN)
6 MERCHANT_TRANS_NOTE mandatory Детали платежа или комментарии
7 MERCHANT_USER_PHONE optional Номер телефона пользователя (формат: 998XXXXXXXXX)
8 MERCHANT_USER_EMAIL optional Email адрес пользователя
9 SIGN_TIME mandatory Текущее время (формат: YYYY-MM-DD hh:mm:ss)
10 SIGN_STRING mandatory Cтрока подписи данных
11 RETURN_URL optional Ссылка, на которую пользователь попадёт после оплаты

* mandatory – обязательный параметр
* optional – необязательный параметр

Параметр SIGN_STRING формируется по алгоритму, который приведен ниже:

MD5(SIGN_TIME + SECRET_KEY + MERCHANT_SERVICE_ID + MERCHANT_TRANS_ID + MERCHANT_TRANS_AMOUNT)

ВНИМАНИЕ! ПОСТАВЩИК НЕСЁТ ПОЛНУЮ ОТВЕТСТВЕННОСТЬ ЗА СОХРАННОСТЬ СЕКРЕТНОГО КЛЮЧА.

Пример формирования SIGN_STRING (PHP Код):

<?
$secret = "CLK-Kjy8p@dIs"; //Нужно заменить параметры на полученные
$date = date("Y-m-d h:i:s");
$merchantID = 20; //Нужно заменить параметр на полученный ID
$merchantUserID = 4;
$serviceID = 31;  $transID = "user23151";
$transAmount = number_format(1000, 2, '.', '');
$signString = md5 ($date. $secret. $serviceID. $transID. $transAmount);
$returnURL = "сайт поставщика";
$HTML = <<<CODE
<form action="https://my.click.uz/pay/" id=”click_form” method="post" target="_blank">
                                    <input id=”click_amount_field” type="hidden" name="MERCHANT_TRANS_AMOUNT" value="$transAmount" class=”click_input” />
                                    <input type="hidden" name="MERCHANT_ID" value="$merchantID"/>
                                    <input type="hidden" name="MERCHANT_USER_ID" value="$merchantUserID"/>
                                    <input type="hidden" name="MERCHANT_SERVICE_ID" value="$serviceID"/>
                                    <input type="hidden" name="MERCHANT_TRANS_ID" value="$transID"/>
                                    <input type="hidden" name="MERCHANT_TRANS_NOTE" value="Оплата OOO MERCHANT"/>         
                                   <input type="hidden" name="MERCHANT_USER_PHONE" value="9989XYYYXXYY"/>
                                    <input type="hidden" name="MERCHANT_USER_EMAIL" value="mail@server.com"/>
                                    <input type="hidden" name="SIGN_TIME" value="$date"/>
                                    <input type="hidden" name="SIGN_STRING" value="$signString"/>
                                    <input type="hidden" name="RETURN_URL" value="$returnURL"/>
                                    <button class=”click_logo"><i></i>Оплатить через CLICK</button>                         
</form>
<div id="click_button" class="field" style="display: none;">                                         
                                    <button typo="submit" class="click_logo"><i></i>Оплатить через CLICK</button>
</div>
CODE;

Пример конечного HTML кода:

<form id="click_form" action="https://my.click.uz/pay/" method="post" target="_blank">
<input id="click_amount_field" type="hidden" name="MERCHANT_TRANS_AMOUNT" value="1000" class="click_input" />
<input type="hidden" name="MERCHANT_ID" value="46"/>
<input type="hidden" name="MERCHANT_USER_ID" value="4"/>
<input type="hidden" name="MERCHANT_SERVICE_ID" value="36"/>
<input type="hidden" name="MERCHANT_TRANS_ID" value="user23151"/>
<input type="hidden" name="MERCHANT_TRANS_NOTE" value="Оплата за услуги OOO MERCHANT"/>
<input type="hidden" name="MERCHANT_USER_PHONE" value="9989XYYYXXYY"/>
<input type="hidden" name="MERCHANT_USER_EMAIL" value="mail@server.com"/>
<input type="hidden" name="SIGN_TIME" value="2013-01-25 12:54:36"/>
<input type="hidden" name="SIGN_STRING" value="8bf80513f8bbacbdc7bf25c75e939f04"/>
<input type="hidden" name="RETURN_URL" value="сайт поставщика"/>
<button class="click_logo"><i></i>Оплатить через CLICK</button>
</form>
 
<div id="click_button" class="field" style="display: none;">
<button typo="submit" class="click_logo"><i></i>Оплатить через CLICK</button>
</div>

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;
}.click_input {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding:7px 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
width: 150px;
}.click_input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted 9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
width: 150px;
}

Для поставщиков где требуется ввод суммы  для оплаты следует использовать следующий JavaScript код:

var initClickButton = function() {
                                 var clickForm = document.getElementById('click_form'),
                                 clickInitButton = document.getElementById('click_pay_button'),
                                 clickButton = document.getElementById('click_button');
                                 clickForm.style.display = 'none';
                                 clickButton.style.display = '';
                                 clickButton.onclick = function() {
                                                     clickForm.style.display = '';
                                                    clickButton.style.display = 'none';
                                                    document.getElementById('click_amount_field').clickAmountField.type = 'text';
                                 }
}
window[ addEventListener ? 'addEventListener' : 'attachEvent' ]( addEventListener ? 'load' : 'onload', initClickButton);

Все параметры, включая SECRET_KEY, передаются поставщику после его регистрации в системе поставщиков CLICK.

Готовый пример кнопки можно посмотреть по ссылке: http://bit.ly/clickMerchantButton

© 2018 Click