Quasar Framework 客户端 Stripe 的问题

Question

我目前正在尝试配置 stripe.js 的客户端部分，以便我可以使用它的元素 API 源创建功能来收集用户付款信息。 然而，客户端包只能通过脚本标签使用。 我已经尝试通过 index.template.html 将它引入（这不适用于类星体），但是一旦我去初始化一个 Stripe 客户端，它总是会出错；

vue.stripe = Stripe('pk_live_dMLr0hShLxaZmXesv1buhndd')

错误是；

错误条带未定义。

我尝试了多种替代方法在包中导入，scriptjs，手动将其安装到 register.vue 中的 dom，但都无济于事，因为它找不到 Stripe 变量并实例化客户端。 或者，如果我将 Stripe 设置为等于 script 标签，那么我会得到一个 Stripe is not a function 错误。 这是我正在关注的教程；

https://stripe.com/docs/stripe-js

和我的代码；

https://github.com/Screen-Art-Studios/TimeCrunch/blob/master/src/pages/Register.vue （第 74-76 和 142-203 行我想调用元素 api 的注册页面）

https://github.com/Screen-Art-Studios/TimeCrunch/blob/master/src/plugins/stripe.js （我用来导入包的类星体插件）

任何帮助都将是救命稻草，因为这是阻止此应用程序完成的全部内容。

*更新我仍然无法准确理解正在发生的事情，但是一旦我将其更改为'this.$Stripe()' vs 'Stripe()' 认为这将引用插件 Quasar 生成并编译。 但是现在它抛出一个 stripe.elements 不是函数错误； var stripe = this.$Stripe('pk_test_EUZwPeinKym4DDl0d9kMbrOw') var elements = stripe.elements() 这几乎正是教程规定的[唯一的区别是从 Stripe() 到 this.$Stripe()] 的变化。 我将继续对此感到困惑，对整个 Quasar 包事情的任何澄清和/或对解决此问题的见解都将是救命稻草。

Answer 1

我将 Quasar 与 Typescript（和vue-property-decorators ）一起使用，下面的效果很好。

如果愿意，您可以轻松地将其调整为纯 JS。

模板部分

<div>
  <p>Card</p>
  <div id="card-element"></div>
</div>

脚本部分

// Includes Stripe.js dynamically
  includeStripe(URL: string, callback: any) {
    let documentTag = document
    let tag = 'script'
    let object = documentTag.createElement(tag)
    let scriptTag = documentTag.getElementsByTagName(tag)[0]
    object.setAttribute('src', `//${URL}`)

    if (callback) {
      object.addEventListener(
        'load',
        function(e) {
          callback(null, e)
        },
        false
      )
    }
    scriptTag.parentNode!.insertBefore(object, scriptTag)
  }

  stripe: any
  elements: any
  card: any

  async configureStripe() {
    const pubKey = await getStripePubKey()
    this.stripe = (window as any).Stripe(pubKey)
    this.elements = this.stripe.elements()
    this.card = this.elements.create('card')

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

  created() {
    // checks that Stripe is not loaded already, useful when hot-reloading in localhost
    const stripeComponents = document.getElementById('card-element')
    if (!stripeComponents)
      this.includeStripe('js.stripe.com/v3/', this.configureStripe)
  }
}

请注意，我通过自定义 API 函数调用（从服务器检索）获取 pubKey，以便以后可以在需要时动态更改它。

您也可以跳过检查——Stripe.js 是否已经加载——尽管在开发时控制台中始终没有警告很有用......

您也可以选择“手动”、非动态插入的版本，在 Quasar 的index.template.html添加<script src="https://js.stripe.com/v3/"></script> ； 不确定这是最好的主意，因为它会不必要地在整个应用程序中加载它。