Невозможно получить stripeToken при разработке элементов Stripe

Question

Я генеральный директор и разработчик в robal, Inc. Это японская стартап-компания.

Я занимаюсь разработкой службы веб-приложений C-C (Consumer to Consumer) и добавлю Stripe Elements в качестве системы онлайн-платежей.

Моя среда разработки выглядит следующим образом: PHP 7.1 Laravel 5.5

Я занимаюсь разработкой с использованием документа Stripe Elements. нашивки

Я хочу задать вопрос.

Я выполнил все шаги этого документа.

После ввода информации о кредитной карте в форму оплаты и отправку формы, stripeToken должен быть выдан, но в моей реализации stripeToken не выдается.

Отладка JavaScript, скопированного и вставленного из документа 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();
}

Я думаю, что приведенный выше код воспламеняется при отправке платежной формы и выдается StripeToken, но, похоже, это плохо зажигается.

Однако я не знаю, почему это не зажигается, даже если я его отправляю. Если кто-нибудь знает решение или что-то вообще, я хотел бы, чтобы вы сказали мне.

Я вставлю код, который на самом деле имеет проблему в следующем.

reserve.blade.php

<script src="https://js.stripe.com/v3/"></script>
<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();
    }
})();