我的团队正在使用 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 正确显示。
我们做错了什么以及我们如何使用 div 元素构建 Recurly.js 表单？
最佳答案
调用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>
浏览器在 head 中加载 javascript，循环加载，然后在 body 中你可以循环使用。
关于javascript - 如何使用 div 元素构建 Recurly.js 表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35229797/