showing 0,00 amount to be Stripe

During the checkout process, when I proceed to the verification page, the payment amount is displayed as 0.00. However, after completing the verification process, Stripe charges the correct amount. If anyone has experienced a similar issue or has any suggestions for a solution, I would be grateful for your assistance. How can I resolve this problem and ensure that the correct payment amount is displayed throughout the entire checkout process?

     public function purchase(Request $request, Plan $plan)
{

            $user = $request->user();
            $paymentMethod = $request->input('payment_method');
            $encryptedSystemId = $request->input('system_id');
            $encryptedBoxId = $request->input('box_id');
            
            // Decrypt the encrypted IDs
            $systemId = Crypt::decrypt($encryptedSystemId);
            $boxId = Crypt::decrypt($encryptedBoxId);
            
            // Validate the IDs and user authorization
            $system = System::findOrFail($systemId);
            $box = Box::findOrFail($boxId);
            $total = $plan->price;
            

         
   

    try {
        $user->createOrGetStripeCustomer();
        $user->updateDefaultPaymentMethod($paymentMethod);
        $user->charge($total * 100, $paymentMethod, [
            'metadata' =>
            ['system_id' => $systemId, 
            'box_id' => $boxId,
            'tenant_id '=> $user->tenant->id,
            ]
           ]); // * 100 because Stripe deals with cents
    } catch (\Exception $exception) {
        return back()->with('error', 'Error processing payment: ' . $exception->getMessage());
    }






<script src="https://js.stripe.com/v3/"></script>
<script>
    let stripe = Stripe("{{ env('STRIPE_KEY') }}")
    let elements = stripe.elements()
    let style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    }
    let card = elements.create('card', {
        style: style
    })
    card.mount('#card-element')
    let paymentMethod = null
    $('.card-form').on('submit', function(e) {
        $('#pay-btn').attr('disabled', true)
        if (paymentMethod) {
            return true
        }
        stripe.confirmCardSetup(
            "{{ $intent->client_secret }}", {
                payment_method: {
                    card: card,
                    billing_details: {
                        name: $('.card_holder_name').val()
                    }
                }
            }
        ).then(function(result) {
            if (result.error) {
                toastr.error(
                    '__("rental.The data you entered contains errors! Review it and try again")')
                $('#pay-btn').removeAttr('disabled')
            } else {
                paymentMethod = result.setupIntent.payment_method
                $('.payment-method').val(paymentMethod)
                $('.card-form').submit()
                $('span.icon').removeAttr('hidden');
                $('#pay-btn').attr('disabled', true)
            }
        })
        return false
    })


  <div class="tab-content mt-4 " id="card-tab" style="display:none">
                                    <form method="POST" action="{{ route('rentals.purchase', $plan) }}"
                                        class="card-form mt-3 mb-3">
                                        @csrf
                                        <input type="hidden" name="payment_method" class="payment-method">
                                        <input type="hidden" name="system_id" value="{{ encrypt($system->id) }}">
                                        <input type="hidden" name="box_id" value="{{ encrypt($box->id) }}">

                                        <div class="mb-4">
                                            <input class="StripeElement form-input px-4 py-3 rounded-lg w-full"
                                                name="card_holder_name"
                                                placeholder="{{ __('rental.Cardholder Name') }}">
                                        </div>
                                        <div>
                                            <div id="card-element"></div>
                                        </div>
                                        <div id="card-errors" role="alert"></div>
                                        <div class="mt-3 text-center">
                                            <button type="submit"
                                                class="bg-red-500 text-white font-bold py-2 px-4 rounded"
                                                id="pay-btn">{{ __('rental.Pay') }} {{ $plan->price }} &euro; <span
                                                    class="icon" hidden><i
                                                        class="fas fa-sync fa-spin"></i></span></button>
                                        </div>
                                    </form>
                                </div>