An example of payment by strip is not displayed.

Question

An example of payment by strip is not displayed.

I am trying to create a really simple example of using paid payment. This is my PHP file.

// Create a Stripe client var stripe = Stripe('pk_test_XSHE4IYLLy9qCPe7lW7pK4ZE'); // 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', lineHeight: '24px', 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); } }); });

 .StripeElement { background-color: white; padding: 8px 12px; border-radius: 4px; border: 1px solid transparent; 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; }

 <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://js.stripe.com/v3/"></script> <title>test</title> </head> <body> <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"></div> </div> <button>Submit Payment</button> </form> </body> </html>

I followed the example from Stripe

This is the error i got from javascript console

 Uncaught Error: The selector you specified (#card-element) applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mount(). at new t (js.stripe.com/:1) at t.value (js.stripe.com/:1)

Based on the error, I think the js strip cannot find # card-element. But he is.

It might be a drop question: D, but this is my first time using the strip, so it would be great if someone could help me. Many thanks.

+11

javascript stripe-payments

trinhdh Mar 26 '17 at 4:07

source share

5 answers

Joshua craven · Answer 1 · 2017-08-10T06:53:51+0000

Do not add a script to the head; instead, add it right before closing the body.

 <html lang= "en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>test</title> </head> <body> <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"></div> </div> <button>Submit Payment</button> </form> <script src="https://js.stripe.com/v3/"></script> </body> </html>

Entering your script below ensures that the DOM will be displayed before the script runs, so this will do the trick!

Ganesh · Answer 2 · 2017-10-01T12:07:35+0000

Put your script after HTML from,

  <form></form> //after your stripe form put stripe script <script></script>

As below

 <style type="text/css"> * { font-family: "Helvetica Neue", Helvetica; font-size: 15px; font-variant: normal; padding: 0; margin: 0; } html { height: 100%; } body { background: #E6EBF1; align-items: center; min-height: 100%; display: flex; width: 100%; } form { width: 480px; margin: 20px auto; } .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; } label { position: relative; color: #8898AA; font-weight: 300; height: 40px; line-height: 40px; margin-left: 20px; display: block; } .group label:not(:last-child) { border-bottom: 1px solid #F0F5FA; } label > span { width: 20%; text-align: right; float: left; } .field { background: transparent; font-weight: 300; border: 0; color: #31325F; outline: none; padding-right: 10px; padding-left: 10px; cursor: text; width: 70%; height: 40px; float: right; } .field::-webkit-input-placeholder { color: #CFD7E0; } .field::-moz-placeholder { color: #CFD7E0; } .field:-ms-input-placeholder { color: #CFD7E0; } 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; } button:focus { background: #555ABF; } button:active { background: #43458B; } .outcome { float: left; width: 100%; padding-top: 8px; min-height: 24px; text-align: center; } .success, .error { display: none; font-size: 13px; } .success.visible, .error.visible { display: inline; } .error { color: #E4584C; } .success { color: #666EE8; } .success .token { font-weight: 500; font-size: 13px; } </style> <form action="subscription.php" method="post"> <div class="group"> <label> <span>Name</span> <input name="cardholder-name" class="field" placeholder="Jane Doe" /> </label> <label> <span>Phone</span> <input class="field" placeholder="(123) 456-7890" type="tel" /> </label> </div> <div class="group"> <label> <span>Card</span> <div id="card-element" class="field"></div> </label> </div> <button type="submit">Pay $25</button> <div class="outcome"> <div class="error" role="alert"></div> <div class="success"> Success! Your Stripe token is <span class="token"></span> </div> </div> </form> <script src="https://js.stripe.com/v3/"></script> <script type="text/javascript"> var stripe = Stripe('YOUR_PUBLIC_KEY'); var elements = stripe.elements(); var card = elements.create('card', { style: { base: { iconColor: '#666EE8', color: '#31325F', lineHeight: '40px', fontWeight: 300, fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSize: '15px', '::placeholder': { color: '#CFD7E0', }, }, } }); card.mount('#card-element'); function setOutcome(result) { var successElement = document.querySelector('.success'); var errorElement = document.querySelector('.error'); successElement.classList.remove('visible'); errorElement.classList.remove('visible'); if (result.token) { // Use the token to create a charge or a customer // https://stripe.com/docs/charges successElement.querySelector('.token').textContent = result.token.id; successElement.classList.add('visible'); } else if (result.error) { errorElement.textContent = result.error.message; errorElement.classList.add('visible'); } } card.on('change', function(event) { setOutcome(event); }); document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); var form = document.querySelector('form'); var extraDetails = { name: form.querySelector('input[name=cardholder-name]').value, }; stripe.createToken(card, extraDetails).then(setOutcome); }); </script>

Gojirademonstah · Answer 3 · 2018-04-23T17:36:26+0000

For those who have the same problem - the code snippet in Stripe documents is incomplete. Thus, the corrections suggested above may actually be necessary to ensure the correct order of operations, but all this will not work if you do not define the stripeTokenHandler method.

Striped documents define a method (hereinafter referred to as the page) as:

 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', 'hidden'); hiddenInput.setAttribute('name', 'stripeToken'); hiddenInput.setAttribute('value', token.id); form.appendChild(hiddenInput); // Submit the form form.submit(); }

Ron royston · Answer 4 · 2018-06-25T23:44:45+0000

Stripe.js displays input for credit card number, expiration date, CVC in iFrames. You cannot create them or get them using JavaScript. However, you can style the containers as you like, which will allow you to get a pretty close match with the user interface of your site - Bootstrap, MDC-Web or something else.

If your items do not appear, try below to get started.

 <div class="stripe-custom-element"> <label for="stripe-card">Card Number</label> <div class="" id="stripe-card"></div> </div> <div class="stripe-custom-element"> <label for="stripe-exp">Expiration</label> <div class="" id="stripe-exp"></div> </div> <div class="stripe-custom-element"> <label for="stripe-cvc">CVC</label> <div class="" id="stripe-cvc"></div> </div> var cardNumberElement = doc.getElementById("stripe-card"); var cardExpiryElement = doc.getElementById("stripe-exp"); var cardCvcElement = doc.getElementById("stripe-cvc"); var cardNumber = elements.create('cardNumber', {}); var cardExpiry = elements.create('cardExpiry', {}); var cardCvc = elements.create('cardCvc', {}); cardNumber.mount(cardNumberElement); cardExpiry.mount(cardExpiryElement); cardCvc.mount(cardCvcElement); registerElements([cardNumber, cardExpiry, cardCvc]);

Gabriele calo · Answer 5 · 2019-01-23T16:27:52+0000

I installed the stripe module on prestashop version 17.4.4, I don’t see a credit card on the site, it appears for a second and then disappears. After the error and my configuration

 (index):1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS. value @ (index):1 (index):1 Uncaught Error: The selector you specified (#card-element) applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mount(). at new t ((index):1) at t.<anonymous> ((index):1) at t.mount ((index):1) at payment_stripe.js:46

Stripe.js configuration

 // Create a Stripe client. var stripe = Stripe('pk_testfl9'); // 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', lineHeight: '18px', 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', 'hidden'); hiddenInput.setAttribute('name', 'stripeToken'); hiddenInput.setAttribute('value', token.id); form.appendChild(hiddenInput); // Submit the form form.submit(); }

Help me please :) Thanks

An example of payment by strip is not displayed.

More articles: