В этой статье мы разберем реализацию платежей через Qiwi по протоколу HTTP с помощью форм обратной связи компонента Chronoforms 5 на сайтах под управлением Joomla.

Qiwi — российская платежная система и, конечно, на уровне обособленного функционала для форм обратной связи подключение к ней разработчиками не предусмотрено. Но это не значит, что реализовать такое подключение нельзя. Даже, напротив, сделать это очень просто.

HTTP-протокол представляет собой наиболее простой из возможных способов передачи данных для платежного сервиса Qiwi. И если на сайте нет расширения для электронной коммерции, осуществляющего обработку и хранение ответа сервера, или же попросту нужна «форма-попрошайка», то данного способа реализации платежей вполне достаточно.

Здесь мы не будем рассматривать создание полноценной формы заказа потому, что набор полей на таком проекте будет зависеть целиком от требований к параметрам первичной документации конкретного магазина, используемых им прочих платежных систем и наборов уже их параметров, способов доставки и характером расчетов за нее и прочее. Нас же здесь интересует только механизм сбора параметров, минимально необходимых и некоторых дополнительных, и их дальнейшая передача методом GET с помощью HTTP-запроса на сервер Qiwi для дальнейшей обработки.

Для начала, как всегда, определим общий объем работ по реализации Qiwi платежей.

Независимо от того, какой способ приема платежей вы выбрали, для подключения формы сайта к Qiwi необходимо сначала зарегистрировать свой ресурс в этой системе и убедиться, что он одобрен модераторами. Регистрировать свой проект нужно здесь. После утверждения ваш ресурс активируется в системе и ему присваивается уникальный идентификатор «ID проекта». Далее уже можно приступать непосредственно к реализации подключения.

Далее нужно определить, какие именно наборы параметров требуются для системы Qiwi, а какие только для нашего проекта (в зависимости от требований к учету первичной документации). Какие из этих параметров будут меняться от товара к товару динамически, а какие будут являться константами (т. е. постоянными величинами). Исходя из этого, нужно будет произвести некоторые подготовительные работы на стороне самой Joomla и/или имеющегося компонента электронной коммерции.

Завершающим этапом будет создание двух форм обратной связи с помощью компонента Chronoforms 5.

Одна из форм, вспомогательная, будет представлена в модуле и расположена в специально отведенной для нее позиции на странице товара. Ее задачей будет сбор и передача динамических параметров продукта на основную форму. Визуально она будет выглядеть как кнопка «Купить».

Другая же форма будет являться основной. Именно она будет отвечать за объединение динамических параметров и констант в общий HTTP-запрос, который затем отправит на сервер Qiwi, а также перенаправит пользователя для совершения оплаты.

Итак, преступим.

Настройка протокола HTTP на стороне Qiwi

Чтобы настроить требуемый протокол, нужно в панели управления аккуантом Qiwi перейти на страницу «Настройки», слева выбрать пункт «Протоколы», затем — «HTTP-протокол». Активировать его нужно установкой переключателя «Настройки HTTP-протокола» в положение «Включено».

Дополнительно можно включить «Оповещение по email» (также установкой переключателя в соответствующее положение).

На стороне платежной системы Qiwi больше ничего делать не нужно.

Определение набора параметров для создания HTTP-запроса

Список параметров для передачи серверу Qiwi

