Javascript Laravel Livewire和出纳双表提交问题

我试图让出纳使用Livewire，但遇到了一个错误，我必须按两次提交按钮才能获取

付款方法

在本视频中：

我正在尝试
dd（）如下所示

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

第一次提交时所有内容都返回，除了
$this->paymentmethod
我必须第二次提交表单，以便
$this->paymentmethod
在
dd（）中返回

注：我不会在第二次提交表格时刷新页面


以下是相关代码：

Livewire视图：

<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

<?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();
    }
}


计划{{$Plan->title}}结帐|${{{$Plan->priceFormat}
@if（会话：：has（'success'））
它提交了！
@恩迪夫
卡片上的名字
@如果（！$CANDERNAME）
@错误（'持卡人姓名'）
{{$message}}

@恩德罗
@恩迪夫
卡片详细信息
提交
@推（“条纹”）
@端推
@节（“页面内脚本”）
const stripe=stripe（{{config（'cashier.key'）}}）；
常量元素=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方法）
}
});
@端部


Livewire控制器：

<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

<?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();
    }
}

我认为您的流程是错误的。
$this->paymentmethod
将不会显示在您的
dd（）
中，因为在调用
submitSubscription
时，条带生成的ajax仍然没有完成（因此
@this.set
不要更改公共变量
paymentmethod
，但是，这仅在您第二次单击时才会发生）

从按钮中删除
wire:target=“submitSubscription”
，并添加以下脚本，而不是
@this.set（）

因此，在livewire组件中：

public function setPayment($paymentmethod){
    $this->paymentmethod = $paymentmethod;
    $this->submitSubscription();
}

此代码等待stripe ajax完成，在livewire组件中设置付款数据，然后提交订阅。
成功返回令牌后，使用
@This.call（'add\u或\u update\u payment\u method'）
函数在最后一次调用中

<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)
                    @this.call('add_or_update_payment_method')
                }
            });
        </script>
    @endsection

尝试连线：target.prevent=“submitSubscription”