条带元素不接受信用卡输入

Question

I am trying to use some Stripe Elements to input Credit Card details. am currently using Laravel hosted with Valet. I understand that Stripe requires to have HTTPS set up. I have run the Valet secure command and can see the website is serving via HTTPS.

For some reason I am not able to enter any Credit card information into the element stripe has provided. When I have used the same Code as provided from the Stripe website it works fine in JSfiddle but not let me input on my valet server.

Is it possiable that stripe is not letting me do this because my TLS certificate is not verified by Digitrust or a similar company? If so, how would I go about working around this while I'm using valet i'm my localhost.

Any help or guidance would be great, I can't see where I am going wrong here.

The examples I have tried are simply from

https://stripe.com/docs/elements/examples

JSFiddle of working example that won't allow me to enter Input on the credit card field

https://jsfiddle.net/w4s8z4kd/

<script src="https://js.stripe.com/v3/"></script>
<form>
<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"></div>
<div class="success">
Success! Your Stripe token is <span class="token"></span>
</div>
</div>
</form>

At this stage I beleieve my JS and CSS is correct, have simply copied it from the examples page and confirmed JS working with a simple Alert test.

Thanks Again!

Answer 1

Sorry, I overlooked the order of My Javascript. God dammit