Имя параметра Описание Пример
Обязательные параметры
from ID  проекта, от имени которого выставляется счет (как правило, это 6-значное целое число). Используется для выставления счета. 156287
summ Сумма счета. Для отделения дробной части нужно использовать точку. Используется для выставления счета. 1.12 / 0.01 / 9999.99 / и т.д.
currency Валюта счета. Можно использовать любую валюту, которая предусмотрена договором с Qiwi. Должна быть в формате ISO 4217 в буквенном или цифровом формате. Используется для выставления счета. RUB / 643, USD, KZT, EUR и т.д.
to Номер телефона пользователя Visa QIWI Wallet, которому Вы выставляете счёт. Прописывается в международном формате со знаком «+», который можно указывать, как в явном, так и в encoded виде "%2B". Может использоваться для просмотра существующего счета совместно с  «id» или «order». %2B74562583656 / +74562583656
Дополнительные параметры
comm Комментарий. Ограничен 255 символами.  
txn_id Номер транзакции в вашей системе. Например, номер заказа в интернет-магазине. 3216564 / TEST_32131 / AP-0624646 и т.д.
successUrl Url, на который перенаправляется пользователь при успешной оплате счета. http://myshop.ru/success
failUrl Url, на который перенаправляется пользователь при неудачной операции оплаты счета. http://myshop.ru/fail
lifetime Время жизни счёта. Формат ISO 8601: ГГГГ-ММ-ДДTЧЧММ. lifetime=2019-02-06T18:16:14+04:00

Список в этой таблице не является полным. Дополнительную, своевременно актуализированную информацию по действующим в системе протоколам передачи данных вы можете найти на страницах своего аккуанта Qiwi.

