Как использовать платежную систему DIBS с vuejs?

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. В бэкэнд есть осевой вызов для возврата checkoutKey и paymentId, необходимый в объекте checkoutOptions
3. Скрипт, загруженный с сайта dibspayment.com, содержит объект Dibs, у которого есть метод Checkout (checkoutOptions)

Сервер разработки работает по http.

Я получаю несколько ошибок. Один из них "Чур не определен"

    ./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. запускать его за обратным прокси-сервером nginx, имеющим ssl-сертификат; процесс запускает сам код через http, но nginx "конвертирует" (?) его в https
4. многочисленные градины, которые сделали все хуже

Образ текущей ситуации

У меня нет действительно вопроса, я просто надеюсь / подозреваю, что я забыл некоторую базовую конфигурацию или детали, которые кто-то может определить

Любой совет приветствуется.

Answer 1

Внимательно прочтите сообщение об ошибке, это серьезная ошибка

Сделал это, чтобы решить эту проблему

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

Answer 2

Была эта проблема на этой неделе.

Обратился в службу поддержки Dibs с проблемой, ушел с работы, и на следующий день я вернулся на электронное письмо от службы поддержки с копией моих API-ключей, которые я уже получил, но после повторного тестирования моего проекта (который не имел изменений) эта ошибка волшебным образом исчезли, так что очевидно, что эта проблема была их делом. Предполагая, что у моих ключей отсутствовали надлежащие разрешения.