I have a form for a user do a payment using Stripe and the jQuery below.
But when the user clicks in the "Pay" buton instead of the Stripe modal opens on the page the user is redirected to "https://checkout.stripe.com/v3/....html?distinct_id=..." and the Stripe modal appears on that page.
Do you know why the Stripe modal is not appearing in the current page?
<form action="{{ route('payment.chargeStripe') }}" method="post" id="paymentForm">
{{csrf_field()}}
<div id="credit_card_section">
<div class="alert alert-info" role="alert">
<strong><i class="fa fa-info" aria-hidden="true"></i></strong>
Click in "Pay" to pay.
</div>
<input type="hidden" name="stripeToken" id="stripeToken"/>
<input type="submit" href="" id="payment" class="btn btn-primary" value=" Pay"/>
</div>
</form>
jQuery:
<script src="https://js.stripe.com/v3/"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
$(function () {
let stripe = StripeCheckout.configure({
key: "{{config('services.stripe.key')}}",
image: "",
locale: "auto",
token: (token) => {
document.querySelector('#stripeToken').value = token.id;
document.querySelector('#paymentForm').submit();
}
});
document.getElementById('payment').addEventListener('click', function(e){
stripe.open({
name: 'test',
description: '{{session('conference_name')}}',
amount: '{{session('total') * 100}}',
currency: 'eur'
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>