Vue3-条纹支付意向创建问题

Question

我正在创建一个带有条纹支付网关的vue3应用程序。我刚刚在public/index.html文件中包含了我的js文件

<script src="https://js.stripe.com/v3"></script>

并创建了一个用于结账的组件，如下面的

<template>
<div>
<stripe-element-payment
ref="paymentRef"
:pk="pk"
:elements-options="elementsOptions"
:confirm-params="confirmParams"
/>
<button @click="pay">Pay Now</button>
</div>
</template>
<script>
import { StripeElementPayment } from '@vue-stripe/vue-stripe';
export default {
name:'CheckoutPage',
components: {
StripeElementPayment,
},
data () {
return {
pk: 'my_key',
elementsOptions: {
appearance: {},
clientSecret: ''
},
confirmParams: {
return_url: 'http://localhost:8080/success',
},
};
},
methods: {
async generatePaymentIntent () {
const paymentIntent = await this.apiCallToGeneratePaymentIntent(); // api call for payment intent
this.elementsOptions.clientSecret = paymentIntent.client_secret;
},
pay () {
this.$refs.paymentRef.submit();
}
},
};
</script>

当我运行这个时，我得到了一个控制台错误，屏幕上完全是空白的

index.js?5447:1054 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.__vue_render__$1 (index.js?5447:1054:1)
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:896:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5580:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5694:1)
at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5708:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5490:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5448:1)
at patch (runtime-core.esm-bundler.js?d2dd:5038:1)
at mountChildren (runtime-core.esm-bundler.js?d2dd:5234:1)

这是控制台错误，我正在获取

Answer 1

您必须实现此功能apiCallToGeneratePaymentIntent。