如何在 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 */