How to use an external non vue script in vue

Question

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

• Gifron: Have you tried to add it to index.html file?
• Eardy: how? the start file is App.vue. the index.html is generated.
• Eardy: ah found the index.html but still get "TypeError: this.SecureFieldsClient is not a constructor"

Answer 1

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)
},

• buffy: A quick note on this: keep in mind that scripts that were dynamically added like this have certain security mechanisms in place to prevent malicious intent. You would for example not be able to use document.write from within that script.
• krukid: @buffy Though it is true external scripts are subject to a whole bunch of browser checks - whether it's CSP or CORB, document.write would not work as expected in a dynamically inserted script because the document will have been closed by the time the script runs. It may work if you include the script synchronously.
• Eardy: thanks for your answer but its not a typo. getCustomerData is a function to initialy load data into the page. this.startPayment is triggered by a buttonclick
• krukid: @Eardy cool, future pointer is to include all the relevant code and/or exclude irrelevant parts (minimize the use case), otherwise it gets confusing, there are lots of typos on SO. Anyway, see the updated answer.
• Eardy: it's not working either. still get " this.SecureFieldsClient is not a constructor" I don't think it's a timing problem, the page is fully loaded, when I click the button. what more context do you need? it's a quite simple page.

Answer 2

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)

Answer 3

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

• Eardy: thanks for your answer, but I would rather not download this file, because it's quite securety relevant and I wan't it always be up to date.