Braintree Payments / Javascript Integration


Dear Vaadin community.

I realize this may be more of a general javascript component integration question, but I would love to hear if someone would like to point in the right direction on getting started on the following:


I would like to implement the JS client-side SDK of the Braintree Payments API in a Vaadin application.

With the server side API that braintree provides, it is easy to get past the step where a client-token is generated. Now, reading their documents, I understand that I need to use their javascript API client side with a generated client-token to “tokenize” the fields from which credit card information has been gathered
and then turn this into a nonce
from which the server will then process the rest.

It is all summarized here https://developers.braintreepayments.com/start/hello-client/javascript/v3

In essence, I want to get to the point where I can generate a nonce which must use the client js api that braintree provides since it goes through their servers:

document.querySelector('input[name="payment-method-nonce"]
').value = payload.nonce;

How would I go about something like this?

There’s also the possibility to directly tokenize which I might want to use. https://braintree.github.io/braintree-web/3.8.0/Client.html#request
if that would allow somebody to help me better.