将 stripe.js 作为 ES 模块导入 Vue

Question

我正在尝试按照条纹元素文档中的说明将 ES 模块安装到我的 Vue 支付组件中。

请注意，目前 Stripe 网站 ES 模块安装选项卡已关闭。这是一个替代品。

我跑了：

npm install @stripe/stripe-js

用法

import {loadStripe} from '@stripe/stripe-js';
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

当我更改代码以反映模块的安装时，出现此错误：

30：17 错误 解析错误：无法在异步函数外部使用关键字"await">

import {loadStripe} from '@stripe/stripe-js';
let stripe = await loadStripe(`pk_test_mypin`)
elements = stripe.elements()
card = undefined;
export default {
mounted: function () {
card = elements.create('card', {
});
card.mount(this.$refs.card);
},
data () {
return {
cardHolderName: '',
stripeErrorMessage: null,
serverErrorMessage: null,
}
},
computed: {
},
methods: {
processPayment(){
let self = this;
stripe.createPaymentMethod(
'card', card, {
billing_details: { name: this.cardHolderName }
}).then(function(result) {
if(self.subscribitionCheckout){
self.submitPaymentForm(result.paymentMethod);
} else if (self.changePaymentMethod){
self.changePaymentMethod(result.paymentMethod)
}
if (result.error) {
self.stripeErrorMessage = result.error.message;
self.hasCardErrors = true;
self.$forceUpdate(); // Forcing the DOM to update so the Stripe Element can update.
return; 
}
});
},
},
}

在我有这个之前

let stripe = Stripe(`pk_test_mypin`),
elements = stripe.elements(),
card = undefined;

另外，我的代码基于本教程

Answer 1

首先，将预期的顶级vars放在数据中：

stripe: {}, // or whatever data type
elements: {}, // or whatever data type
card: {}, // or whatever data type

其次，创建一个created生命周期钩子并在那里加载内容：

created()
{
loadStripe(`pk_test_TYooMQauvdEDq54NiTphI7jx`).
then ( (result) =>
{
this.elements = result.elements
// do stuff with card if you have too...
},
},