Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ChristopherLaw's avatar

Livewire + Stripe

I am seeing the following error when attempting to use Livewire & StripeJS:

We could not retrieve data from the specified Element.
Please make sure the Element you are attempting to use is still mounted.

Firstly, I have a button that uses a wire:click to call createPaymentIntent. This function creates the Stripe payment intent, does some additional processing, and finally sets the clientSecret variable, which is required by Stripes confirmCardPayment function. Next I broadcast an event, passing the required clientSecret to the front end, which in turn, attempts to use the passed clientSecret to the aforementioned Stripe function. The event is caught and the confirmCardPayment function is invoked, and given the clientSecret, followed by the error as stated above.

Any help would be appreciated.

    public function createPaymentIntent()
    {

        $stripe = new StripeClient(config('stripe.secret_key'));


        $paymentIntent = $stripe->paymentIntents->create([
            'amount' => $this->total * 100,
            'currency' => config('stripe.currency'),
        ]);

        $this->dispatch('payment-intent-event', [
            'clientSecret' => $paymentIntent->client_secret,
        ]);
    }
<div class="flex flex-col gap-2">

    <form id="payment-form">

        <div id="card"></div>

        <x-button class="w-max" wire:click.prevent="createPaymentIntent">Pay</x-button>

        <div id="error" class="text-red-500 text-sm font-light"></div>

    </form>

</div>
@push('scripts')
    <script>
        const error = document.getElementById('error');

        const stripe = Stripe('key here');

        const elements = stripe.elements();

        const cardElement = elements.create('card');

        cardElement.mount('#card');

        document.addEventListener('livewire:initialized', () => {
            @this.on('payment-intent-event', async (event) => {

                cardElement.mount('#card');

                await stripe.confirmCardPayment(event[0].clientSecret, {
                    payment_method: {
                        card: cardElement,
                    }
                });
            });
        });
        // });
    </script>
@endpush

0 likes
0 replies

Please or to participate in this conversation.