5

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

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

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

4

1 回答 1

6

调用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，它会循环加载，然后在正文中可以循环使用。

于 2016-02-05T21:29:24.640 回答