如何使用div元素构建Recurly.js表单？
iBe*_*eve 5 javascript forms recurly
我的团队正在使用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表单？
调用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,重复加载,然后在正文中你可以重复使用.