Laravel 9 Vue 3条形集成错误:无法读取未定义属性(读取'createPaymentMethod')

Question

我正在使用Laravel和Vue 3和惰性，在尝试提交表单处理付款时遇到了这个错误。

无法读取未定义的属性(读取“createPaymentMethod”)

错误消息

我的Vue Js密码

<template>
<div id="card-element" class="mt-3 ml-3 w-96"></div>
<div>
    <button type="submit" @click.prevent="processPayment()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 m-5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Pay</button>
</div>
</template>

<script>
import { loadStripe } from '@stripe/stripe-js';

async mounted()
    {
        const stripe = await loadStripe('pk_test_......bumQLY');

        const elements = stripe.elements();

        const cardElement = elements.create('card', {
            classes: {
                base: 'bg-gray-50 border border-gray-300 text text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-50 dark:border-gray-600 dark:placeholder-gray-400 dark:text-black dark:focus:ring-blue-500 dark:focus:border-blue-500'
            }
        });

        cardElement.mount('#card-element');
    },

    setup()
    {
        const paymentId = ref(0);
    
        const processPayment = async (stripe, cardElement) => {
             const { paymentMethod, error } = await stripe.createPaymentMethod(
                'card', cardElement, {
                    billing_details: { name: 'John Doe'}
                }
            );

             if(error){
                alert(error);
             } else {
                paymentId =  paymentMethod.id

                Inertia.post(route('checkout.store', paymentId))
             }
             
        };

        return { processPayment }
    } 
</script>

Answer 1

在setup()的范围内，stripe似乎没有定义，因此它不知道createPaymentMethod是什么。您可能需要更改loadStripe初始化的范围，以使其也可用于setup()函数。