card-element not working with Stripe.elements() 不是函数错误

Question

我正在尝试在 Laravel 应用程序的表单上使用 Stripe 付款方式，但不知何故 card-element 无法在浏览器的控制台上使用 Stripe.elements() is not a function 呈现。

这是我的代码（删除不相关的代码）：

<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>

我试过this

的解决方案

试图通过添加 load 事件侦听器来做到这一点：

<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>

但还是一样的错误Stripe.elements() is not a function这是我关注的官方Stripe Docs。谁能告诉我我可能做错了什么？

Answer 1

根据文档中的示例：

var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
var elements = stripe.elements();

elements() 是 Stripe 的实例上的函数。您的代码中有 Stripe.elements() 大写，这可能是偶然的。应该是小写的。

card-element not working with Stripe.elements() 不是函数错误

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

javascript

stripe-payments

laravel-8