I am trying to implement this simple example using creditcard.js

<div class="ccjs-card">
  <label class="ccjs-number">
    Card Number
    <input name="card-number" class="ccjs-number" placeholder="•••• •••• •••• ••••"/>

The above is in a Lightning component displayed from a VF page using Lightning out and the includeLightning tag.

Now, when I include the JS Static resource I get the following error:

This page has an error. You might just need to refresh it. [NoErrorObjectAvailable] Script error.

The EXACT same code on a straight VF page works fine.

The creditcard.js uses IIFE javascript code..

Using a differentt JS file I do not seem to get the Cross Site error but I get:

Uncaught TypeError: Cannot set property 'payform' of undefined throws at /resource/ xxxxxx /js/payform.min.js:3:278

Basically Locker is a blocker....

Now, the weird part is, when the lightning component is loaded within the Lightning experience it works fine......

Does anyone know how to resolve this?

What is this Error Object it speaks of.....

Am I just going to have to find something else....

An additional item is that when locker service is enabled it is impossible to use External JS due to: https://success.salesforce.com/issues_view?id=a1p3A00000189YMQAY

  • How are you loading credicard,js? Under Locker each namespace gets its own virtual global context and this often requires a simple change to adjust to. The CORS issue is being worked - you should be able to add a CORS whitelist entry in Setuo to allow the browser to make that cross domain XHR call required by Locker as a workaround. – Doug Chasman Jan 12 '17 at 12:56
  • @DougChasman I was using a regular ltgn:require to the static resource. Had to turn locker off since linked article said no workaround. I will try CORS today and see thanks. Since this will be a managed package this will cause us to not be able to release until it is fixed though. Bummer. – Eric Jan 12 '17 at 13:28
  • Provided the workaround to manually add the CORS whitelist entry works you could (judgement call on your part I know) add that as a manual install step for your customers. – Doug Chasman Jan 12 '17 at 14:41
  • @DougChasman - CORS did not work...."No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.". I am also getting a different error once locker is enabled with a different script I used to replace the first one. "Uncaught TypeError: Cannot set property 'payform' of undefined throws at /resource/xxxxxx" - Everything works with locker disabled.....Should I start a new question for you? I have updated this one – Eric Jan 12 '17 at 15:07
  • @DougChasman - updated with more detailed information on second issue here: salesforce.stackexchange.com/questions/155702/… – Eric Jan 12 '17 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.