Call Java method/event from Javascript function in template


My apologies for the probably basic Javascript question, but for Vaadin 10 Javascript is becoming a necessity.

How do I call a method (or trigger and event) on the Java side from within a Javascript function and pass a variable/data?


Take a look at [Event Handlers documentation]

HI Diogo,

Thanks for the link. I did already check that section and couldn’t find an answer to my use case.

Basically I have a button component that triggers a third party javascript library function, that in turn makes a call to an external service (a payment gateway in my case). Once the payment is verified, a token is returned to a javascript callback function. From this callback function I now need to trigger a Java event with the token data.

So I’m looking for a way to call the Java from within a Javascript function. I couldn’t see a way to do this in the event handlers documentation.

There is @ClientCallable which publishes a Java method in a PolymerTemplate class so it can be called as $server.methodName from JS

Hi Artur. Thanks, that looks exactly like what I need. But the feature was only introduced in beta9 or 10. I’m still on beta8 and there are spring boot dependency differences between 8 and 9. I will do the upgrade and then post my code for future reference.

It is there in earlier versions also, I think it was renamed recently from @ClientDelegate

Here’s my working code. I have two different methods of calling the server event. One using @EventHandler and a hidden button and the second using @ClientCallable

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="payment-stripe-view">

            .hiddendiv {

        <div>Stripe payments</div>
            <button id="customButton">Purchase</button>
        <button class="hiddendiv" id="doneButton" on-click="doneEvent"></button>


    <script type="text/javascript" src=""></script>

        class PaymentStripeView extends Polymer.Element {
            static get is() {
                return 'payment-stripe-view';

            afterServerUpdate() {
                var doneBtn = this.shadowRoot.querySelector('#doneButton');
                var vaadinServer = this.$server;
                var handler = StripeCheckout.configure({
                  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
                  image: '',
                  locale: 'auto',
                  token: function(token) {
                    console.log('Token: ' +;

                    // Method one using hidden element and @EventHandler
                    doneBtn.textContent =;

                    // Method two using @ClientCallback

                    // You can access the token ID with ``.
                    // Get the token ID to your server-side code for use.

                this.shadowRoot.querySelector('#customButton').addEventListener('click', function(e) {
                  // Open Checkout with further options:
                    name: '',
                    description: '2 widgets',
                    zipCode: true,
                    amount: 2000

                // Close Checkout on page navigation:
                window.addEventListener('popstate', function() {

        customElements.define(, PaymentStripeView);


and the server side

    public void doneEvent(@EventData("event.srcElement.tagName") String tag,
                          @EventData("event.srcElement.textContent") String token) {"Stripe call is completed on tag: " + tag + " with token: " + token);

    private void doneCall(String token){"Stripe call is completed with token: " + token);