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

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

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

谢谢！