gpt4 book ai didi

javascript - 如何使用 div 元素构建 Recurly.js 表单?

转载 作者:数据小太阳 更新时间:2023-10-29 06:10:37 25 4
gpt4 key购买 nike

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

这是它的样子:

Recurly.js form example

如您所见,两个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com