Stripe Elementsの実装に苦戦...

Question

いまC2Cのマッチングサービスを開発しており、そこでの決済機能としてStripe Elementsを採用することにしました。

開発環境は以下の通りです。
-PHP7.1
-Laravel5.5
-LAMP環境

Stripe Elementsは以下のドキュメントを参考に実装しています。
Card Element Quickstart

#質問したい内容
こちらのドキュメントの工程をすべて完了しました。

決済フォームにクレジットカード情報を入力し、formをsubmitするとstripeTokenが発行されるはずなのですが、僕の実装ではstripeTokenが発行されないといった状況に陥っています。

Stripeドキュメントからコピーして貼り付けたJavaScriptをデバッグしてみると、どうやら以下の箇所がうまく起動していないみたいです。

// Handle form submission.
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
          event.preventDefault();

          stripe.createToken(card).then(function(result) {
            if (result.error) {
              // Inform the user if there was an error.
              var errorElement = document.getElementById('card-errors');
              errorElement.textContent = result.error.message;
            } else {
              // Send the token to your server.
              stripeTokenHandler(result.token);
            }
          });
        });
        function stripeTokenHandler(token) {
          // Insert the token ID into the form so it gets submitted to the server
          var form = document.getElementById('payment-form');
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type', 'hidden');
          hiddenInput.setAttribute('name', 'stripeToken');
          hiddenInput.setAttribute('value', token.id);
          form.appendChild(hiddenInput);
          // Submit the form
          form.submit();
        }

上記のコードは、決済フォームをsubmitした際に発火し、stripeTokenが発行されるという処理だと思うのですが、こちらがどうやらうまく発火していないようです。

しかしながら、なぜこちらがsubmitしても発火されないのかがわからず、つまっております。
どなたか解決策または何か少しでもわかる方がいらっしゃいましたら、教えていただきたいです。

実際に問題が発生しているコードを以下に貼らせていただきます。

reserve.blade.php

@extends('layouts.application')

<script src="https://js.stripe.com/v3/"></script>

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <form action="{{ route('experiences.complete', $model) }}" method="post" id="payment-form">
                    {{ csrf_field() }}
                    <div class="form-row">

                        <label for="card-element">お支払い</label>

                        <div id="card-element">
                          <!-- A Stripe Element will be inserted here. -->
                        </div>
                        <!-- Used to display form errors. -->
                        <div id="card-errors" role="alert"></div>

                    </div>

                  <button class="btn btn-primary">支払う</button>

                </form>
            </div>
        </div>
    </div>

    <script>
    (function(){
        // Create a Stripe client.
        var stripe = Stripe('{{ config('services.stripe.key')}}');

        // Create an instance of Elements.
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
          base: {
            color: '#32325d',
            lineHeight: '18px',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
              color: '#aab7c4'
            }
          },
          invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
          }
        };

        // Create an instance of the card Element.
        var card = elements.create('card', {
            style: style,
            hidePostalCode: true,
            });

        // Add an instance of the card Element into the `card-element` <div>.
        card.mount('#card-element');

        // Handle real-time validation errors from the card Element.
        card.addEventListener('change', function(event) {
          var displayError = document.getElementById('card-errors');
          if (event.error) {
            displayError.textContent = event.error.message;
          } else {
            displayError.textContent = '';
          }
        });

        // Handle form submission.
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
          event.preventDefault();

          stripe.createToken(card).then(function(result) {
            if (result.error) {
              // Inform the user if there was an error.
              var errorElement = document.getElementById('card-errors');
              errorElement.textContent = result.error.message;
            } else {
              // Send the token to your server.
              stripeTokenHandler(result.token);
            }
          });
        });
        function stripeTokenHandler(token) {
          // Insert the token ID into the form so it gets submitted to the server
          var form = document.getElementById('payment-form');
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type', 'hidden');
          hiddenInput.setAttribute('name', 'stripeToken');
          hiddenInput.setAttribute('value', token.id);
          form.appendChild(hiddenInput);
          // Submit the form
          form.submit();
        }
    })();
</script>
@endsection

Answer 1

どうも、js/app.jsとぶつかるようです。決済の時だけ、使わないようにしたらうまくいきました。

    @if(empty($usingStripe)) //stripeの時だけ使わないようにする
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    @endif