web-dev-qa-db-ja.com

ストライプがエラー「Uncaught（in promise）エラー：指定されたElementからデータを取得できませんでした」で機能しません。

https://stripe.com/docs/stripe-js/elements/quickstart に従ってStripe.jsを使用しようとしています

私はそのURLのサンプルとまったく同じようにhtml、css、javascriptを作成しました。

しかし、「支払いの送信」ボタンをクリックすると、常にコンソールエラーが表示され、機能しません。

(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

これがなぜ起こるか私に知らせてください。

javascriptsubmitpaymentstripe.js
23
LarAng

ぜひお試しください。できます。

<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's 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>
5
LarAng

モバイルとデスクトップの画面サイズを切り替えるときにこの問題が発生しました-Stripeがカード番号の最後の4桁のみを表示するカットオフサイズ。新しい解像度でページを更新すると機能します。

この説明が問題に当てはまる場合は、サイズ変更後に要素を再度マウントできる可能性があります。そうしないと、要素を再作成する必要があります。

4
T Pringle

これがReactコードに表示されている場合、これらのリンクが役立つ可能性があります： https://github.com/stripe/react-stripe-elements/issues/55#issuecomment- 326707827https://github.com/stripe/react-stripe-elements#troubleshooting

基本的に、reactのストライプ要素は、より高次のコンポーネントパターンを使用します。 shouldComponentUpdateを使用するHOCがinjectStripe関数をラップする場合、作成トークンは要素をストライプ化するための参照を見つけることができません。 injectStripeを最も外側のHOCにします

例：

  connect()(injectStripe(YourComponent))
  Becomes
  injectStripe(connect()(YourComponent))
1
William Chou