javascript - 将 Stripe.js 作为 ES 模块导入 Vue

Question

I'm trying follow the directions from the stripe elements docs and install the ES module into my Vue payment component.

请注意，目前 Stripe 网站 ES 模块安装选项卡已关闭。 Here's a substitute.

我跑了:

npm install @stripe/stripe-js

用法

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

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

当我更改代码以反射(reflect)模块的安装时，出现此错误:

30:17 error Parsing error: Can not use keyword 'await' outside an async function

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;

Also, I based my code on this tutorial

Answer 1

首先，将预期的顶级 vars 放入数据中:

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

其次，制作一个created 生命周期钩子(Hook)并加载内容:

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

  },
},