Skip to end of metadata
Go to start of metadata

Панель управления PayU позволяет создавать и редактировать оформление платежной формы (создавать и редактировать шаблоны). 

Для того чтобы создать новый шаблон:

  1. Зайдите в мастер создания шаблона через навигационную панель слева: Дизайн интерфейса > Шаблоны.
  2. Нажмите на кнопку Добавить шаблон.
  3. Введите имя шаблона в одноименное поле.
  4. Укажите доступные языки для шаблона (русский активен по умолчанию).
  5. Привяжите шаблон к группам товаров, если необходимо. Это можно сделать сейчас или позднее, нажав на ссылку Ассоциировать сейчас. При этом откроется список групп, где нужно будет зайти в редактор группы и внести необходимые для привязки шаблона изменения.
  6. Сохраните новый шаблон (кнопка Сохранить внизу экрана). Ряд настроек доступен только после сохранения нового шаблона.
  7. Выберите режим настройки шаблона: простая кастомизация или продвинутая (флаги внизу страницы).
  8. Если выбрана простая кастомизация, задайте настройки шаблона следующим образом (см. также рис.):

     Создание шаблона базовыми средствами

    1. Выберите цвет фона или фоновое изображение (из списка загруженных через Медиа-центр). Обратите внимание, что исходные настройки, заданные css-cтилем в html-редакторе имеют приоритет над базовыми пользовательскими настройками. 
    2. Поэтому, чтобы применить настройки фона, необходимо внести изменения в код:
      1. Зайдите в блок кода Meta.
      2. Удалите строку (строка может иметь немного иной вид/содержать ссылку на другое изображение, в зависимости от редактируемого исходника):  

        background: url('https://secure.payu.ua/images/merchant/f1daf122cde863010844459363cd31db/bodyBG%5B1%5D.png')  rightbottom no-repeat; 

      3. Сохраните обновление кода.
    3. Выберите шрифты для текста и ссылок форме из списка. Если вы хотите использовать другие шрифты, необходимо редактировать html-код вручную.
    4. Выберите цвета для текста и ссылок.
    5. Определите цвета для элементов формы.

      Чтобы понять, какой цвет соответствует какому элементу, откройте в окне предварительного просмотра вид шаблона по умолчанию.
    6. Обратите внимание, что, как и в случае с фоном формы, цвет границ блоков определен стилем в коде, который имеет приоритет. Поэтому, чтобы применить пользовательские 
      1. Зайдите в блок кода Meta. Формально этот блок относится к "шапке" страницы (<head></head>). В данном случае там настраиваются стили блоков.
      2. Удалите указанные на рисунке ниже строки из выделенных блоков (номера строк/точное содержание могут варьироваться в зависимости от шаблона по умолчанию, который редактируется). Вы также можете внести изменения непосредственно в код, введя нужный цвет в формате "hex" и ссылку на изображение (если оно загружено в Медиа-центр).
      3. Сохраните изменения.
    7. Сохраните изменения шаблона.
  9. Если выбрана продвинутая кастомизация, изменения вносятся непосредственно в блоки кода следующим образом:

     Процедура продвинутой настройки шаблона
    1. Блок Титул страницы предназначен для редактирования названия вкладки, в которой открывается платежная форма. Введите нужное название в поле.
    2. Перейдите к блоку Меtа, который содержит таблицы стилей, применяемые по умолчанию. Формально этот блок относится к "шапке" страницы (<head></head>). В данном случае там настраиваются стили блоков. Используя этот блок вы можете отредактировать цвета элементов интерфейса, шрифты (виды и размер), вставить изображения для оформления кнопок, фона и пр.

      Пример настройки фона в CSS
      body {
          font-family: "Trebuchet MS","Helvetica Neue",Helvetica,Jamrul,sans-serif;
        }
        body {
          margin: 0;
          padding: 0 200px;
          background: url('https://secure.payu.ua/images/merchant/f1daf122cde863010844459363cd31db/bodyBG%5B1%5D.png')  rightbottom no-repeat;
        }
        .bodyBG {
          bottom: 0;
          position: fixed;
          right: 0;
          z-index: 0;
        }
        .merchant-logo-right {
          float: right;
          clear: both;
        }

      В показанном выше блоке настраивается цвет фона/изображение и его расположение, основной шрифт, положение логотипа ТСП.

      Пример блока товара в платежной форме
      .order__box .order__box__title{
          padding:3px 0;
          -webkit-border-top-left-radius: 4px;
          -moz-border-radius-topleft: 4px;
          border-top-left-radius: 4px;
          -webkit-border-top-right-radius: 4px;
          -moz-border-radius-topright: 4px;
          border-top-right-radius: 4px;
          background:#009cdd url('https://secure.payu.ru/images/merchant/c5f441cd5f43eb2f2c024e1f8b5d00cd/payu_arrow.png') 99%0 no-repeat;
          color:#fff;
          text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3);
          text-align:left;
        }
       .order__box .order__box__title .order__box__aux2{min-height:10px}
       .order__box__aux1{
          -webkit-border-top-left-radius: 5px;
          -moz-border-radius-topleft: 5px;
          border-top-left-radius: 5px;
          -webkit-border-top-right-radius: 5px;
          -moz-border-radius-topright: 5px;
          border-top-right-radius: 5px;
        }
        .order__box__aux2 table{width:100%}
        .order__box__aux2 table tr td{padding:5px 0}
        .order__box .order__box__content{
          -webkit-border-bottom-left-radius: 5px;
          -moz-border-radius-bottomleft: 5px;
          border-bottom-left-radius: 5px;
          -webkit-border-bottom-right-radius: 5px;
          -moz-border-radius-bottomright: 5px;
          border-bottom-right-radius: 5px;
          background:url('https://secure.payu.ru/images/merchant/c5f441cd5f43eb2f2c024e1f8b5d00cd/gray_gradient.png') 0 100%repeat-x;
        }
        .order__checkout__products__table{
          width:100%;
        }
        .order__box__aux2 .order__checkout__products__table__content, .order__verify__products__table{
          width:100%;
          border-top:1px solid #e2e2e2;
          border-right:1px solid #e2e2e2;
          background:#fff;
        }
        .order__box__aux2 .order__checkout__products__table__content td, .order__verify__products__table tr td{
          padding:10px 5px;
          border-bottom:1px solid #e2e2e2;
          border-left:1px solid #e2e2e2;  
        }
        .order__listing__header{
          background: #e9e9e9;
        }
        #order__sub__total__row{
          display: block;
          float: right;
          margin-top: -15px;
        }
        #order__sub__total__row td{
          text-align:right;
        }
        #order__sub__total__row td div{
          margin:0 0 3px 0;
        }
        .order__total{
          border-bottom: 1px dotted #CCCCCC;
          color: #1C3A85;
          font-size: 14px;
          font-weight: bold;
          padding: 0 0 3px;
        }
        .order__giftoption{
          display:block;
          position:absolute;
          bottom:65px;
        }

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

      Пример оформления блока для ввода платежной информаци
      .order__checkout__billing__content tr td{padding: 0 10px 10px 0;}
        .order__checkout__form__label{width:200px; padding:0px 10px !important; text-align:right;}
        #payment__methods .order__checkout__form__label span{margin:-22px 0 0 0; display:block; }
        #order__payment__methods__details__link{display: block;margin: 5px 0;}
        div.order__checkout__button__container{margin: 20px auto;}
        .order__checkout__billing__content input.text{width:250px !important;}
        .order__checkout__billing__content select.select{width:255px !important;}
        #order__statement__legal{line-height:18px;font-style: italic}
      
        .order__ccprocess__form__edit select.select{width:205px;}
        .order__ccprocess__form__edit select#cbExpMounth{width:127px !important;}
        .order__ccprocess__form__edit select#cbExpYear{width:65px !important;}

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

    3. Перейдите в блок HTML-код. Он предназначен для редактирования разметки "тела" страницы (<body></body>). Используя его, вы можете, например, добавить дополнительные изображения/элементы на платежную страницу. 

      Например, показанный ниже код позволяет отображать логотип Verified by Visa/MasterCard SecureCode вверху страницы (установлена ссылка на изображение, загруженное через Медиа-центр).

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <!--  
        <tr>
          <td align="center"><img src="https://secure.payu.ru/images/merchant/c5f441cd5f43eb2f2c024e1f8b5d00cd/chart_banner_top.png"></td>
        </tr>
      -->
        <tr>
          <td align="center">
            <table width="760" align='center' style="margin:10px 0 20px;">
              <tr>
                <td><img src='https://secure.payu.ru/images/verifiedbyvisa-t.gif'>&nbsp;<imgsrc='https://secure.payu.ru/images/mastercardsecurecode-t.gif'></td>
                <td align='right'><--{HACKERSAFE_LOGO}--></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td align="center">
            <--{PAGECODE}-->
          </td>
        </tr>
        <tr>
          <td align="center">
            <table align='center'><tr><td>Copyright 2013 - PayU</td></tr></table>
          </td>
        </tr>
      </table>

    4. Перейдите в блок Код JavaScript. По умолчанию блок содержит сценарии для отображения блоков платежной формы и их обработки. Продвинутые пользователи, обладающие навыками программирования, могут вносить изменения и/или дополнительные сценарии. Обратите внимание, что вы также можете загружать файлы в формате .js через Медиа-центр и привязывать их к шаблонам. 

      В этом блоке вы можете задать правило для ввода телефонного номера в платежную форму. Например, если ожидается, что в телефонном номере не менее 11 символов, код имеет следующий вид:

      Проверка номера телефона
      <script type="text/javascript">
        $("#phone").mask("+9(999)999-99");
      </script>

      При этом на экране отобразится подсказка для ввода:

      Ниже представлен более сложный вариант кода, который позволяет привязывать правило валидации номера к стране покупателя. 

      Выбор правила валидации телефона по стране
      <script type="text/javascript">
      countryPrefix = new Array();
      countryPrefix["117"]="+999";countryPrefix["60"]="+9-999";countryPrefix["10"]="+9";countryPrefix["12"]="+99";countryPrefix["13"]="+99";countryPrefix["14"]="+999";countryPrefix["77"]="+999";countryPrefix["19"]="+999";countryPrefix["20"]="+99";countryPrefix["56"]="+999";countryPrefix["57"]="+99";countryPrefix["59"]="+9-999";countryPrefix["63"]="+99";countryPrefix["67"]="+999";countryPrefix["26"]="+999";countryPrefix["72"]="+999";countryPrefix["73"]="+99";countryPrefix["80"]="+999";countryPrefix["81"]="+99";countryPrefix["84"]="+99";countryPrefix["98"]="+999";countryPrefix["104"]="+999";countryPrefix["105"]="+99";countryPrefix["107"]="+99";countryPrefix["115"]="+9";countryPrefix["115"]="+999";countryPrefix["122"]="+999";countryPrefix["123"]="+999";countryPrefix["124"]="+999";countryPrefix["139"]="+999";countryPrefix["243"]="+999";countryPrefix["150"]="+99";countryPrefix["152"]="+99";countryPrefix["159"]="+99";countryPrefix["169"]="+99";countryPrefix["170"]="+999";countryPrefix["237"]="+99";countryPrefix["174"]="+9";countryPrefix["109"]="+9";countryPrefix["242"]="+999";countryPrefix["185"]="+999";countryPrefix["186"]="+999";countryPrefix["191"]="+99";countryPrefix["201"]="+99";countryPrefix["202"]="+99";countryPrefix["205"]="+999";countryPrefix["213"]="+99";countryPrefix["214"]="+999";countryPrefix["218"]="+99";countryPrefix["220"]="+99";countryPrefix["225"]="+999";countryPrefix["76"]="+999";countryPrefix["75"]="+999";
        
      $('#billingcountry').change(function() {
        changePhoneMask();
      });
      
      $('#deliverycountry').change(function() {
        changePhoneMask();
      });
      
      $(function(){
        changePhoneMask();
      });
      
      function changePhoneMask() {
        if(countryPrefix[$('#billingcountry').val()]) {
          $("#phone").mask(countryPrefix[$('#billingcountry').val()]+"(999)999-99-99");
        } else  if(countryPrefix[$('#deliverycountry').val()]) {
          $("#phone").mask(countryPrefix[$('#deliverycountry').val()]+"(999)999-99-99");
        } else {
          $("#phone").mask("+999(999)999-99-99");
        }
      }
        
      var originalBtn = $("#cvv2");
      var newBtn = originalBtn.clone();
      
      newBtn.attr("type", "password");
      newBtn.insertBefore(originalBtn);
      originalBtn.remove();
      newBtn.attr("id", "cvv2");
      newBtn.attr("maxlength", "3");
      $("#nameoncard").bind("input", function(event) {
         var out = "";
         var str = this.value;
          for (var i = 0; i < str.length; i++) {
              if (/[A-Za-z.\- ]/.test(str.charAt(i))) {
                  out = out.concat(str.charAt(i));    
              }
          }
          this.value = out;
       });
      </script>

      Чтобы "русифицировать" этот сценарий, необходимо добавить выражение countryPrefix["7"]="+9"; в массив countryPrefix = new Array();. 

      Обратите внимание, что все блоки кода можно увеличивать и сохранять отдельно от всей формы.

  10. Закончив редактировать шаблон, сохраните изменения, нажав на кнопку Сохранить внизу экрана.

Подсказка

Чтобы избежать кэширования формы при ее редактировании, используйте в заголовке кода мета-теги:

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">