Level 21
@somenet77 Did you get this working? I am converting an app to Livewire 3 and also having issues with the Stripe element mounting.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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
Please or to participate in this conversation.