Menu
I am trying to use Stripe.js following https://stripe.com/docs/stripe-js/elements/quickstart
I made html, css, javascript just same as sample of that url.
But when I click 'Submit Payment' Button, it always shows console error and not working.
(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 Please let me know why this happens.
816
Please try this. It works.
<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> Note that both the fix and the cause is the call:
stripe.createToken(card)I mean, this happens if we try to submit with wrong
createprefixed method, and while for abovecreateTokenworks, it may not for other stripe-elements and/or API configurations.
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With