Question

我正在尝试将VueJS（2.4.2）与Stripe Checkout集成，但我的表单没有提交Stripe返回的令牌和电子邮件的更新值。

基本流程：将Vue实例挂载到表单，从JSON对象中选择“计划”，打开用计划信息填充的Stripe Checkout模式，将几个表单输入绑定到Stripe返回的值，并提交表格。一切按计划进行除了实际点击服务器的数据不是更新后的值。

我尝试了v-bind和v-model，似乎都没有效果。我可以看到使用条带响应中的正确值更新表单，但是当它实际提交时，将提交最初绑定的数据。

HTML（Laravel Blade）

@extends('layouts.master')

@section('page_meta')
<title>{{ page_title('Checkout') }}</title>
@endsection

@section('content')
<div class="container">
    @include('errors.list')
    {!! Form::open([
        'url' => '/subscriptions',
        'id' => 'checkoutForm',
    ]) !!}
        @foreach ($plans as $plan)
        <div>
            {{ $plan->name }} {{ $plan->description }}
            <button v-on:click.prevent="subscribe({{ $plan->id }})">Select</button>
        </div>
        @endforeach
        <input name="selected_plan" :value="selectedPlanId">
        <input name="stripe_email" :value="stripeEmail">
        <input name="stripe_token" :value="stripeToken">
    {!! Form::close() !!}
</div>
@endsection

@push('scripts.body')
<script>
    var plans = {!! $plans !!}; // JSON from the controller
</script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="/js/checkout.js"></script>
@endpush

JavaScript：

var vm = new Vue({

    el: "#checkoutForm",

    data: {
        plans: plans, // From a global JSON array
        selectedPlan: null, // Default value
        stripeEmail: 'foo@example.com', // Initial bindings to test values
        stripeToken: 'invalidToken'  // Initial bindings to test values
    },

    computed: {
        selectedPlanId() {
            if (this.selectedPlan) {
                return this.selectedPlan.id;
            }
            return '';
        }
    },

    methods: {
        subscribe(planId) {
            let plan = this.findPlanById(planId);
            console.log(plan); // Works as expected
            this.selectedPlan = plan;
            // The following opens a Stripe checkout widget
            // with all the correct information.
            this.handler.open({
                name: plan.name,
                description: plan.description,
                amount: plan.price * 100, // stored as decimal
                token: (token) => {
                    console.log(token); // Works as expected
                    this.stripeToken = token.id; // Verified in Vue Dev Tools
                    this.stripeEmail = token.email; // Verified in Vue Dev Tools
                    alert(this.stripeToken); // Correct values
                    alert(this.stripeEmail); // Correct values
                    // At this point, the form inputs are updated
                    // with the correct values returned from Stripe.
                    vm.$el.submit(); // Submits the form to the proper URL
                    // When the POST request hits the server, the
                    // token and email fields have their original values
                    // i.e. "foo@example.com" and "invalidToken"
                }
            });
        },

        findPlanById(id) {
            return this.plans.find(plan => plan.id == id);
        }
    },

    created() {
        this.handler = StripeCheckout.configure({
            key: window.Laravel.stripeKey,
            locale: 'auto',
        });
    }
})

Answer 1

更新：如果我将表单提交包装在setTimeout中，它会起作用。显然，更新的值需要一点时间才能“占用”。

VueJS 2 - 使用Stripe Checkout响应提交表单？

1 个答案: