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

【问题标题】：How do I build a Recurly.js form with div elements?如何使用 div 元素构建 Recurly.js 表单？
【发布时间】：2016-02-05 17:13:18
【问题描述】：

我的团队正在使用 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>

这就是它的样子：

如您所见，两个inputs 显示正常，但没有一个divs 显示正确。

我们做错了什么以及如何使用div 元素构建 Recurly.js 表单？

【问题讨论】：

标签： javascript forms recurly

【解决方案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，它会循环加载，然后在body中可以循环使用。

【讨论】：