Vaadin JavaScript API集成

Question

I am looking for any type of help, generic or specific, producing a Vaadin client-side Java implementation of the Braintree Payments API for the client library.

I can do all the server-side Java requirements of the Braintree protocol and also do RPC between a piece of inline JavaScript code yet it fails to use the Braintree .js API.

The client side code, all summarized in here , suggests using their "hosted fields" to which I am open as well as their Drop-In UI. Anything goes, really.

hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
    if (tokenizeErr) {
      // Handle error in Hosted Fields tokenization
      return;
    }

    // Put `payload.nonce` into the `payment-method-nonce` input, and then
    // submit the form. Alternatively, you could send the nonce to your server
    // with AJAX.
    document.querySelector('input[name="payment-method-nonce"]').value = payload.nonce;

It should also be possible to directly tokenize the credit card information which is the most crucial step for me to continue. This should be a different process to integrate in Vaadin, perhaps someone knew this way better?

How would I go about something like this?

Answer 1

The easiest and fastest way may be using a AbstractJavascriptComponent or AbstractJavasciptExtension. These are subclass-able and provide a easy way to link JS code to a component you can manipulate server side. AbstractJavascriptComponent might be the best of the two because they give you a div element that you can control completely with js without vaadin touching it. This is easier IMO because you can avoid GWT and using there connector classes.

Here are some links to get you started

https://vaadin.com/blog/-/blogs/vaadin-7-loves-javascript-components

https://vaadin.com/wiki/-/wiki/Main/Integrating%20a%20JavaScript%20library%20as%20an%20extension