Stripe payment example is not displaying
I am trying to create a really simple example of using Stripe payments. This is my PHP file:
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 js 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.
Answer
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!