I am trying to make a Stripe payment method on my form in Laravel App but somehow the card-element fails to render with a Stripe.elements() is not a function on browser's console.
I here's my code (cutting irrelevant code):
<head>
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<form>
<div class="mb-6 mx-2">
<div id="card-element"></div>
</div>
<div class="mb-2 mx-2">
@csrf
<input type="hidden" id="payment_method_id" name="payment_method_id" value="">
<button type="submit" id="form_submit"> Continue to payment</button>
</div>
</form>
<script>
const stripe = Stripe("{{ env('STRIPE_KEY') }}");
const elements = Stripe.elements();
const cardElement = elements.create('card', {
});
cardElement.mount('#card-element');
</script>
</body>
I have tried solution from this
Tried to do it by adding load event listener as:
<script>
window.addEventListener('load', function (){
const stripe = Stripe("{{ env('STRIPE_KEY') }}");
const elements = Stripe.elements();
const cardElement = elements.create('card', {
});
cardElement.mount('#card-element');
});
</script>
but still the same error Stripe.elements() is not a function Here's the official Stripe Docs that I am following.
Can anybody tell me what am I possibly doing wrong?
According to the sample from the documentation:
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
var elements = stripe.elements();
elements() is a function on an instance of Stripe. You have Stripe.elements() in your code capitalized, probably by accident. It should be lowercase.