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

how? the start file is App.vue. the index.html is generated. — Eardy
– Eardy, Commented Jul 30, 2019 at 6:57
ah found the index.html but still get "TypeError: this.SecureFieldsClient is not a constructor" — Eardy
– Eardy, Commented Jul 31, 2019 at 8:21

krukid · Accepted Answer · 2019-07-30 15:17:52Z

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

edited Jul 30, 2019 at 15:17

answered Jul 29, 2019 at 14:06

krukid

4,5555 gold badges34 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

buffy Over a year ago

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 Over a year ago

@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 Over a year ago

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 Over a year ago

@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 Over a year ago

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.

|

Eardy · Accepted Answer · 2019-07-31 08:58:01Z

1

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)

answered Jul 31, 2019 at 8:58

Eardy

1351 silver badge13 bronze badges

Comments

buffy · Accepted Answer · 2019-07-29 14:07:42Z

-1

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

answered Jul 29, 2019 at 14:07

buffy

5462 silver badges11 bronze badges

1 Comment

Eardy Over a year ago

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.

Collectives™ on Stack Overflow

How to use an external non vue script in vue

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related