web-dev-qa-db-fra.com

Stripe ne fonctionne pas avec l'erreur 'Uncaught (in promise) Erreur: nous n'avons pas pu récupérer les données de l'élément spécifié.'

J'essaie d'utiliser Stripe.js en suivant https://stripe.com/docs/stripe-js/elements/quickstart

J'ai fait html, css, javascript juste comme échantillon de cette URL.

Mais lorsque je clique sur le bouton "Soumettre le paiement", il affiche toujours une erreur de console et ne fonctionne pas.

(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

Veuillez me faire savoir pourquoi cela se produit.

javascriptsubmitpaymentstripe.js
23
LarAng

Veuillez essayer ceci. Ça marche.

<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

J'ai eu ce problème lors du basculement entre les tailles d'écran mobile et de bureau - la taille de coupure où Stripe n'affiche que les 4 derniers chiffres du numéro de carte. Si je rafraîchis la page dans la nouvelle résolution, cela fonctionne.

Si cette description correspond à votre problème, vous pourrez peut-être remonter l'élément après le changement de taille, ou vous devrez le recréer.

4
T Pringle

Si vous voyez cela dans le code React, ces liens peuvent aider: https://github.com/stripe/react-stripe-elements/issues/55#issuecomment- 326707827https://github.com/stripe/react-stripe-elements#troubleshooting

Essentiellement, les éléments de bande dans react utilisent le modèle de composant d'ordre supérieur. Si un HOC qui utilise shouldComponentUpdate encapsule la fonction injectStripe, create token ne sera pas en mesure de trouver la référence aux éléments stripe. Faire de injectStripe le HOC le plus externe

Exemple:

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