Question

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

这就是它的样子：

正如您所看到的，这两个input显示正常，但div没有显示正确。

我们做错了什么？我们如何使用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表单？

1 个答案: