Javascript 以多步骤形式呈现Livewire组件中的条带元素

我使用Laravel Livewire创建了一个多步骤表单，但我不知道如何在表单的第三步或第一步之外的任何步骤中获取要渲染/启动的条带元素

我知道它不起作用，因为当我到达步骤3时，由于没有重新加载页面，Stripe JS没有启动。我只是不明白当我在第3步时，如何在不重新加载页面的情况下启动Stripe JS

下面是我遇到的问题的一个实际工作示例（您可以在这里处理代码）：

在正确的方向上，任何帮助或一点都会非常有帮助

Livewire组件类：

use Livewire\Component;

class LivewireComponent extends Component
{

   public $pet_name;
   public $pet_type;
   public $cardHolderName;
   public $step;
    
    
    private $stepActions = [
        'submit1',
        'submit2',
        'submit3'
    ];
    
    public function mount()
    {
        $this->step = 0;
    }

    public function decreaseStep() {
        $this->step--;
    }

    public function submit() {
        $action = $this->stepActions[$this->step];
        $this->$action();
    }

    public function submit1() {
        $this->validate([
            'pet_name' => 'required|min:1',
        ]);
        $this->step++;
    }

    public function submit2() {
        $this->validate([
            'pet_type' => 'required',
        ]);
        $this->step++;
    }

    public function submit3() {
        dd($this->pet_name, $this->pet_type);
    }
  
    public function render()
    {
        return view('livewire-component');
    }
}

<div>
    <label for="cardHolderName">Name on the card</label>
    <div>
        <input wire:model.lazy="cardHolderName" type="text" id="card-holder-name"/>
    </div>

    <label for="card">Card Details</label>
    <div>
        <div wire:ignore id="card-element"/>
    </div>
</div>


//Goes to the header
@push('stripe')
<script src="https://js.stripe.com/v3/"></script>
@endpush

//Goes before end body tag
@push('stripe-js')

    <script>
        const stripe = Stripe('pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ');
        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)
            @this.call('submit')
            }
        });

    </script>
@endpush

Livewire组件：（我将所有类剥离出来，以便更具可读性）

{{--第1步--}
@如果（$step==0）
昵称
{{--ADD STRIPE元素在第一步中有效，但在第三步中无效--}
{{--@include（'stripe-card-component'）--}
{{-/ADD STRIPE ELEMENTS/--}
@恩迪夫
{{--第2步--}
@如果（$step==1）
宠物类型|猫或狗
@恩迪夫
{{--第3步--}
@如果（$step==2）
这就是我的问题所在。我不知道如何让条带元素在第一步以外的其他步骤上启动

{{--ADD STRIPE元素在第3步--}中不起作用
@包括（'stripe-card-component'）
{{-/ADD STRIPE元素在第3步中不起作用/-}
@恩迪夫
//“上一个”和“下一个”按钮转到此处

条纹卡刀片组件：

use Livewire\Component;

class LivewireComponent extends Component
{

   public $pet_name;
   public $pet_type;
   public $cardHolderName;
   public $step;
    
    
    private $stepActions = [
        'submit1',
        'submit2',
        'submit3'
    ];
    
    public function mount()
    {
        $this->step = 0;
    }

    public function decreaseStep() {
        $this->step--;
    }

    public function submit() {
        $action = $this->stepActions[$this->step];
        $this->$action();
    }

    public function submit1() {
        $this->validate([
            'pet_name' => 'required|min:1',
        ]);
        $this->step++;
    }

    public function submit2() {
        $this->validate([
            'pet_type' => 'required',
        ]);
        $this->step++;
    }

    public function submit3() {
        dd($this->pet_name, $this->pet_type);
    }
  
    public function render()
    {
        return view('livewire-component');
    }
}

<div>
    <label for="cardHolderName">Name on the card</label>
    <div>
        <input wire:model.lazy="cardHolderName" type="text" id="card-holder-name"/>
    </div>

    <label for="card">Card Details</label>
    <div>
        <div wire:ignore id="card-element"/>
    </div>
</div>


//Goes to the header
@push('stripe')
<script src="https://js.stripe.com/v3/"></script>
@endpush

//Goes before end body tag
@push('stripe-js')

    <script>
        const stripe = Stripe('pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ');
        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)
            @this.call('submit')
            }
        });

    </script>
@endpush

卡片上的名字
卡片详细信息
//转到页眉
@推（“条纹”）
@端推
//在结束体标记之前
@推送（'stripe-js'）
常量条带=条带（'pk_rxwtgk4z5vr82s94vtwam6p8qmxq'）；
常量元素=stripe.elements（）；
const cardElement=elements.create（'card'）；
挂载（“#卡元素”）；
const CANDERNAME=document.getElementById（'card-holder-name'）；
const cardButton=document.getElementById（'card-button'）；
const clientSecret=cardButton.dataset.secret；
cardButton.addEventListener（'click'，async（e）=>{
const{setupIntent，error}=wait stripe.confirmCardSetup(
客户机密{
付款方式：{
卡片：cardElement，
账单详细信息：{name:cardingname.value}
}
}
);
如果（错误）{
让errorWrapper=document.getElementById（'error-wrapper'））
errorWrapper.textContent=error.error
控制台信息（错误）
}否则{
//console.info（setupIntent.payment\u方法）
@此.set（'paymentMethod'，setupIntent.payment\u方法）
@this.call（'submit'）
}
});
@端推

您可以在最后一步从Livewire发送浏览器事件

$this->dispatchBrowserEvent('lastStep');

使用JS，您可以捕获此事件，然后执行Stripe JS代码

window.addEventListener('lastStep', event => {

});

这将使您的Stripe JS代码在不重新加载页面的情况下执行