1
VueJS（2.4.2）とStripe Checkoutを統合しようとしていますが、私のフォームはStripeから返されたトークンと電子メールの更新値を送信していません。VueJS 2 - ストライプチェックアウトレスポンスのフォームを送信していますか？
基本フロー：Vueインスタンスをフォームにマウントし、JSONオブジェクトから「プラン」を選択し、プランの情報が入力されたStripe Checkoutモーダルを開き、フォーム入力のいくつかをStripeから返された値にバインドします、フォームを提出してください。すべては、実際にサーバーに当たるデータが更新された値ではないことを除いて、計画通りに進んでいます。
私はv-bindとv-modelを試しましたが、いずれもうまくいかないようです。ストライプレスポンスの正しい値でフォームが更新されているのがわかりますが、実際に送信すると元のデータが送信されます。
HTML（Laravelブレイド）
@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: '[email protected]', // 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. "[email protected]" and "invalidToken"
}
});
},
findPlanById(id) {
return this.plans.find(plan => plan.id == id);
}
},
created() {
this.handler = StripeCheckout.configure({
key: window.Laravel.stripeKey,
locale: 'auto',
});
}
})