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>

其中发生的事情是：

已加载dibspayment.com的外部脚本
在后端有一个axios调用，以返回checkoutOptions对象中必需的checkoutKey和paymentId。
从dibspayment.com加载的脚本包含一个对象Dibs，该对象具有一个称为Checkout（checkoutOptions）的方法

开发服务器在http上运行。

我遇到几个错误。一种是“未定义Dib”

    ./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
大量冰雹使一切变得更糟

当前情况的图片

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

任何建议表示赞赏。

Answer 1

本周有此问题。

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

Answer 2

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

要解决这个问题

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

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

2 个答案: