Braintree client side with Java JSF?

[edited after comments by @Kukeltje]

I use JSF as a frontend framework. My goal is to set up the client side of braintree, as explained here.

In the tutorial by Braintree, this piece of code sends a client token with a post request:

<form id="checkout" method="post" action="/checkout">
  <div id="payment-form"></div>
  <input type="submit" value="Pay $10">
</form>

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
var clientToken = "xxxxxx";

braintree.setup(clientToken, "dropin", {
  container: "payment-form"
});
</script>

I suspect that in the code above, the script generates parameters or a payload and attaches them to the post request, but I could be completely wrong. I have this code running and it works fine.

My question: how can I adapt the post request so that it would be replaced by the use of a bean, something like:

<h:form id="checkout">
    <h:CommandButton value="5€" actionListener="#{bean.submitToken()}"/>
</form>

The reason I would prefer JSF instead of pure html is that it makes easier the integration with the rest of my page, which already contains a <h:form>.

Note: thanks to the Braintree contributor for the answer. I actually solved the issue by using a Primefaces <p:remoteCommand>, see this question and @BalusC answer.

Solution

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

Your question might be focused just on the JSF/Primefaces community, but I can answer the Braintree part. In many cases, including the onPaymentMethodReceived callback is a good way to handle any framework specific concerns. You can write a custom javascript callback to trigger whatever behavior you need while using the framework-specific code generation tools (like the action you specified). To do this, just specify it in your Braintree drop-in setup:

braintree.setup("CLIENT-TOKEN-FROM-SERVER", "dropin", {
  container: "dropin-container",
  onPaymentMethodReceived: function (obj) {
    // Do some logic in here.
    // When you're ready to submit the form:
    myForm.submit();
  }
});

Again, I'm not familiar with the specifics of JSF/Primefaces, but the Drop-in is really flexible when you start using callbacks.