CODEWITHSUNDEEP
javascriptstripe-paymentslaravel-8
Salman Malik
Salman Malik

Reputation: 1118

card-element not working with Stripe.elements() is not a function error

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?

Upvotes: 2

Views: 4104

Answers (1)

Auroratide
Auroratide

Reputation: 2577

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.

Upvotes: 5

Related Questions