Laravel JqueryコードをVueコンポーネントに変更でうまくいきません

Laravel8でStripeという決済APIを用いてサブスクリプションの処理を行っています。
Vueの勉強も兼ねて、Jqueryで書いたコードをVueのコンポーネントに変更していますが、
うまく決済処理が動きません。。

アドバイスをいただけますと幸いです。

■うまく行っている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>

シンプルに、名前とカード情報を入れて送信するコードです。

★Vue.jsへの置き換えについては、こちらの記事が同じような処理をVue.jsで記述しているので（コンポーネントではありませんが・・・）参考にしました。
Laravelで課金する方法

■うまく行かないVueのコード
blade側 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 v-model="Form.cardHolderName">
        <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: Object,
            publicKey: Object,
        },
        data() {
            return {
                stripe: null,
                stripeCard: null,
                Form: {
                    cardHolderName: null,
                },
                
            }
        },
        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"
              }
            };
            
            this.stripeCard = elements.create('card', {style: style, hidePostalCode: true});
            this.stripeCard.mount('#card-element');        
                     
            this.stripeCard.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 clientSecret = this.dataSecret.value;
                alert('①dataSecretの値' + clientSecret);
                alert('②ホルダーネーム' + this.Form.cardHolderName)
                const { setupIntent, error } = await this.stripe.confirmCardSetup(
                    clientSecret, {
                        payment_method: {
                          card: this.stripeCard,
                          billing_details: { name: this.Form.cardHolderName }
                        }
                    }
                );
                alert("③koko");
                if (error) {
                    // エラー処理
                    alert("④error");
                    console.log('error');
                    
                }else {
                    // 問題なければ、stripePaymentHandlerへ
                    alert('⑤問題ない。');
                    this.stripePaymentHandler(setupIntent);
                }
            },
            stripePaymentHandler: function(setupIntent) {
                alert('⑥stripePaymentHandler' + setupIntent.payment_method);
                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>

テストのために、要所要所でalertを出してみました。
alert('②ホルダーネーム' + this.Form.cardHolderName)は問題なく、Formで記入した名前がアラートされますが、③以降はalertが出てこず、subscribeにpostされてしまいます。

コントローラー側　StripeController.php

public function subscribe(Request $request) {
        // ログインユーザーを$userとする
        $user=Auth::user();
 
        // またStripe顧客でなければ、新規顧客にする
        $stripeCustomer = $user->createOrGetStripeCustomer();
 
        // フォーム送信の情報から$paymentMethodを作成する
        $paymentMethod=$request->input('stripePaymentMethod');
        dd($paymentMethod);

①②のalertが出た後、上記の今トーラーで出力しているddの値が出てきます。
ddの結果はnullです。

alert②以降の処理がうまくいっていないのですが、どのようにすればよいか、アドバイスをいただけますと幸いです。

Lulucom

2021/04/07 10:08

const stripe = await loadStripe(this.publicKey.value); を this.stripe = await loadStripe(this.publicKey.value); に変更するとどうでしょうか。

mikeko0901

2021/04/07 14:36

this.stripeにしますと、カード番号を入力するところが入力できなくなりました…！

Lulucom

2021/04/07 14:40 編集

確かにそうなりそうです。mounted メソッドの中で stripe を使っているところはすべて this.stripe にする必要がありますね。 const elements = this.stripe.elements();

mikeko0901

2021/04/10 07:41

ありがとうございます！ this をつけましたら、表示されました！

行動規範の内容に同意します

回答1件

ベストアンサー

mounted関数でもthis.stripeを使う必要があります。

js
1this.stripe = await loadStripe(this.publicKey.value);
2
3const elements = this.stripe.elements();

投稿2021/04/10 07:45

編集2021/04/10 07:47

Lulucom

総合スコア1899

mikeko0901

2021/04/10 07:52

ありがとうございます。 thisをmouted内の処理につけましたらカードの表示部分はうまくいきました。その後、送信するボタンをクリックした際にエラーが出て関数の呼び出しがうまく行っておらず・・・可能でしたら、お時間ある際で構いませんので、こちらもアドバイスをいただきますと幸いです。 https://teratail.com/questions/332566

行動規範の内容に同意します