Question

我正在使用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;" />

如何修复我的条纹结帐表单以使其与上面设置的自定义表单字段一起使用？

谢谢！

Answer 1

computercarguy是正确的，需要扩展一点：

Stripe Elements的主要目的之一是使您摆脱PCI合规性问题。通过在页面上输入收集原始卡号的输入，您将受制于PCI compliance的全部范围。这意味着您有责任确保卡的详细信息安全，其中包括每年提交40余页的报告，证明您合规。

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

Stripe Elements主要接受您用elements.create创建的card element，它返回卡的令牌化版本，您可以将其用于通过后端进行收费。

如果您确实决定要自己处理原始卡的详细信息（并完全兼容PCI），则应收集这些详细信息，将其传递到后端并通过Stripe API进行标记化。但是，再次建议不要这样做，因为它会打开大量的PCI蠕虫。

Answer 2

看着Stripe documentation，我认为您将无法做到这一点。 Stripe为您提供了一组createToken可以接受的非常具体的参数，就是这样。

然后，该错误再次提示您card-number元素不仅是input类型，而且还可能是div，其中可能包含input。实际上，我敢打赌createToken方法是要提取信息本身，而不是冒着给您提供虚假信息的风险。我已经尝试过研究StripeElement卡元素，它非常复杂，隐藏得很好，旨在使人们三思而后行。

我要退出尝试重新发明轮子，并使用它们给您的StripeElement并按预期使用它。当您发现createToken的所有内容时，很可能正在寻找验证其是否具有正确的表单元素的所有信息，并且具有所有的安全性，您已经浪费了很多本来可以花在添加上的时间功能或修复应用程序其余部分中的错误。

我怎么知道这个？我做过与您相同的事情，经过数小时无处可去之后，我放弃了，只使用了经过精心设计，看似安全且易于使用的元素，花费了几分钟的工作。

使用带有条带的自定义单独的表单字段

2 个答案: