Livewire Stripe Elements Cashier

paymentstep.blade.php

<div>
    <form action="#" class="bg-white overflow-hidden shadow-xl rounded">
        <div class="border-b border-cc-navy-200 px-4 py-6 bg-gradient-to-r from-cc-blue-700 via-cc-blue-700 to-cc-blue-600 sm:px-6 rounded-t">
            <h2 class="text-lg leading-8 font-medium text-white">
                Payment Information:
            </h2>

            <div>
                <p class="text-lg leading-5 text-cc-blue-300">
                    Please provide a valid credit or debit card to make your purchase.
                </p>
            </div>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="grid sm:grid-cols-3 grid-cols-1 gap-4">
                <div class="col-span-3">
                    <div>
                        <x-jet-label class="text-lg leading-6 font-bold text-cc-navy-700" value="Name on the card"/>
                        <x-jet-input wire:model.lazy="payment.cardHolderName" class="block mt-1 w-full mb-4"
                                     id="card-holder-name"
                                     type="text" name="payment.cardHolderName" autofocus
                                     autocomplete="payment.cardHolderName"/>
                    </div>
                    <div>
                        <x-jet-label class="text-lg leading-6 font-bold text-cc-navy-700" value="Card Details"/>
                        <div class="mt-1 mb-4 relative rounded-md shadow-sm">
                            <div wire:ignore id="card-element"
                                 class="py-2.5 px-3 focus:ring-cc-orange-200 focus:border-cc-orange-200 sm:text-sm border border-gray-300 shadow-sm rounded-md block mt-1 w-full mb-4">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="border-t border-cc-navy-100 px-4 py-4 sm:px-6">
            <div class="col-span-3">
            <span class="flex justify-end">
            <x-assets.previous-button wire:click.prevent="$emit('goToStep', {{ $previous }})">
                Previous
            </x-assets.previous-button>
            <x-assets.next-button wire:click.prevent="" id="card-button" data-secret="{{ $intent->client_secret }}">
                Pay &amp; Join
            </x-assets.next-button>
        </span>
            </div>
        </div>

    </form>
    <script>
        try {
            const stripe = Stripe('{{ config('cashier.key') }}');
            const elements = stripe.elements();
            const cardElement = elements.create('card');
            cardElement.mount('#card-element');
            const cardHolderName = document.getElementById('card-holder-name');
            const cardButton = document.getElementById('card-button');
            const clientSecret = cardButton.dataset.secret;

            cardButton.addEventListener('click', async (e) => {
                const {setupIntent, error} = await stripe.confirmCardSetup(
                    clientSecret, {
                        payment_method: {
                            card: cardElement,
                            billing_details: {name: cardHolderName.value}
                        }
                    }
                );
                if (error) {
                    let errorWrapper = document.getElementById('error-wrapper')
                    errorWrapper.textContent = error.error
                    console.info(error)
                } else {
                    //   console.info(setupIntent.payment_method)
                @this.set('payment.paymentMethod', setupIntent.payment_method)
                @this.call('submit')
                }
            });
        } catch (error) {
            console.log('Error: ', error);
        }
    </script>
</div>