Laravel : Can't get stripe token on request

Question

I have a form in steps, get information -> show information -> stripe checkout -> submit form,

The problem is that i am removing the stripe checkout form tags

<form action="/charge" method="post" id="payment-form">

And instead i am using the original form tags because i cannot use form inside a form, Plus all the processing should be on one submit.

I have returned the form request data but it have no stripe token. The other form data is available but there is no token in that.

What am i missing ?

A simple process , I have included :

<script src="https://js.stripe.com/v3/"></script>

And js at the end of the file :

var stripe = Stripe('pk_test_73ZtD3qICEkFfyMqegGubJLV');
var elements = stripe.elements();
var style = {
    base: {
        color: '#32325d',
        lineHeight: '18px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
        color: '#aab7c4'
        }
    },
    invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
    }
};
var card = elements.create('card', {style: style});
card.mount('#card-element');
card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
});
var form = document.getElementById('signupFormPetOwner');
form.addEventListener('submit', function(event) {
    event.preventDefault();
    stripe.createToken(card).then(function(result) {
        if (result.error) {
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
        } else {
            stripeTokenHandler(result.token);
        }
    });
});

Here is my form where i am integrating stripe :

<form id="signupFormPetOwner" method="post">
    <div class="stepOne">
       ...
    </div>
    <div class="stepTwo">
       ...
    </div>

    <div class="stepThree">
       <div class="form-row">
           <label for="card-element">
               Credit or debit card
           </label>
           <div id="card-element"></div>
           <div id="card-errors" role="alert"></div>
       </div>
    </div>
    <button class="submit">Submit</button>
</form>

And AJAX request :

$.ajax({
    url: "/register",
    type: "post",
    data: new FormData($('form')[0]),
    cache: false,
    contentType: false,
    processData: false,
    beforeSend: function() {
        $('#cover').show();
    },
    success: function(response) {
        $('#cover').hide();
        return true;
    }
});

Answer 1

You should either pass Stripe public key as value of some hidden input within a form, or to append to FormData new pair - name,value

    var submittedData  = new FormData($('form')[0]);
    submittedData.append('stripe_key', stripe_key_value);

    $.ajax({
        url: "/register",
        type: "post",
        data: submittedData,
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function() {
            $('#cover').show();
        },
        success: function(response) {
            $('#cover').hide();
            return true;
         }
    });