Vue.jsにStripe Elementsを明示的に取り込む

CDNで読み込んでいますが、インストールする方が安全かもしれないです。(バージョン変更時など)

コード

<template>
  <div id="card-element"></div>
</template>

<script>
export default {
  data () {
    return {
      card: null,
      stripe: [],
      stripeAPIToken: process.env.VUE_APP_STRIPE_API_KEY
    }
  },

  mounted () {
    this.includeStripe('js.stripe.com/v3/', () => {
      this.configureStripe()
    })
  },

  methods: {
    /**
     * Stripeを明示的に取り込む
     */
    includeStripe (URL, callback) {
      const documentTag = document; const tag = 'script'
      const object = documentTag.createElement(tag)
      const scriptTag = documentTag.getElementsByTagName(tag)[0]
      object.src = '//' + URL
      if (callback) { object.addEventListener('load', function (e) { callback(null, e) }, false) }
      scriptTag.parentNode.insertBefore(object, scriptTag)
    },

    /**
     * Stripeの設定
     */
    configureStripe () {
      // eslint-disable-next-line no-undef
      this.stripe = Stripe(this.stripeAPIToken)

      const elements = this.stripe.elements()

      this.card = elements.create('card', {
        hidePostalCode: true,
        style: {
          base: {
            fontSize: '16px'
          }
        }
      })

      this.card.mount('#card-element')
    },
  }
}
</script>