Page Comparison

Требования:

...

6. Ссылки на внешние ресурсы( Optional ) На рассмотрении

По желанию заказчика использованиев внешних ресурсов, например, блок с

...

src="http://mysite.com/resources/js/myscript.js"></script>

7. Отображение информации на форме

...

});

</script>

</body>

</html>

Пример исходного кода рекаринговой формы

...

Code Block
<!DOCTYPE

...

<html>

<head>

...

 html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

...


        <title>Recurring page</title>

...


        <meta name="viewport" content="width=device-width, initial-scale=1,

...

 minimum-scale=1, maximum-scale=1, user-scalable=0" />

...


        <link rel="stylesheet" href="../resources/css/style.css">

...


    </head>

...

<body>

...


    <body>
        <form action="" class="payment" method="post">

...


            <div class="line">

...


                <span class="name">Оплата</span>

...


                <span class="price">1.01 USD</span>

...

</div>

...


            </div>
            <div class="error_payment"></div>

...


            <div class="payment field">

...


                <div class="payment control">

...


                    <div class="field_wrap">

...


                        <div class="namber_card">499999******0011</div>

...

</div>

...


                    </div>
                    <div class="error"></div>

...


                </div>

...


            </div>

...


            <div class="payment field">

...


                <div class="payment columns_rec"

...

>
                    <label class="payment label">Код CVV</label>

...


                    <div class="payment control">

...


                        <div class="field_wrap"

...

>
                            <input id="cvv" name="cvv2" autocomplete="off"

...

 class="payment input" type="tel" placeholder="XXX" maxlength="3"

...

</div>

...

 required>
                        </div>
                        <div class="error"><

...

</div>

...

/div>
                    </div>
                </div>
            </div>
            <div class="payment action">

...


                <button type="submit" class="btn" formnovalidate>Купити</

...

button>
            </div>

...


        </form>

...

</body>

...


        <script src="../resources/js/jquery-3.2.1.min.js"></script>

...


        <script src="../resources/js/jquery.mask.min.js"></script>

...


        <script src="../resources/js/jquery.creditCardValidator.js"></script>

...


        <script src="../resources/js/js/main.js"></script>
    </body>
</html>

Пример исходного кода OTP формы

...

Code Block

language	html

...

<!DOCTYPE html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Головна</title>
    <link type="text/css" rel="stylesheet" href="../resources/css/style.css"/>
  </head>
  <body id="load" class="no-js">
    <div class="remodal">
        <div class="remodal-header">
            <img src="../resources/img/modal-logo.png" class="modal-logo" />
            <div class="remodal-header-right">
                <img src="../resources/img/remodal_MC.png" />
                <img src="../resources/img/remodal_visa.png" />
            </div>
        </div>
        <form action="" method="post" name="remodal-transaction1" id="process" class="remodal-form">
            <div>
                <div id="modal1Title">Для завершення покупки введіть одноразовий пароль, який надійшов на номер Вашого мобільного телефону</div>
                <p id="modal1Desc">Якщо пароль не надійшов в найближчі 5 хвилин зателефонуйте до Інформаційного центру Банку за телефонами: ---- (Безкоштовно з мобільних у межах України); Телефон для дзвінків із-за кордону--------------</p>
                <div class="remodal-left">Торговець</div>
                <div class="remodal-right" style="width: 250px;"></div>
                <div class="remodal-left">Сума</div>
                <div class="remodal-right">UAH 1.00</div>
                <div class="remodal-left">Дата</div>
                <div class="remodal-right">
                    <span id="date"></span>
                </div>
                <div class="remodal-left">Номер картки</div>
                <div class="remodalright">ХХХХ ХХХХ ХХХХ 7924</div>
                <div class="remodal-left">Одноразовий пароль:</div>
                <div class="remodal-right">
                    <input type="text" id="randpass" name="code" maxlength="8" required>
                </div>
            </div>
            <div class="attention">Увага! Не повідомляйте та не передавайте нікому пароль!</div>
            <div class="remodal-btns">
                <button type="submit" class="modal-confirm" disabled="disabled" id="passconf">Підтвердити</button>
                <button type="button" class="modal-cancel">Відміна</button>
            </div>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
    <script type="text/javascript" src="../resources/js/main.js"></script>
    <script>
      $(function () {
        $('.modal-cancel').click(function () {
          window.location.href='';
        });
        $('#date').html(function () {
          var d = new Date();
          var day = d.getDate() > 9 ? d.getDate() : '0'+d.getDate();
          var month = (d.getMonth() + 1) > 9 ? d.getMonth() + 1 : '0'+(d.getMonth() + 1);
          return day+'/'+month+'/'+d.getFullYear()+''+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()
        });
      });
    </script>
  </body>
</html>

Для мультиязычности: на каждый язык нужен свой html файл.
Не использовать минифицированные файлы
Тестирование верстки перед ее передачей нам: https://drive.google.com/file/d/1HLJ5KUTYFm45pw-O3htrVPC0JwS4R1Ee/view?usp=sharing

...

Versions Compared

Old Version 1

New Version 2

Key

Пример исходного кода рекаринговой формы

Пример исходного кода OTP формы