How to use DIBS payment system with vuejs?

Question

I have the following sample code, in a nuxtjs/vuejs project

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

What is happening in there, is:

1. An external script from dibspayment.com is loaded
2. There is an axios call to the backend to return a checkoutKey and a paymentId, necessary in the checkoutOptions object
3. The script loaded from dibspayment.com contains an object, Dibs, which has a method called Checkout(checkoutOptions)

The development server is running on http.

I get several errors. One is "Dibs is not defined"

    ./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)

Which is odd, because the page loads and is rendered inside the

Another error is

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

And the last error is

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.

I've tried:

1. Contacting DIBS payment support team, where responses are both slow and offer no real advice (providing me with a link to the top level FAQ page). I suspect that they use their sales department to answer inquiries.
2. running it on https, that made it worse
3. running it behind a nginx reverse proxy, which has an ssl certificate, the process running the code itself over http but nginx 'converts' (?) it to https
4. numerous hail maries that made everything worse

An image of the current situation

I don't really have a question, I just hope/suspect that I'm forgetting some basic configuration or detail that someone could spot

Any advice appreciated.

Answer 1

Had this issue this week.

Contacted Dibs Support with the issue, left work and the next day i returned to an email from support with a copy of my API-keys which i already had received, but after testing out my project again (Which had no changes) this error magically disappeared, so apparently this issue was something on their end. Assuming my keys were missing the proper authorisations.

Answer 2

Read the error message properly, it is an es lint error

Did this to solve it

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