I'm trying to submit a form for using stripe (button tag with a type of "submit") and I did some debugging (attempted), I know that the other elements within my form are working or else I would not be able to see the input that i've mounted into my form using javascript (card.mount). The button is literally the only element within that form that I can not utilize in any way, nor will it submit.
No matter what method I use, whether it be jquery or just regular vanilla javascript, I can not get this button to react to any events that I assign i (on click, i want it to submit the form). It refuses to listen.
<form action="{{ route('checkout') }}" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label><hr>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display Element errors. -->
<div id="card-errors" role="alert"></div>
</div>
{{ csrf_field() }}
<button type="submit" id="button2" class="btn btn-success">Buy Now</button>
</form>
<script>
//in my javascript file
// Custom styling can be passed to options when creating an Element.
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {
style: style
});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element'); //this portion works otherwise I would not be able to type anything within the form. and I can use javascript to manipulate it,
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
// here is the problem, I can't get a submit because the button I have in the form refuses to actually submit anything. It justs works like a regular button and randomly submits, ignoring the fact that it is inside the form
stripe.createToken(card).then(function (result) {
if (result.error) {
// Inform the customer that 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);
}
});
});
</script>
I am not sure if it's because throughout the entirety of the project, I have a mix of both jQuery, or maybe my code was just wrong, but I did three things to aid this situation:
If anyone has an actual explanation for that, that'd be wonderful, but I managed to fix this issue and the submit is actually being recorded. Hopefully if anyone else runs into this issue, they can aid that.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.