Примеры HTTP-запросов выставления счета (https://bill.qiwi.com/order/external/create.action):

  • https://bill.qiwi.com/order/external/create.action?comm=test&from=000000&summ=1.01&currency=RUB&to=71234567890
  • https://bill.qiwi.com/order/external/create.action?comm=test&from=000000&summ=1.01&currency=643&to=71234567890
  • https://bill.qiwi.com/order/external/create.action?comm=test&txn_id=0000&from=000000&summ=1.11&successUrl=http%3A%2F%2Ftest.ru%3F&currency=643&to=71234567890

Получилось всего девять полей, в т. ч.:

  • неизменные (константы):
    1. from;
    2. currency;
    3. successUrl;
    4. failUrl;
  • изменяемые от счета к счету (динамические):
    1. summ;
    2. comm;
    3. txn_id
    4. lifetime
    5. to

При этом два параметра из числа последних, «summ» и «comm», необходимо получать со страницы оплачиваемого продукта. Параметры «txn_id» и «lifetime» придется генерировать самим в скрипте функционала основной формы. А поле «to» будет заполняться уже самим пользователем.

Обеспечение хранения индивидуальных параметров товара на стороне Joomla 3

Исходя из описанного выше, для нашей формы приема платежей нужны:

  1. одно пользовательское поле для хранения цены товара;
  2. две страницы для перенаправления пользователя со страницы сервиса Qiwi снова на наш сайт по завершении транзакции (одна страница для результата успешной оплаты, другая — для ошибки транзакции).

Если вы создаете платежную форму для дальнейшей интеграции в приложение электронной коммерции (Virtuemart, JoomShopping и тд), то проблему хранения индивидуальных параметров товара (см.п.1) можно считать уже решенной. На форме их можно будет получать с помощью API-функций, предоставляемых  приложением.

Создаем в «Менеджере материалов» эти страницы с соответствующими сообщениями в свободной форме. Оформлять их можно как угодно — на ваше усмотрение. Добавляем соответствующие им пункты в меню сайта, которые можно скрыть от пользователей, а сами страницы исключить из списка файла sitemap.xml.

Далее в главном меню панели управления Joomla открываем «Материалы» и «Группы полей». Создаем группу «Магазин» (для материалов!!!), заполняя только поле «Заголовок» (больше здесь ничего делать не нужно).

Теперь создаем пользовательское поле «price» для группы «Магазин» и настраиваем следующим образом:

Создание пользовательского поля для категории материалов Joomla и использования на форме Chronoforms5

Рис. 1

Если это поле настроили правильно, то оно должно появиться в списке параметров каждой статьи той категории, которая была указана при создании в поле «Категория» (см. рис. 1).

Вывод пользовательского поля с ценой товара в параметрах материала Joomla

Рис. 2

На этом все работы по определению динамических параметров на стороне Joomla закончили. Осталось создать сами формы обратной связи.

Создание формы обратной связи для формирования запроса к серверу Qiwi

Начнем с формы-кнопки.

Для нее нужны всего 3 элемента — два поля с типом «hidden» и одна кнопка, для которой устанавливаем тип «submit». Имена полей «hidden» можно указывать на свое усмотрение. Их значения нужно так же оставить пустыми.

Сейчас форма во вкладке «Дизайнер» выглядит так:

Настройка интерфейса формы с кнопкой Купить во вкладке Дизайнер в конструкторе Chronoforms5

Рис. 3

Переходим теперь к функциям этой формы, во вкладку «Установка».

У нас при создании формы уже сгенерированы события «On load» и «On submit». Помещаем в область события загрузки две функции, «Custom Code» и «HTML (Render Form)». В область события отправки помещаем всего один элемент-обработчик — «Redirect». В итоге во вкладке «Установка» должно получиться нечто подобное:

Настройка функционала формы-кнопки во вкладке Установка в конструкторе Chronoforms5

Рис. 4

Функцию «HTML (Render Form)» оставляем как есть, по умолчанию. А в поле «Контент» функции «Custom Code» помещаем следующее:

<?php
 //////////////// Сумма  ////////////////////////////////////
  $article_id = JRequest::getInt('id');
                                                      // получаем массив имен jcfields по ID статьи
  $customFieldnames = FieldsHelper::getFields('com_content.article', $article_id, true);
                                                      // получаем массив идентификаторов jcfields по массиву имен $customFieldnames
  $customFieldIds = array_map(create_function('$o', 'return $o->id;'), $customFieldnames);
                                                      // получаем модель  jcfields
  $model = JModelLegacy::getInstance('Field', 'FieldsModel', array('ignore_request' => true));
                                                      // получаем массив значений  jcfields по массиву идент-ров $customFieldIds
 
  $customFieldValues = $model->getFieldValues($customFieldIds, $article_id);
 
  $customFValue = null;
  foreach ($customFieldValues as $value) {
  $customFValue = $value;    // у нас поле всего одно
  }
                                      
 $form->data['hidden28'] = $customFValue; // Передаем    

//////////////// Заголовок статьи  как наименование товара  ///////////////////
  $doc = \JFactory::getDocument();  
  $title = $doc->getTitle();
  $form->data['hidden29'] = $title; // Передаем

?>

И последний на этой форме обработчик – «Redirect». Его настраиваем следующим образом:

Настройка функции Redirect на форме Chronoforms 5 для перенаправления на другую форму

Рис. 5

Здесь хочу обратить ваше внимание на то, что имена параметров URL должны в точности соответствовать их названиям в таблице выше. Поле «URL-адрес перенаправления» можно пока оставить пустым. Здесь должна быть ссылка на основную форму. Мы ее скопируем и вставим сюда после того, как закончим с той самой основной формой и выведем ее на сайте.

С формой-кнопкой закончили. Ее сохраняем, закрываем и создаем модуль в панели управления Joomla с типом «ChronoForms5». В его настройках указываем алиас данной формы. Во вкладке «Привязка к пунктам меню» выбираем тот пункт, который отвечает за вывод категории товаров (для которой мы выше создавали пользовательское поле в ценой).

Если все сделали правильно, то на каждой странице категории товаров должна отображаться кнопка «Купить».

Пока значение в поле «URL-адрес перенаправления» функии «Redirect» формы не установлено, проверить мы ее работу не сможем. Поэтому переходим к созданию следующей формы.

На второй, основной форме должны располагаться как поля, необходимые передачи в Qiwi отобранных нами выше параметров, так и вспомогательные (те, что отвечают за формирование документа первичного учета, например).

На моей форме все поля расположены внутри элемента-контейнераContainer» из группы «Advanced»), которому я присвоила тип «Custom» в поле «Type» его настроек.

