StripeCheckout with ajax instead of redirect to other page

I have a multistep form, in the step 3 there is a button "Pay" that when is clicked it shows a Stripe modal using the jQuery below:

    <form action="{{ route('registration.charge') }}" method="post" id="paymentForm">
              {{csrf_field()}}
              <input type="hidden" name="stripeToken" id="stripeToken"/>
              <input type="submit" href="" id="payment" class="btn btn-primary float-right"
                     value="Pay"/>
          </form>

Charge method to handle the Stripe charge:

    public function charge(Request $request)
        {
            Stripe::setApiKey(config('services.stripe.secret'));
            $source = $request->stripeToken;
            Charge::create([
                'currency' => 'eur',
                'description' => 'Example charge',
                'amount' => 2500,
                'source' => $source,
            ]);
        }

Route:

    Route::post('/charge', [
        'uses' => 'RegistrationController@charge',
        'as'   => 'registration.charge'
    ]);

When the user clicks in pay the stripe modal appears the user fills the form and click in Pay button the Stripe validates and send the token and the user is redirected to another page (http://proj.test/charge) because of the charge().

Do you know how to instead of redirecting the user to (http://proj.test/charge) change Stripe code to use Ajax so the user remains on the same page? So that is possible to show in that some page a success message, for example, informing that the payment was completed.

Stripe code:

    let stripe = StripeCheckout.configure({
        key: "{{config('services.stripe.key')}}",
        image: "",
        locale: "auto",
        token: (token) => {
            document.getElementById('stripeToken').value = token.id;
            document.getElementById('paymentForm').submit();
        }
    });
    
    document.getElementById('payment').addEventListener('click', function(e){
    
        stripe.open({
            name: 'test',
            description: 'test',
            amount: 1000
        });
        e.preventDefault();
    });

Like below is not working (it shows Parse error: syntax error, unexpected ':', expecting ',' or ')')

 let stripe = StripeCheckout.configure({
                key: "{{config('services.stripe.key')}}",
                image: "",
                locale: "auto",
                token: (token) => {
                    document.querySelector('#stripeToken').value = token.id;
                    document.querySelector('#paymentForm').submit();

                    $.ajax({
                        type: "POST",
                        url: '{{route('registration.charge}}',
                        data: {tokenid: token.id, email: token.email},
                        success: function(data) {
                            if (data == 'success') {
                                console.log("success");
                            }
                            else {
                                console.log("error");
                               console.log("Ajax Error!");

                            }

                        },
                        error: function(data) {
                            console.log(data);
                        }
                    }); 
                }
            });


            document.getElementById('payment').addEventListener('click', function(e){

                stripe.open({
                    name: 'test',
                    description: 'test',
                    amount: '{{session('total')}}'
                });
                e.preventDefault();
            });