CODEWITHSUNDEEP
javascriptvue.js
Eardy
Eardy

Reputation: 135

How to use an external non vue script in vue

I try to use an external script (https://libs.crefopay.de/3.0/secure-fields.js) which is not vue based

I added the script via -tags into index.html

But when I try to intsanciate an object, like in the excample of the script publisher.

let secureFieldsClientInstance =
      new SecureFieldsClient('xxxxx',
        this.custNo,
        this.paymentRegisteredCallback,
        this.initializationCompleteCallback,
        configuration)

Vue says "'SecureFieldsClient' is not defined"

If I use this.

let secureFieldsClientInstance =
          new this.SecureFieldsClient('xxxxx',
            this.custNo,
            this.paymentRegisteredCallback,
            this.initializationCompleteCallback,
            configuration)
        secureFieldsClientInstance.registerPayment()

Vue says: Error in v-on handler: "TypeError: this.SecureFieldsClient is not a constructor"

My Code:

methods: {
startPayment () {
  this.state = null
  if (!this.selected) {
    this.state = false
    this.msg = 'Bitte Zahlungsweise auswählen.'
  } else {
    localStorage.payment = this.selected
    let configuration = {
      url: 'https://sandbox.crefopay.de/secureFields/',
      placeholders: {
      }
    }
    let secureFieldsClientInstance =
      new SecureFieldsClient('xxxxx',
        this.custNo,
        this.paymentRegisteredCallback,
        this.initializationCompleteCallback,
        configuration)
    secureFieldsClientInstance.registerPayment()
    // this.$router.replace({ name: 'payment' })
  }
}
}

Where is my mistake?

EDIT: Updated the hole question

Upvotes: 1

Views: 423

Answers (3)

Eardy
Eardy

Reputation: 135

I found the solution.

the import was never the problem.

I had just to ignore VUEs/eslints complaining about the missing "this" via // eslint-disable-next-line and it works.

So external fuctions/opbjects should be called without "this" it seems.

let secureFieldsClientInstance =
      new SecureFieldsClient('xxxxx',
        this.custNo,
        this.paymentRegisteredCallback,
        this.initializationCompleteCallback,
        configuration)

Upvotes: 1

krukid
krukid

Reputation: 4525

Here is a minimal Vue app for the context your provided, which works: https://codepen.io/krukid/pen/voxqPj

Without additional details it's hard to say what your specific problem is, but most probably the library gets loaded after your method executes, so window.SecureFieldsClient is expectedly not yet defined. Or, there is some runtime error that crashes your script and prevents your method from executing. There could be some other more exotic issues, but lacking a broader context I can only speculate.

To ensure your library loads before running any code from it, you should attach an onload listener to your external script:

mounted () {
  let crefPayApi = document.createElement('script')
  crefPayApi.onload = () => this.startPayment()
  crefPayApi.setAttribute('src', 'https://libs.crefopay.de/3.0/secure-fields.js')
  document.head.appendChild(crefPayApi)
},

Upvotes: 1

buffy
buffy

Reputation: 546

You could download the script and then use the import directive to load the script via webpack. You probably have something like import Vue from 'vue'; in your project. This just imports vue from your node modules.

It's the exact same thing for other external scripts, just use a relative path. When using Vue-CLI, you can do import i18n from './i18n';, where the src folder would contain a i18n.js

If you really want to use a CDN, you can add it like you normally would and then add it to the externals: https://webpack.js.org/configuration/externals/#externals to make it accessible from within webpack

Upvotes: -1

Related Questions