使用带条纹的自定义单独表单字段答案

【问题标题】：Using Custom Separate Form Fields with Stripe使用带条纹的自定义单独表单字段
【发布时间】：2019-10-07 09:19:28
【问题描述】：

我正在使用 Stripe API (PHP) 创建一个使用自定义字段的结帐表单。我正在尝试创建 Stripe 令牌，但它不起作用：

var stripe = Stripe('pk_test_yzxdfxfsd9mafsfasfFnFhfsaP1zt');
var elements = stripe.elements();

var cardNumber = elements.create('cardNumber');
cardNumber.mount('#card-number');
var cardExpiry = elements.create('cardExpiry');
cardExpiry.mount('#card-expiry');
var cardCvc = elements.create('cardCvc');
cardCvc.mount('#card-cvc');


stripe.createToken({
    number: $('.card-number').val(),
    cvc: $('.card-cvc').val(),
    exp_month: '04',
    exp_year: '21',
}).then(function(result) {
    if (result.error) {
        // Inform the user if there was an error.
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
    } else {
         // Send the token to your server.
        stripeTokenHandler(result.token);
    }
});

我尝试像上图那样手动为卡传递值，但出现错误：

Stripe Elements must be mounted in a DOM element that can contain child nodes. `input` elements are not permitted to have child nodes. Try using a `div` element instead.

这是表单的 HTML：

<div>
    <span class="checkoutFormLabel">Card Number</span>
</div>
<div>
    <input type="text" name="card_num" id="card-number" class="full_width" />
</div>

<div>
    <span class="checkoutFormLabel">Name on Card</span>
</div>
<div>
    <input type="text" name="name_on_card" class="full_width" />
</div>


<div>
    <span class="checkoutFormLabel">Expiration</span>
</div>
<div>
    <input type="text" name="expiryDate" id="card-expiry" placeholder="MM/YY" class="full_width" />
</div>

<span class="checkoutFormLabel">CVC</span>
        <input type="text" name="cvc" class="full_width" id="card-cvc" style="width:100px;" />

如何修复我的条带结帐表单以使用我在上面设置的自定义表单字段？

谢谢！

【问题讨论】：

标签： javascript php stripe-payments

【解决方案1】：

computercarguy 是对的，稍微扩展一下：

Stripe Elements 的主要目的之一是让您远离 PCI 合规性问题。通过在您的页面上输入收集原始卡号，您将受到PCI compliance 的全部范围的约束。这意味着您有责任确保银行卡详细信息的安全，其中包括每年提交一份 40 多页的报告，以证明您的合规性。

Stripe 元素是在托管在 Stripe 域上的 iframe 中生成的，这意味着原始卡详细信息永远不会真正触及您的系统，从而使您通过 Stripe 自动符合 PCI 标准。这也可以防止第三方（和您）访问私人信息。

Stripe Elements 主要接受您使用elements.create 创建的card element，它返回卡的标记化版本，然后您可以使用该卡通过您的后端进行收费。

如果您决定自己处理原始卡详细信息（并且完全符合 PCI），那么您应该收集详细信息，将它们传递到您的后端并通过 Stripe API 进行标记化。但同样，不建议这样做，因为它会打开大量 PCI 蠕虫。

【讨论】：

感谢您的回复。但我不知道如何根据我的网站外观定制条纹元素，这就是我选择这条路线的原因
这是一个展示如何设置元素样式的 jsfiddle 示例：jsfiddle.net/ywain/r0c8Luvf
如果您想为卡号/ZIP/CSV 设置单独的字段，请查看此处：jsfiddle.net/o2n3js2r
很高兴知道我是“正确的”，即使我不知道“为什么”的细节，直到我在这里阅读它们。很高兴知道我做出了一个很好的决定，当我退出“研究”那个元素时。我也懒得填那么多文件。

【解决方案2】：

看看Stripe documentation，我认为你无法做到这一点。 Stripe 为您提供了一组非常具体的参数 createToken 将接受，仅此而已。

然后，错误提示您card-number 元素不仅仅是input 类型，而是div，其中可能包含input。事实上，我敢打赌createToken 方法是想自己提取该信息，而不是冒险给它提供虚假信息。我试图深入研究 StripeElement 卡片元素，它非常复杂，隐藏的东西很好，旨在让人们在试图愚弄它时三思而后行。

我会说放弃尝试重新发明轮子并使用他们给你的 StripeElement 并按预期使用它。当您发现 createToken 可能正在寻找的所有东西来验证它是否具有正确的表单元素，并且所有的安全性都到位时，您将浪费大量时间来添加功能或修复应用其余部分的错误。

我怎么知道这个？我做了和你一样的事情，在几个小时和几个小时都没有到达任何地方之后，我放弃了，只是使用了精心设计、看似安全且易于使用的元素，需要几分钟才能完成。

【讨论】：