Stripe не работает с ошибкой "Неподготовлено (в обещании) Ошибка: мы не смогли получить данные из указанного элемента".

Я пытаюсь использовать Stripe.js после https://stripe.com/docs/stripe-js/elements/quickstart

Я сделал html, css, javascript так же, как образец этого url.

Но когда я нажимаю кнопку "Отправить платеж", она всегда показывает ошибку консоли и не работает.

(index):1 Uncaught (in promise) Error: We could not retrieve data from the specified Element.
              Please make sure the Element you are attempting to use is still mounted.
    at new t ((index):1)
    at e._handleMessage ((index):1)
    at e._handleMessage ((index):1)
    at (index):1

Пожалуйста, дайте мне знать, почему это происходит.

ОТВЕТЫ

Ответ 1

У меня была эта проблема при переключении между размерами экрана мобильного и настольного компьютера - обрезанным размером, когда Stripe отображает только последние 4 цифры номера карты. Если я обновлю страницу в новом разрешении, это будет работать.

Если это описание соответствует вашей проблеме, вы можете снова смонтировать элемент после изменения размера, или вам придется пересоздать его.

Ответ 2

Пожалуйста, попробуйте это. Оно работает.

<html>
    <head>
        <style>
            /**
            * The CSS shown here will not be introduced in the Quickstart guide, but shows
            * how you can use CSS to style your Element container.
            */
            .StripeElement {
            box-sizing: border-box;

            height: 40px;

            padding: 10px 12px;

            border: 1px solid transparent;
            border-radius: 4px;
            background-color: white;

            box-shadow: 0 1px 3px 0 #e6ebf1;
            -webkit-transition: box-shadow 150ms ease;
            transition: box-shadow 150ms ease;
            }

            .StripeElement--focus {
            box-shadow: 0 1px 3px 0 #cfd7df;
            }

            .StripeElement--invalid {
            border-color: #fa755a;
            }

            .StripeElement--webkit-autofill {
            background-color: #fefde5 !important;
            }
        </style>
    </head>
    <body>
        <script src="https://js.stripe.com/v3/"></script>

        <form action="/charge" method="post" id="payment-form">
            <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" role="alert"></div>
            </div>

            <button>Submit Payment</button>
        </form>

        <script>
            // Create a Stripe client.
            var stripe = Stripe('pk_test_XzLQCcuHS0Qc5xPIARiG8aNU');

            // 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',
                    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 {
                    // Send the token to your server.
                    stripeTokenHandler(result.token);
                    }
                });
            });

            // Submit the form with the token ID.
            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', 'text');
                // hiddenInput.setAttribute('name', 'stripeToken');
                // hiddenInput.setAttribute('value', token.id);
                // form.appendChild(hiddenInput);
                alert('Success! Got token: ' + token.id);

                // Submit the form
                // form.submit();
            }
        </script>
    </body>
</html>

Ответ 3

Извините, что поднял эту старую тему. Мне бы очень хотелось услышать, как вы решили свою проблему, потому что я испытываю то же самое.. Спасибо

? ver = 4.9.8: 1 Uncaught (в обещании) Ошибка: нам не удалось получить данные из указанного элемента. Пожалуйста, убедитесь, что элемент, который вы пытаетесь использовать, все еще установлен. в новом t (? ver = 4.9.8: 1) в e._handleMessage (? ver = 4.9.8: 1) в e._handleMessage (? ver = 4.9.8: 1) в? ver = 4.9.8: 1

Ответ 4

Это должно работать

Код JS

 constructor(paymentInfo) {
    this.paymentInfo = paymentInfo;
    this.paymentInfo.amount = 25;
   this.loadStripe();
}

afterLoadingStripe() {
    this.stripe = Stripe(this.publicKey);
    var elements = this.stripe.elements();
    this.card = elements.create('card', {
        style: {
            base: {
                iconColor: '#666EE8',
                color: '#31325F',
                lineHeight: '40px',
                fontWeight: 300,
                fontFamily: 'Helvetica Neue',
                fontSize: '15px',

                '::placeholder': {
                    color: '#CFD7E0',
                },
            },
        }
    });
    this.card.mount('#card-element');
}

getToken() {
    let context = this;
    this.stripe.createToken(this.card).then(function (result) {
        if (result.error) {
        } else {
            context.paymentInfo.token = result;
            context.submitPaymentInfo();
        }
    });
}
submitPaymentInfo() {
    //submit here
    return;
}

loadStripe() {
    var script = document.createElement('script');
    let context = this;
    script.onload = function () {
        context.afterLoadingStripe();
    };
    script.src = "https://js.stripe.com/v3/";
    document.getElementsByTagName('head')[0].appendChild(script);
}

}

HTML

<script src="https://js.stripe.com/v3/"></script>
<div class="modal-dialog modal-lg">
    <require from="../../../css/stylesheet.css"></require>
    <div class="modal-content">
        <div class="modal-header">
            <h4>Payment</h4>
            <button type="button" id="stripe-modal-close" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
            <form class="stripe-form" submit.delegate="getToken()">
                <div class="group">
                    <label class="stripe-label">
                        <span>Title</span>
                        <input id="name" class="stripe-field" placeholder="Jane Doe" />
                    </label>
                    <label class="stripe-label">
                        <span>Card</span>
                        <div id="card-element" class="stripe-field"></div>
                    </label>
                </div>
                <button class="btn btn-outline-dark my-3" type="submit">Pay $25</button>
                <div class="stripe-outcome">
                    <div class="stripe-error"></div>
                </div>
            </form>
        </div>
    </div>
</div>

CSS

.group {
  background: white;
  box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
  0 3px 6px 0 rgba(0,0,0,0.08);
  border-radius: 4px;
  margin-bottom: 20px;
}

.stripe-label {
  position: relative;
  color: #8898AA;
  font-weight: 300;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  display: flex;
  flex-direction: row;
}

.group label:not(:last-child) {
  border-bottom: 1px solid #F0F5FA;
}

.stripe-label > span {
  width: 80px;
  text-align: right;
  margin-right: 30px;
}

.stripe-field {
  background: transparent;
  font-weight: 300;
  border: 0;
  color: #31325F;
  outline: none;
  flex: 1;
  padding-right: 10px;
  padding-left: 10px;
  cursor: text;
}

.stripe-field::-webkit-input-placeholder { color: #CFD7E0; }
.stripe-field::-moz-placeholder { color: #CFD7E0; }

.stripe-button {
  float: left;
  display: block;
  background: #666EE8;
  color: white;
  box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
  0 3px 6px 0 rgba(0,0,0,0.08);
  border-radius: 4px;
  border: 0;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  height: 40px;
  line-height: 38px;
  outline: none;
}

.stripe-button:focus {
  background: #555ABF;
}

.stripe-button:active {
  background: #43458B;
}

.stripe-outcome {
  float: left;
  width: 100%;
  padding-top: 8px;
  min-height: 24px;
  text-align: center;
}

.stripe-success, .stripe-error {
  display: none;
  font-size: 13px;
}

.stripe-success.visible, .stripe-error.visible {
  display: inline;
}

.stripe-error {
  color: #E4584C;
}

.stripe-success {
  color: #666EE8;
}

.stripe-success .stripe-token {
  font-weight: 500;
  font-size: 13px;
}