Далее в поле настроек «Start Code» этого же элемента размещаем стили для таблицы счета:

  <style>
  .tableresponse {
          border: 2px solid #777;
          width: 100%;
          margin: 0.3em 0;
          padding: 0;
          word-wrap: break-word;
          border-collapse: collapse;
          border-spacing: 0;
          display: table;
      }
      .tableresponse, .tableresponse * {
          box-sizing: border-box;
          vertical-align: baseline;
      }
      .tableresponse thead {
          display: table-header-group;
          border-color: inherit;
      }
      .tableresponse tr {
          display: table-row;
          border: 1px solid #777;
          text-align: center;
      }
      .tableresponse td, .tableresponse th {
          display: table-cell;
          vertical-align: inherit;
          padding:0.3em !important;
          border: 1px solid #999;
      }
      .tableresponse th  {
          font-style:italic;
          font-weight:bold;
          color:#666;
          border: 2px solid #777;
          text-align:center !important;
      }
      .tableresponse td  {
          border-left: 2px solid #777;
      }
      .tableresponse td:first-child, .tableresponse th:first-child  {
          text-align:left !important;
      }
      
      @media screen and (max-width: 480px) {
      
        .tableresponse thead {
             display: none;
        }
        .tableresponse td:before {
            content: attr(data-label);
            float: left !important;
            clear:right;
            font-style:italic;
            font-weight:bold;
            color:#777;
            padding:0.3em !important;
            margin-top:-0.3em;
            vertical-align: baseline;
        }
        .tableresponse tr {  
            display: block;
            border-bottom: 2px solid #777;
            border-left:none;
            border-right:none;
        }
        .tableresponse > * > tr + tr {
           margin-top:0.8em;
        }
        .tableresponse td {
          display: block;
          text-align: right;
          border: 0;
          border-bottom: 1px solid #999;
          width: 100%;
        }
        .tableresponse td:first-child {
            text-align:right !important;
            border-top: 2px solid #777;
        }
        .tableresponse th:first-child {
            text-align:left !important;
        }
      }
  </style>

Самое время разобраться с остальными элементами на основной форме. Их набор таков: 8 полей с типом «hidden», 1 поле «Custom» (так же из группы «Advanced»), 1 поле «Text Box» и 1 кнопка «Submit Button». В итоге выглядит интерфейс основной формы во вкладке «Дизайнер» так:

Интерфейс основной формы для передачи данных на сервер Qiwi по протоколу HTTP

Рис. 6

Для двух полей «hidden» нужно указать в качестве имен и идентификаторов те имена, которые были указаны в параметрах url, передаваемых формой-кнопкой с помощью функции «Redirect» (см. рис. 5).

Имена и идентификаторы остальных полей на основной форме некритичны. Их можно оставить как есть. А можно присвоить соответственно представленной выше таблице.

Теперь разберемся с настройками ряда скрытых полей:

  1. «from» — 6-значное целое число, соответствующее ID вашего проекта (берется из аккуанта Qiwi).
  2. «currency» — код валюты, состоящий из трех латинских букв, указанных в верхнем регистре, либо цифр (смотрим примеры и таблицу выше).
  3. «successUrl» — ссылка на ту страницу, которую создавали для перенаправления в случае успешного завершения транзакции.
  4. «failUrl» — ссылка на страницу сайта, которую создавали для перенаправления пользователя при неудачной транзакции.

Значения остальных полей «hidden» не указываем, оставляем, как есть.

Открываем следующий за ними элемент «Custom» для редактирования и в поле «Code» помещаем такой кусок смешанного кода:

  <h2 align="center">Форма оплаты через Qiwi  по протоколу Http</h2>
  <table class="tableresponse">
  <thead>
      <tr>
          <th>
              Номер транзакции</th>
          <th>
              Товар</th>
          <th>
              Сумма</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td data-label="Номер транзакции">
              <?php echo $form->data['txn_id']; ?></td>
          <td data-label="Товар">
              <?php echo $form->data['comm']; ?></td>
          <td data-label="Сумма">
              <?php echo $form->data['summ']; ?></td>
      </tr>
  </tbody>
  </table>

Настройка элемента Custom интерфейса формы Chronoforms5

Рис. 7

