Menu
I am trying to create a really simple example of using Stripe payments.
This is my code:
// 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 that I got from the 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 Stripe JavaScript could not find any #card-element, but it is there.
This could be a dumb question, but this is my first time using Stripe, so it would be great if someone could help me. Thank you so much.
727
Visit the Manage payment methods for your connected accounts page in your Dashboard to configure which payment methods your connected accounts accept. Changes to default settings apply to all new and existing connected accounts. Your connected accounts accept this payment method during checkout.
Apply branding You can customize the look and feel of Checkout in the Stripe Dashboard. Go to Branding Settings where you can: Upload a logo or icon. Customize the Checkout page's background color, button color, font, and shapes.
There are three possible reasons why a credit card payment might fail: Payments declined by card issuers. Blocked payments. Invalid API calls.
As a payment processor, Stripe allows business owners to accept payments from credit and debit cards and processes those payments. Using Stripe, businesses can also accept payments from mobile wallets and buy now, pay later services. Stripe also supports payments in a variety of currencies.
Don't add the script in the head, instead, add it right before you close 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> Putting your script at the bottom ensures that the DOM is rendered prior to executing the script, so that'll do the trick!
111
Put your script after the 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> 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
