Accept.js (authorize.net) 和单页应用

Question

我们希望使用 Authorize.NET accept.js 来维护我们的 SAQ-A 合规性（我们已经使用 Braintree 和 Stripe 做到了这一点）。

根据文档，我发现使用 accept.js 非常困难，我希望我不希望以非文档化的方式实现！

我最大的问题是：

“重要提示：使用付款信息表单时，请确保您的页面在定义按钮后加载库。”

脚本似乎想在加载后立即处理 DOM 并找到它需要的属性。这使得从单页应用程序的角度来看非常难以使用，因为如果用户查看支付页面，然后决定返回将其他东西添加到购物车，然后再次支付......脚本已经已加载，但现在没有呈现表单。

我想要做的是让 accept.js 给我一个函数来调用并传递必要的东西（测试模式、发布密钥等）。这是在braintree中完成的：

braintree.dropin.create({
      authorization: 'CLIENT_TOKEN_FROM_SERVER',
      container: '#dropin-container'
    }

这就是使用条纹的方式：

// Create an instance of the card Element
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

这种 API 样式很漂亮在网络上工作，因为我可以加载一次 javascript 文件，但在需要时构建付款表单。

有没有办法用 accept.js 做到这一点？我能想出的唯一方法是自己构建表单，然后调用 Accept.dispatch，但这会将我们从 SAQ-A 转移到 SAQ-A EP

谢谢！

Answer 1

如果您使用 React，有一个非常有用的库，名为 react-authorize-net，可让您通过简单而干净的基于组件的 API 与 Authorize.Net 进行交互。

要将其与您的项目集成，您通常会使用 FormContainer 组件和 FormComponent 立即获得功能齐全且随时可用的付款表单。

您也可以通过向FormContainer 提供自己的组件/功能来自定义呈现逻辑。

这是一个在现有 React 项目https://github.com/j-em/react-authorize-net-example中使用的库示例