Importing Stripe.js as an ES Module into Vue

Question

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

Note, currently the Stripe websites ES module installation tab is down. Here's a substitute.

I ran:

npm install @stripe/stripe-js

Usage

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

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

When I change my code to reflect the installation of the module I get this error:

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; 
                }
            });

        },
    },
}

Before I had this

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

Also, I based my code on this tutorial

The issue is not about the import, but how you attempt to use it. The error message tells you exactly what's wrong. — Sirko, Jun 13 '20 at 10:34
@Sirko, remove the await? This gives me another set of errors that I didn't get with the cdn. Any advice? — Kyle Corbin Hurst, Jun 13 '20 at 10:59
Wrap it inside an async function and call that function somewhere. There are plans for top level await, but afaik it's not supported yet. Just removing `await` changes the behavior. Maybe read up a little on `async/await`. — Sirko, Jun 13 '20 at 11:04

score 3 · Accepted Answer · answered Jun 14 '20 at 03:56

First, put the expected top level vars in data:

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

Second, make a created lifecycle hook and load the content there:

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

  },
},

Importing Stripe.js as an ES Module into Vue

1 Answers1

Linked