将 Stripe.js 作为 ES 模块导入到 Vue 中

我正在尝试按照 stripe elements 文档中的说明并将 ES 模块安装到我的 Vue 支付组件中。 https://stripe.com/docs/stripe-js#html-js

请注意，目前 Stripe 网站 ES 模块安装选项卡已关闭。这是一个替代品。 https://dev.to/stripe/importing-stripe-js-as-an-es-module-1ni

I ran:

npm install @stripe/stripe-js

Usage

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;

另外，我的代码基于本教程 https://www.digitalocean.com/community/tutorials/vuejs-stripe-elements-vue-integration

首先，把预期的顶层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...

  },
},