如何使用 div 元素构建 Recurly.js 表单？

Question

我的团队正在使用 Recurly.js 在我们的网站中构建一个支付页面。我们一直在关注 https://docs.recurly.com/js 的文档。根据文档，

Build a form however you like. Use the data-recurly attribute to identify input field targets to Recurly.js. To identify where Recurly.js will inject card data fields, we recommend using simple div elements.

问题是 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>

这是它的样子：

如您所见，两个 input 显示正常，但 div 中的 none 显示正确。

我们做错了什么，我们如何构建一个包含 div 元素的 Recurly.js 表单？

Answer 1

调用configure的javascript代码不能在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，循环加载，然后在正文中你可以循环使用。

如何使用 div 元素构建 Recurly.js 表单？

How do I build a Recurly.js form with div elements?

javascript

forms

recurly