1

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

vue.stripe = Stripe('pk_live_dMLr0hShLxaZmXesv1buhndd')

错误是；

错误条带未定义。

我尝试了多种替代方法来导入包，scriptjs，将其手动安装到 register.vue 中的 dom，但都无济于事，因为它找不到 Stripe 变量并实例化客户端。或者，如果我将 Stripe 设置为等于脚本标签，那么我会得到一个 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（我用来导入包的quasar插件）

任何帮助都可以挽救生命，因为这就是阻止此应用程序完成的全部原因。

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

4

1 回答 1

0

我将 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 是否已经加载——尽管在开发时不会一直在控制台中出现警告时很有用....

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

于 2020-01-21T20:59:42.547 回答