Stripe Cashier Livewire WIP

plans-checkout.php

<div>

<h3 class="text-lg leading-6 font-medium text-gray-200">
  Plan {{ $plan->title }} Checkout | ${{ $plan->priceFormat }}
</h3>
          
<form wire:submit.prevent="submitSubscription">
                    @if(Session::has('success'))
                        It submitted!
                    @endif
                    <div id="error-wrapper"></div>
             
<label for="cardHolderName">Name on the card</label>

<input wire:model.lazy="cardHolderName" type="text" id="card-holder-name"/>
       
                        @if(!$cardHolderName)
                            @error('cardHolderName')
                            <p>{{ $message}}</p>
                            @enderror
                        @endif

<label for="card" class="block text-sm font-medium leading-5 text-gray-200">Card Details</label>
                  
  <div wire:ignore id="card-element"/></div>
                  
       
<button id="card-button" type="submit" wire:target="submitSubscription" data-secret="{{ $intent->client_secret }}">Submit</button>

</div>


@push('stripe')
        <script src="https://js.stripe.com/v3/"></script>
    @endpush
    @section('in-page-scripts')
        <script>
            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('paymentmethod', setupIntent.payment_method)
                }
            });
        </script>
    @endsection

PlansCheckout.php

<?php

namespace App\Http\Livewire\Subscription;

use App\Plan;
use Livewire\Component;

class PlansCheckout extends Component {

    public $plan;
    public $error;
    public $cardHolderName;
    public $paymentmethod;

    public function mount(Plan $plan) {
        $this->plan = $plan;
    }

    public function render() {
        return view('livewire.subscription.plans-checkout', [
            'intent' => auth()->user()->createSetupIntent(),
        ]);
    }

    public function submitSubscription() {
        $data = $this->validate([
            'cardHolderName' => 'required',
        ]);

        dd($this->paymentmethod, $this->cardHolderName, $this->plan->title, $this->plan->stripe_id);

        $this->reset();
    }
}