在同一页面上显示条纹模式，而不是在“https://checkout.stripe.com/v3/...”中显示模式

Question

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>

Answer 1

$(function () {
    let stripe = StripeCheckout.configure({
        key: "{{YOUR_STRIPE_PUBLIC_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: '{{YOUR_DESCRIPTION}}',
            amount: '12',
            currency: 'eur'
        });
        e.preventDefault();
    });

    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
        handler.close();
    });
});

From the code you have posted, it seems it working fine, but its missing function closing parentheses and a bracket. See last line of my code. Once i fixed this one i can able to see the checkout popup in my current page itself.

Also check in browser console, to make sure there is not js error.