Как создать форму Recurly.js с элементами div?

Моя команда использует Recurly.js для создания страницы платежей на нашем веб-сайте. Мы следили за документацией с https://docs.recurly.com/js. Согласно документам,

Создайте форму, как вам нравится. Используйте атрибут data-recurly, чтобы определить цели поля ввода для Recurly.js. Чтобы определить, куда Recurly.js будет вставлять поля данных карты, мы рекомендуем использовать простые элементы div.

Проблема в том, что элементы div фактически не отображаются в форме. Вот краткий воспроизводимый пример, основанный на документах:

<!doctype html>
<html lang="en">
<head>
  <!-- Recurly.js script and API key config -->
  <script src="https://js.recurly.com/v4/recurly.js"></script>
  <script>recurly.configure('... API Key here...');</script>
</head>
<body>

  <form>
    <input type="text" data-recurly="first_name">
    <input type="text" data-recurly="last_name">
    <div data-recurly="number"></div>
    <div data-recurly="month"></div>
    <div data-recurly="year"></div>
    <div data-recurly="cvv"></div>
    <input type="hidden" name="recurly-token" data-recurly="token">
    <button>submit</button>
  </form>
</body>
</html>

Вот как это выглядит:

Пример формы Recurly.js

Как видите, два input отображаются нормально, но ни один из div не отображается правильно.

Что мы делаем неправильно и как создать форму Recurly.js с div элементами?


javascript forms recurly
person iBelieve    schedule 05.02.2016    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Код javascript, который вызывает configure, не может находиться в теге head и должен располагаться в теге body.

<script>recurly.configure('... API Key here...');</script>

Этот пример должен показать вам, как правильно его настроить. Обратите внимание, где они размещают javascript в теле: https://github.com/recurly/recurly-js-examples/blob/master/public/minimal/index.html

<!doctype html>
<html lang="en">
<head>
  <!-- Recurly.js script and API key config -->
  <script src="https://js.recurly.com/v4/recurly.js"></script>
</head>
<body>
  <form>
    <input type="text" data-recurly="first_name">
    <input type="text" data-recurly="last_name">
    <div data-recurly="number"></div>
    <div data-recurly="month"></div>
    <div data-recurly="year"></div>
    <div data-recurly="cvv"></div>
    <input type="hidden" name="recurly-token" data-recurly="token">
    <button>submit</button>
  </form>
  <script>recurly.configure('... API Key here...');</script>
</body>
</html>

Браузер загружает javascript в голову, который рекурсивно загружается, а затем в теле вы можете использовать рекурсивно.

person PHPDave    schedule 05.02.2016