Using Custom Separate Form Fields with Stripe

Question

I'm using the Stripe API (PHP) to create a checkout form that uses custom fields. I'm trying to create the Stripe token but it is not working:

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);
    }
});

I've tried to pass in values for the card manually like shown above but I get the error:

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.

Here is the HTML for the form:

<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;" />

How can I fix my stripe checkout form to work with custom form fields like I have set up above?

Thanks!

Answer 1

computercarguy is right, to expand a little:

One of the main purposes of Stripe Elements is to abstract the problem of PCI compliance away from you. By having inputs on your page that collect raw card numbers, you become subject to the full scope of PCI compliance. This means you are responsible for making sure the card details are secure, which includes submitting a 40+ page report annually proving that you are compliant.

The Stripe Elements are generated in an iframe which is hosted on a Stripe domain, meaning that raw card details never actually touch your systems, making you automatically PCI compliant through Stripe. This also prevents third parties (and you) from being able to access the private information.

Stripe Elements primarily accepts the card element you created with elements.create, it returns a tokenized version of the card which you can then use to make charges via your backend.

If you do decide that you'd want to handle raw card details yourself (and be fully PCI compliant) then you should collect the details, pass them to your backend and tokenize via the Stripe API instead. But again, this isn't really recommended as it opens up a large can of PCI worms.