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

somenet77's avatar

Stripe not working after v3 upgrade

After the switch stripe did not work.

<?php

namespace App\Livewire;

use Livewire\Component;

class TestPayment extends Component
{
    public $option = 'cash';

    public function setPaymentOption()
    {
        //dd($this->option);
    }

    public function render()
    {
        return view('livewire.test-payment');
    }
}
<div>
    <div x-data="paymentOption">
        <x-adminlte-card title="Test Payment">
            <div class="row">
                <span class="w-100 mb-2 pl-2 pb-2 border-bottom">Payment Option:</span>
    
                <div class="col-sm-12">
                    <div class="form-group">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" value="cash" x-on:click="$wire.setPaymentOption()" x-model="option">
                            <label class="form-check-label" for="cash">Cash</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="payment_option" value="credit_card"
                            x-on:click="$wire.setPaymentOption()" x-model="option">
                            <label class="form-check-label" for="credit_card">Credit Card</label>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="row" x-cloak x-show="option === 'credit_card'">
                <div class="col-sm-12">
                    <div id="card-element"></div>
                </div>
            </div>
        </x-adminlte-card>
    </div>
</div>


@push('js')
    <script src="https://js.stripe.com/v3/"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('paymentOption', () => ({
                option: 'credit_card',

                init() {
                    var stripe = Stripe('{{ env('STRIPE_KEY') }}');
                    var elements = stripe.elements();

                    var cardElement = elements.create("card", {
                        classes: {
                            base: "form-control",
                        },
                        hidePostalCode: true,
                    });

                    cardElement.mount("#card-element");
                },
            }));
        });
    </script>
@endpush
0 likes
4 replies
mikefolsom's avatar

@somenet77 Did you get this working? I am converting an app to Livewire 3 and also having issues with the Stripe element mounting.

martinbean's avatar

@mikefolsom If you’re having problems, it might be best creating your own thread with a snippet of code, and the actual error you’re getting.

Please or to participate in this conversation.