将自定义单独表单字段与 Stripe 结合使用

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 合规性的全面约束。这意味着您有责任确保卡详细信息的安全，其中包括每年提交一份 40 多页的报告，证明您合规。

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

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

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