All geek questions in one place

Stripe does not work with the error "Unprepared (in the promise) Error: we could not get data from the specified element."

I am trying to use Stripe.js after https://stripe.com/docs/stripe-js/elements/quickstart

I made html, css, javascript just like a sample of this url.

But when I click the "Send payment" button, it always shows a console error and does not work.

(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 is happening.

+16
source share
4 answers

I had this problem when switching between the screen sizes of a mobile and a desktop computer - a cropped size when Stripe displays only the last 4 digits of the card number. If I refresh the page in a new resolution, this will work.

If this description is appropriate for your problem, you can mount the item again after resizing, or you will have to recreate it.

+3
source

Please try this. It is working.

 <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
source

Sorry to bring up this old topic. I would love to hear how you solved your problem because I am experiencing the same thing .. Thank you

? ver = 4.9.8: 1 Uncaught (in the promise) Error: we were not able to get data from the specified element. Please make sure that the item you are trying to use is still installed. in the new t (? ver = 4.9.8: 1) in e._handleMessage (? ver = 4.9.8: 1) in e._handleMessage (? ver = 4.9.8: 1) in? ver = 4.9.8: 1

0
source

This should work

JS code

  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; }
0
source

Source: https://habr.com/ru/post/1274872/

More articles:


All Articles