如何在 vuejs 中使用 DIBS 支付系统？答案

【问题标题】：How to use DIBS payment system with vuejs?如何在 vuejs 中使用 DIBS 支付系统？
【发布时间】：2019-07-08 15:14:35
【问题描述】：

我在 nuxtjs/vuejs 项目中有以下示例代码

<template>
    <v-app>
      <div id="dibs-complete-checkout"></div>
    </v-app>
</template>


<script>
  export default {

    head () {
      return {
        script: [
          { src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' },
          { src: 'https://test.checkout.dibspayment.eu/v1/checkout.js?v=1' }
        ]
      }
    },

    created () {
      this.$axios.get('test/11').then((response) => {
        var checkoutOptions = {
          checkoutKey: response.data.checkOutKey,
          paymentId: response.data.dibsPaymentId,
          containerId: 'dibs-complete-checkout',
          language: 'en-GB'
        }

        var checkout = new Dibs.Checkout(checkoutOptions)

        checkout.on('payment-completed', function (response) {
        })

        checkout.on('pay-initialized', function (response) {
          checkout.send('payment-order-finalized', true)
        })
      })
        .catch((e) => {
          console.error(e)
        })
    }
  }
</script>

里面发生了什么，是：

已加载来自 dibspayment.com 的外部脚本
有一个 axios 调用后端返回一个 checkoutKey 和一个 paymentId，这在 checkoutOptions 对象中是必需的
从 dibspayment.com 加载的脚本包含一个对象 Dibs，它有一个名为 Checkout(checkoutOptions) 的方法

开发服务器在 http 上运行。

我遇到了几个错误。一是“未定义Dibs”

    ./pages/index.vueModule Error (from ./node_modules/eslint-loader/index.js):C:\git\ssfta_web\pages\index.vue  29:28  error  'Dibs' is not defined  no-undef✖ 1 problem (1 error, 0 warnings)

这很奇怪，因为页面加载并呈现在

另一个错误是

OPTIONS https://test.checkout.dibspayment.eu/api/v1/theming/checkout 401 (Unauthorized)

最后一个错误是

Access to XMLHttpRequest at 'https://test.checkout.dibspayment.eu/api/v1/theming/checkout' from origin 'http://10.0.75.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我试过了：

正在联系 DIBS 支付支持团队，他们的回复既慢又没有提供真正的建议（向我提供了顶级常见问题解答页面的链接）。我怀疑他们使用他们的销售部门来回答查询。
在 https 上运行它，结果更糟
在具有 ssl 证书的 nginx 反向代理后面运行它，该进程通过 http 运行代码本身，但 nginx 将其“转换”（？）它到 https
无数次冰雹让一切变得更糟

当前情况的图像

我真的没有问题，我只是希望/怀疑我忘记了一些有人可以发现的基本配置或细节

任何建议表示赞赏。

【问题讨论】：

标签： vue.js https nuxt.js dibs

【解决方案1】：

这周遇到了这个问题。

联系了 Dibs 支持解决这个问题，离开了工作，第二天我返回了一封来自支持的电子邮件，其中包含我已经收到的 API 密钥的副本，但是在再次测试我的项目之后（没有任何变化）这个错误神奇地消失了，所以显然这个问题已经结束了。假设我的钥匙缺少正确的授权。

【讨论】：

我当时的错误是没有正确读取错误信息，这是一个 ES lint 错误，不是真正的错误
这解决了它 /*eslint-disable / var checkout = new Dibs.Checkout(this.checkoutData) / eslint-enable */

【解决方案2】：

正确阅读错误信息，是 es lint 错误

这样做是为了解决它

/*eslint-disable */
  var checkout = new Dibs.Checkout(this.checkoutData)
  /* eslint-enable */

【讨论】：