Javascript 如何使用div元素构建recury.js表单？_Javascript_Forms_Recurly

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

javascript forms

Javascript 如何使用div元素构建recury.js表单？,javascript,forms,recurly,Javascript,Forms,Recurly,我的团队正在使用recury.js在我们的网站上构建一个支付页面。我们一直在跟踪来自的文档。根据文件, 创建一个你喜欢的表单。使用data recurly属性标识要recurly.js的输入字段目标。为了确定recury.js将在何处注入卡数据字段，我们建议使用简单的div元素问题是div元素实际上没有显示在表单中。以下是一个基于文档的简短可复制示例： <!doctype html> <html lang="en"> <head> <!-- Rec

我的团队正在使用recury.js在我们的网站上构建一个支付页面。我们一直在跟踪来自的文档。根据文件,

创建一个你喜欢的表单。使用data recurly属性标识要recurly.js的输入字段目标。为了确定recury.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>


configure（“…此处的API键…”）；
提交

这就是它看起来的样子：

如您所见，两个

输入

s显示良好，但没有一个

div

s显示正确

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

调用configure的javascript代码不能位于head标记中，而应该位于body标记中

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

recury.configure（“…此处的API键…”）；

此示例应向您展示如何正确设置它。注意他们在主体中放置javascript的位置：


提交
configure（“…此处的API键…”）；

浏览器在头部加载javascript，头部循环加载，然后在身体中循环使用

<!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>