[Vuejs]-Share external script between VueJS components

by

0👍

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')
    },
  }
  ...
});

Leave a comment