Filament•13mo ago

View::make() not working properly inside of wizard

issue: stripe element not get loaded inside of view make Actually i want to integrate the stripe payments , so i need to generate card token using their js element code (https://codepen.io/Dracarys115/pen/OzjxVg) - I have to make the card payment inside of a multi step wizard and i have to implement the stripe card element in the second step - So i have created a different blade for stripe element and placed that using View:make()

   Section::make('Take Payment')
                                                ->schema([
                                                    View::make(('forms.components.stripe-payment')),
                                                ])

   Section::make('Take Payment')
                                                ->schema([
                                                    View::make(('forms.components.stripe-payment')),
                                                ])

- But the problem is stripe js elements are not loading in second step. If i put the view in first step it is showing but when i select or update any value in the form the stripe element not loaded - i think its also happening with when i am changing the step is there any way to get the things work properly? code- https://gist.github.com/ckbsbal/87db36c930c0a4434485d6b9b6567b64

Marc Schmiedel

CodePen

Create a Token (Elements [stripe.js V3])

...

Gist

gist:87db36c930c0a4434485d6b9b6567b64

GitHub Gist: instantly share code, notes, and snippets.

Solution:

That’s because it’s re-rendering it which is how livewire works with reactive. So on rendering it would need to then process again

Jump to solution

11 Replies

toeknee•13mo ago

That's because the .js won't render as it's injected the js files are parsed on load

technocratOP•13mo ago

Any other way i can achieve this?

toeknee•13mo ago

Include the JS at run time, then use JS to initialise the element

Skjena•13mo ago

Do you have any working example of this ? I can't see any feasible solution to implement this using blade file.

technocratOP•13mo ago

I went through the docs but unable to find a way, if any references availbe please provide

toeknee•13mo ago

Well, look at the docs for how to include javascript: https://filamentphp.com/docs/3.x/support/assets#registering-javascript-files Then read the docs of stripe on how to initialise it programitcally

Assets - Core Concepts - Filament

technocratOP•13mo ago

thank you But i am using filament v2 this docs is for v3, i have done this

  Filament::registerScripts(['https://js.stripe.com/v3/',]);

  Filament::registerScripts(['https://js.stripe.com/v3/',]);

in my AppserviceProvider

toeknee•13mo ago

Same principle applies click the v2 do

technocratOP•13mo ago

at intial load the card element get render but when i click on select field which is reactive, its get wiped

Solution

toeknee•13mo ago

That’s because it’s re-rendering it which is how livewire works with reactive. So on rendering it would need to then process again

toeknee•13mo ago

See: https://laravel-livewire.com/docs/2.x/inline-scripts

Livewire

Inline Scripts | Livewire

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Gaming

Programming

View::make() not working properly inside of wizard