Q&A
「送信する」ボタンのbuttonタグに type="button" を追加するとどうでしょうか。
Laravel8で、決済API Stripeを用いたサブスクリプションの決済のサンプルを作成しています。
Vue.jsを勉強しているので、Jqueryで行ってうまく行っている処理を
Vue.jsに置き換えるということをしていますが、うまく値の受け渡しができません。。
アドバイスいただけますと幸いです。
シンプルに、カード入力画面です。
■うまくいっているJqueryのコード
order.blade.php
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="{{ asset('css/stripe.css') }}" rel="stylesheet"> <style> </style> </head> <body> <div class="container" id="app"> <div class="content"> <form action="{{route('stripe.subscribe')}}" method="post" id="payment-form"> @csrf <label for="exampleInputEmail1">お名前</label> <input type="test" class="form-control col-sm-5" id="card-holder-name" required> <label for="exampleInputPassword1">カード番号</label> <div class="form-group MyCardElement col-sm-5" id="card-element"></div> <div id="card-errors" role="alert" style='color:red'></div> <button class="btn btn-primary" id="card-button" data-secret="{{ $intent->client_secret }}">送信する</button> </form> </div> </div> <script src="https://js.stripe.com/v3/"></script> <script> // Configに設定したStripeのAPIキーを読み込む const stripe = Stripe('{{ config('services.stripe.key') }}'); const elements = stripe.elements(); var style = { base: { color: "#32325d", fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: "antialiased", fontSize: "16px", "::placeholder": { color: "#aab7c4" } }, invalid: { color: "#fa755a", iconColor: "#fa755a" } }; const card = elements.create('card', {style: style, hidePostalCode: true}); card.mount('#card-element'); const cardHolderName = document.getElementById('card-holder-name'); const cardButton = document.getElementById('card-button'); const clientSecret = cardButton.dataset.secret; card.on('change', function(event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; } }); cardButton.addEventListener('click', async (e) => { const { setupIntent, error } = await stripe.confirmCardSetup( clientSecret, { payment_method: { card: card, billing_details: { name: cardHolderName.value } } } ); if (error) { // エラー処理 console.log('error'); }else { // 問題なければ、stripePaymentHandlerへ stripePaymentHandler(setupIntent); } }); var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); }); function stripePaymentHandler(setupIntent) { var form = document.getElementById('payment-form'); var hiddenInput = document.createElement('input'); hiddenInput.setAttribute('type', 'hidden'); hiddenInput.setAttribute('name', 'stripePaymentMethod'); hiddenInput.setAttribute('value', setupIntent.payment_method); form.appendChild(hiddenInput); form.submit(); } </script> </body> </html>
上記のJqueryのコードをコピーしてVueのコンポーネントに置き換えました。
■View側
order_2.blade.php
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="csrf-token" content="{{ csrf_token() }}"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="{{ asset('css/stripe.css') }}" rel="stylesheet"> <style> </style> </head> <body> <div class="container" id="app"> <div class="content"> client_secret: {{ $intent->client_secret }} <stripe-form2 :data-secret = '@json(['value' => $intent->client_secret])' :public-key = '@json(['value' => config('services.stripe.key')])' :csrf='{{ json_encode(csrf_token()) }}' ></stripe-form2> </div> </div> <script src="{{ mix('js/app.js') }}"></script> <script src="https://js.stripe.com/v3/"></script> <script> </script> </body> </html>
■コンポーネント側
StripeForm2.vue
<template> <form action="subscribe" method="post" id="payment-form"> ※order2 <input type="hidden" name="_token" v-bind:value="this.csrf"> <label for="exampleInputEmail1">お名前</label> <input type="test" class="form-control col-sm-5" id="card-holder-name" required> <label for="exampleInputPassword1">カード番号</label> <div class="form-group MyCardElement col-sm-5" id="card-element"></div> <div id="card-errors" role="alert" style='color:red'></div> <button class="btn btn-primary" id="card-button" @click="subscribe" >送信する</button> </form> </template> <script> import {loadStripe} from '@stripe/stripe-js'; export default { props: { csrf: String, dataSecret: String, publicKey: Object, }, async mounted() { const stripe = await loadStripe(this.publicKey.value); const elements = stripe.elements(); var style = { base: { color: "#32325d", fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: "antialiased", fontSize: "16px", "::placeholder": { color: "#aab7c4" } }, invalid: { color: "#fa755a", iconColor: "#fa755a" } }; const card = elements.create('card', {style: style, hidePostalCode: true}); card.mount('#card-element'); const cardHolderName = document.getElementById('card-holder-name'); //const cardButton = document.getElementById('card-button'); //const clientSecret = cardButton.dataset.secret; const clientSecret = this.dataSecret; alert('テスト' + this.dataSecret); card.on('change', function(event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; } }); }, methods: { subscribe: async function() { const { setupIntent, error } = await stripe.confirmCardSetup( this.dataSecret, { payment_method: { card: card, billing_details: { name: cardHolderName.value } } } ); if (error) { // エラー処理 console.log('error'); }else { // 問題なければ、stripePaymentHandlerへ stripePaymentHandler(setupIntent); } }, stripePaymentHandler: function(setupIntent) { var form = document.getElementById('payment-form'); var hiddenInput = document.createElement('input'); hiddenInput.setAttribute('type', 'hidden'); hiddenInput.setAttribute('name', 'stripePaymentMethod'); hiddenInput.setAttribute('value', setupIntent.payment_method); form.appendChild(hiddenInput); form.submit(); }, }, } </script>
ブラウザでは以下。client_secretの値はviewに渡っています。
しかし、決済をすると
You cannot confirm this PaymentIntent because it's missing a payment method. To confirm the PaymentIntent with cus_**********, specify a payment method attached to this customer along with the customer ID.
というエラーになってしまいます。
確かに、コントローラー側でdd();で確認してみると、nullになっています。
■コントローラー
public function subscribe(Request $request) { // ログインユーザーを$userとする $user=Auth::user(); // またStripe顧客でなければ、新規顧客にする $stripeCustomer = $user->createOrGetStripeCustomer(); // フォーム送信の情報から$paymentMethodを作成する $paymentMethod=$request->input('stripePaymentMethod'); dd($paymentMethod);
ddの結果はnull
ご教示いただけますと幸いです。
よろしくお願いいたします。
【追記】
送信するボタンのタグにtype="button"を追加しました。
<button type="button" class="btn btn-primary" id="card-button" @click="subscribe" >送信する</button>
すると、画面遷移しませんでした。
【追記２】
F12でコンソールを見てみました。エラーが出てました。
（type="button"を追加してもしなくてもこのエラーは出てました）
mountedのところでconst stripe =と宣言してますが、
やり方が誤っているのでしょうか・・・
すいませんでした。buttonタグは元に戻してください。
いえいえ！ありがとうございます。
> mountedのところでconst stripe =と宣言してますが、
> やり方が誤っているのでしょうか・・・
そうですね。stripeはコンポーネントのデータとして持つ必要がありそうです。
回答1件
0
ベストアンサー
<stripe-form2 :data-secret = '@json(['value' => $intent->client_secret])' :public-key = '@json(['value' => config('services.stripe.key')])' :csrf='{{ json_encode(csrf_token()) }}' ></stripe-form2>
と
props: { csrf: String, dataSecret: String, publicKey: Object, },
が合ってない気がします。dataSecretをObjectにしてthis.dataSecret.valueでとりだすか、もしくは
data-secret = '{{ $intent->client_secret }}'
で渡すかじゃないですかね？
投稿2021/04/07 01:59
総合スコア4537
ありがとうございます！
処理全体はまだ課題が多いですが、コンポーネントへの値の受け渡しは、
this.dataSecret.value
でできました。
あなたの回答
tips
プレビュー
