stripe-checkout-form.blade.php

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
        <form method="POST" action="/" class="card-form mt-3 mb-3">
            @csrf
            <input type="hidden" name="payment_method" class="payment-method">
            <input class="StripeElement mb-3" name="card_holder_name" placeholder="Card holder name" required>
            <div class="col-lg-4 col-md-6">
                <div id="card-element"></div>
            </div>
            <div id="card-errors" role="alert"></div>
            <div class="form-group mt-3">
                <button type="submit" class="btn btn-primary pay">
                    Purchase
                </button>
            </div>
        </form>
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        let stripe = Stripe("{{ config('cashier.key') }}")
        let elements = stripe.elements()
        let style = {
            base: {
                color: '#32325d',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        }
        let card = elements.create('card', {style: style})
        console.log(card)
        card.mount('#card-element')
        let paymentMethod = null
        $('.card-form').on('submit', function (e) {
            $('button.pay').attr('disabled', true)
            if (paymentMethod) {
                return true
            }
            stripe.confirmCardSetup(
                "{{ $getIntent()->client_secret }}",
                {
                    payment_method: {
                        card: card,
                        billing_details: {name: $('.card_holder_name').val()}
                    }
                }
            ).then(function (result) {
                if (result.error) {
                    $('#card-errors').text(result.error.message)
                    $('button.pay').removeAttr('disabled')
                } else {
                    paymentMethod = result.setupIntent.payment_method
                    $('.payment-method').val(paymentMethod)
                    $('.card-form').submit()
                }
            })
            return false
        })
    </script>
</x-dynamic-component>

ViewService.php

<?php
namespace App\Filament\User\Resources\ServiceResource\Pages;

class ViewService extends ViewRecord
{
    protected static string $resource = ServiceResource::class;

    public ?string $client_secret = null;

    public function mount(int|string $record): void
    {
        $this->record = $this->resolveRecord($record);

        $this->authorizeAccess();

        $this->client_secret = auth()->user()->createSetupIntent()->client_secret ?? null;

        if (! $this->hasInfolist()) {
            $this->fillForm();
        }
    }

protected function getHeaderActions(): array
    {
        return [
            Action::make('Reserve')
                ->label(__('filament.services.actions.reserve'))
                ->steps($this->reserveSteps())
                ->visible(function () {
                    return count($this->reserveSteps()) > 0;
                })
                ->action(function ($data) {
                    $this->saveEntries($data);
                })
                ->hidden(false) // if already have a reservation for this service
                ->color('warning'),
        ];
    }
    
    
    private function reserveSteps()
    {
        $steps[] = $this->addPaymentStep();
        return $steps;
    }
    
     private function addPaymentStep()
    {
        return Step::make('Payment')
            ->columns(2)
            ->schema([
                ViewField::make('stripe')
                    ->view('filament.stripe-checkout-form', [
                        'client_secret' => $this->client_secret,
                        'amount' => $this->record->price,
                        'currency' => config('cashier.currency'),
                        'name' => $this->record->name,
                    ]),
            ]);
    }

}