如何与vuejs一起使用DIBS支付系统？

Question

在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>

在那里发生的事情是：

1. 加载来自dibspayment.com的外部脚本
2. 对后端有一个axios调用来返回checkoutKey和paymentId，这在checkoutOptions对象中是必需的。
3. 从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.

我试过：

1. 联系DIBS支付支持团队，在那里的反应都很慢，没有提供真正的建议(提供给我一个链接到顶级常见问题解答页面)。我怀疑他们会利用他们的销售部来回答问题。
2. 在https上运行它，这使它更糟。
3. 在具有ssl证书的nginx反向代理之后运行它，该进程在http上运行代码本身，但nginx‘会转换’(?)它指向https
4. 无数的冰雹使一切变得更糟

当前形势的形象

​

​

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

任何建议都很感激。

Answer 1

这个星期就有问题了。

联系了Dibs支持的问题，离开了工作，第二天，我用我已经收到的API的副本返回了一封来自支持的电子邮件，但是在再次测试了我的项目(没有改变)之后，这个错误神奇地消失了，所以这个问题显然是他们端上的问题。假设我的钥匙丢失了正确的授权。

Answer 2

正确阅读错误信息，这是一个es lint错误。

为了解决这个问题

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