Share external script between VueJS components

Question

I am trying to load the external Stripe script in one component here https://gitlab.com/gadelkareem/skeleton/-/blob/feature/stripe/src/frontend/src/components/payment/PaymentMethods.vue#L167

      this.includeStripe('js.stripe.com/v3/', function () {
        this.configureStripe()
      }.bind(this))

Then I load a dialog inside the same page which also needs the same Stripe() script so I have to load it again here https://gitlab.com/gadelkareem/skeleton/-/blob/feature/stripe/src/frontend/src/components/payment/AddPaymentMethod.vue#L147 with similar duplicated code.

Is there a way to share that script between both components? preferably without making it global.

Answer 1

You can create the init() and configureStripe() method in Vue's global context.

main.js

new Vue({
  ...
  methods: {
    init() {
       this.includeStripe('js.stripe.com/v3/', function () {
        this.configureStripe()
      }.bind(this))
    },
    configureStripe () {
      // eslint-disable-next-line no-undef
      this.stripe = Stripe(this.pk)

      this.elements = this.stripe.elements()
      this.card = this.elements.create('card', {
        hidePostalCode: false,
        style: {
          base: {
            iconColor: '#666EE8',
            color: '#31325F',
            lineHeight: '40px',
            fontWeight: 300,
            fontFamily: 'Helvetica Neue',
            fontSize: '15px',

            '::placeholder': {
              color: '#CFD7E0'
            }
          }
        }
      })

      this.card.mount('#card-element')
    },
  }
  ...
});