Ошибка Stripe Elements с Laravel: Пожалуйста, убедитесь, что элемент, который вы пытаетесь использовать, все еще установлен - PullRequest
Новая
       8

Ошибка Stripe Elements с Laravel: Пожалуйста, убедитесь, что элемент, который вы пытаетесь использовать, все еще установлен

0 голосов
/ 14 марта 2019

Я скопировал код JS в точности так, как он выглядит на веб-сайте Stripe, и снова код не может сгенерировать токен перед отправкой пользователя на мой контроллер / подписки.Я использую Laravel и их пакет Cashier.

Ошибка: 

Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.

Я проверил ручную зарядку внутри моего контроллера, и это работает.Когда я сбрасываю все элементы POST, от Stripe нет токена.На самом деле не вижу, что здесь происходит.Вот код JS: 

// Create a Stripe client.
var stripe = Stripe('my_api_key');

var elements = stripe.elements();
// Custom Styling
var style = {
    base: {
        color: '#32325d',
        lineHeight: '24px',
        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});
// 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 {
            stripeTokenHandler(result.token);
        }
    });
});
// Send Stripe Token to Server
function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');
// Add Stripe Token to hidden input
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);
// Submit form
    form.submit();
}

И форма: 

<form action="{{ route('subscription.create') }}" method="post" id="payment-form">
  @csrf
  <div class="form-row">
    <label for="card-element">Credit or debit card</label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>
    <!-- Used to display form errors -->
    <div id="card-errors"></div>
  </div>
  <button>Submit Payment</button>
</form>

Это именно то, что опубликовано в документах Stripe, только с моими новыми маршрутами вместо действия.

...