Integrating an external Javascript library in Vaadin 14

Flow
1

Hi,

I am trying to integrate an external javascript library in Vaadin 14.

The library uses callbacks which are defined using the script tag used to set up the library. The mastercard documentation says that the use of callbacks is optional, but you must define those you need in the body of the same script tag that references checkout.js - as follow. These are custom data attributes associated with the tag.

        <script src="https://eu-gateway.mastercard.com/checkout/version/54/checkout.js"
                data-cancel="cancelCallback">
        </script>

I have included the external library using the @Javascript annotation and the local implementation of the call back functions
How do I specify the customer data attributes in Vaadin?

MainView.java

@JavaScript("https://eu-gateway.mastercard.com/checkout/version/54/checkout.js")
@JavaScript("./src/components/mastercard.js")
....

I have set up the callback function in a local javascript file and followed another post that said to define the functions so that they are in global scope

mastercard.js


window.cancelCallback = function() {
          console.log('Payment cancelled');
}

I cannot get the callbacks to work.
I have tried creating a html file and using @HtmlImport but I don’t think that will work with Vaadin 14.

I can invoke the external library and that works fine - but I cannot get the callbacks to be invoked.

Thanks for any suggestions.
John

2

This looks okay to me. Can you open the browser console and manually invoke the function by typing cancelCallback()?

Alternatively, have you tried loading mastercard.js with @JsModule ?

3

Kaspar,

Yes I can invoke the function from the console. I think all that is set up OK.

What is missing is that I don’t know how to specify the HTML5 custom data attributes i.e data-* to the external javascript library.

<script src="https://eu-gateway.mastercard.com/checkout/version/54/checkout.js"
                data-cancel="cancelCallback">
        </script>

The documentation uses the html script tag and you can define these attributes in the tag that specifies the external library.

Is there a way to include a standard html file in Vaadin 14 so that I could use the script tag as above and simply import it somehow? The external library creates a “Checkout” object that needs to be globally accessible and the only way I have found to do that is with the @JavaScript annotation import. So all that works and I can use the Checkout object but there is no mechanism in that annotation to specify custom data attributes i.e. data-* items.

These are discussed here http://html5doctor.com/html5-custom-data-attributes/ and I tried to set/getAttribute on the Checkout javascript object but it didn’t work.

John.

4

Would creating a CustomBootstrapListener fit your use case?

https://vaadin.com/docs/v14/flow/advanced/tutorial-bootstrap.html

public class CustomBootstrapListener implements BootstrapListener {

    public void modifyBootstrapPage(BootstrapPageResponse response) {
        Document document = response.getDocument();

        Element head = document.head();

        head.append("<script src=\"https://eu-gateway.mastercard.com/checkout/version/54/checkout.js\""
            + "  data-cancel=\"cancelCallback\"> </script>");
    }

}
5

Tulio,

Thanks so much for your help - that does solve the problem for me.

Do you know if there is a way to import/include an external js library in a web component so that any variables it would define are visible within the scope of the component only.

It seems anything to do with external js libraries in Vaadin 14 must happen in global scope.

Thanks again for your help,
John.

6

Hi,

Here you’ve got an example where OpenLayers is not loaded in global scope. If you call new TileLayer in global scope it does not work.

https://github.com/jcgueriaud1/vaadin-openlayers-demo/blob/master/src/main/java/org/vaadin/jeanchristophe/OpenLayers.java