Здесь получилось содержимое счета в форме таблицы (для которой и создавали стилизацию выше), включающей следующие поля: номер транзакции «txn_id», суммы «summ» и комментария «comm», которых у нас пока нет. Номер транзакции будем генерировать сами в ходе настройки функционала формы во вкладке «Установка». А вот значения суммы «summ» и комментария «comm» нам передаст наша вспомогательная форма с кнопкой «Купить». — Именно поэтому имена этих полей мы указали в соответствии с url-параметрами функции «Redirect» предыдущей формы. В противном случае пришлось бы получать их с помощью дополнительного php-кода.

Далее идет текстовое поле. Оно на этой форме одно. Этому элементу во вкладке «Основные настройки» я присвоила имя и идентификатор равными «to». Заполняем метку «Label» по своему усмотрению. Здесь же выберем значение маски «Mask», соответствующее телефоным номерам:

Настройка маски для ввода номера телефона в текстовое поле формы Chronoforms5

Рис. 8

Во вкладке «Валидация» в поле «Обязательное» нужно установить значение «Да». Остальные настройки изменять не нужно.

Последний элемент — кнопка. У нее все настройки оставляем как есть. Меняем только надпись по своему усмотрению.

С настройкой интерфейса основной формы закончили. Во вкладке «Дизайнер» больше ничего делать не нужно.

Переходим во вкладку «Установка».

Здесь выбираем и располагаем в событиях формы функции в точности, как это сделали при настройке предыдущей формы (см. рис. 4).

Теперь непосредственно  к настройкам этих функций.

Обработчик «HTML (Render Form)» так же, как и на предыдущей форме, никакой дополнительной настройки не требует. Оставляем все как есть. А в код функции «Custom Code», расположенной над «HTML (Render Form)», добавляем следующие строчки:

  <?php                          
  //////////////////// Получаем  и передаем транзакцию ///////////////////////////
  // Если нет компонента электронной коммерции и уникальный номер
  // транзакции взять неоткуда, пользуемся целиком собственной фантазией
  // у меня формула следующая: 3-рандомных-латинских-буквы_ID-статьи_текущее-число-и-время
    $result = '';
    $array = array_merge(range('A','Z'));
    for($i = 0; $i < 3; $i++){
                $result .= $array[mt_rand(0, 25)];
    }
    $alpha =  $result;
    $aID = JRequest::getInt('id');
    $datetime = date ("dmYHis");
    $form->data['txn_id'] = $alpha.'_'.$aID.'_'.$datetime;
 
  //////////////////// Получаем  и передаем время жизни счета ///////////////////////////
    $date= strtotime('+3 days');
    $newDate = date('c', $date);
    $form->data['lifetime'] = $newDate;
  ?>

С помощью этого кода сформировали недостающие два параметра — «txn_id» и «lifetime».

Таким образом, весь набор параметров собран. Остается только настроить его передачу серверу Qiwi путем формирования HTTP-запроса методом GET.

Для этого настраиваем функцию «Redirect» в теле обработчика события «On load» следующим образом:

Настройка обработчика Redirect для основной формы, передающей http-запрос на сервер Qiwi

Рис. 9

С формой закончили. Сохраняем ее и закрываем. Теперь переходим к настройкам меню сайта и создаем очередной пункт с типом «ChronoForms5». Во вкладке «Основные параметры» этого пункта меню сайта в поле «Form Name» указываем имя нашей основной формы (алиас). Во вкладке «Параметры ссылки» в поле «Показать в меню» устанавливаем переключатель в положение «Нет». Таким образом, у нас получится скрытая, но рабочая ссылка меню, которую нужно указать в поле «URL-адрес перенаправления» функции «Redirect» формы-кнопки (см. рис. 5).

Остальные настройки этого пункта меню сайта целиком на ваше усмотрение.

Вот теперь, когда обе формы готовы и все необходимые настройки произведены, можно проверить, как работает проект.

Для этого переходим на страницу товара и кликаем по кнопке «Купить». Если все сделали внимательно и правильно, то откроется страница с основной формой. Далее при заполнении поля с номером телефона и отправке формы мы должны попасть на страницу сервиса платежной системы Qiwi.

Добавить комментарий