Unable to find form with id: "credit-card-form" - braintree

Question

I'm trying to use Braintree in my GWT Application.
At the moment I'm loading a form first and get the client token from my server as the user hits this OK button.
This is how I setup braintree:
private static native void setup(String domId, String serverToken) /*-{
braintree.setup(
serverToken,
"custom",
{
id: domId
});
}-*/;
This is the work done in my view:
private final static String CREDIT_CARD_FORM_ID = "credit-card-form";
#Inject
PaymentMethodInfoView(Binder uiBinder) {
this.initWidget(uiBinder.createAndBindUi(this));
this.formCreditCard.getElement().setId(CREDIT_CARD_FORM_ID);
}
#Override
public void setupBraintree(String serverToken) {
BraintreeClient.setupForm(CREDIT_CARD_FORM_ID, serverToken);
}
Here setupBraintree() is called after the user has entered the credit card data and has clicked okay. As you can see I'm setting the id attribute in the constructor of the view.
Still, for some reason I am getting:
Uncaught Error: Unable to find form with id: "credit-card-form"
Any idea what the issue is?
This is my current Braintree client wrapper. I make sure that the static function load() is getting called in my web application bootstrapper.
public class BraintreeClient {
private final static Logger LOGGER = Logger.getLogger(BraintreeClient.class.getName());
private final static String BRAINTREE_JS_URL = "https://js.braintreegateway.com/js/braintree-2.27.0.min.js";
private static JavaScriptObject braintreeJs;
public static void load(OnSuccessCallback<Void> success, OnFailureCallback failure) {
if(braintreeJs == null) {
LOGGER.fine("Loading " + BRAINTREE_JS_URL);
braintreeJs = ScriptInjector.fromUrl(BRAINTREE_JS_URL).setCallback(
new Callback<Void, Exception>() {
#Override
public void onFailure(Exception caught) {
failure.onFailure(caught);
braintreeJs = null;
}
#Override
public void onSuccess(Void result) {
success.onSuccess(result);
}
}).inject();
}
}
public static void setupForm(String domId, String serverToken) {
if(braintreeJs == null) {
throw new RuntimeException("Braintree has not been loaded. Did you call BraintreeClient.load()?");
}
LOGGER.fine("Setting up form " + domId);
setup(domId, serverToken);
}
private static native void setup(String domId, String serverToken) /*-{
braintree.setup(
serverToken,
"custom",
{
id: domId
});
}-*/;
}

Answer 1

It was just a guess but changing
private static native void setup(String domId, String serverToken) /*-{
braintree.setup(
serverToken,
"custom",
{
id: domId
});
}-*/;
to
private static native void setup(String domId, String serverToken) /*-{
braintree.setup(
serverToken,
"custom",
{
container: domId
});
}-*/;
seemed to be the trick here although I've seen an example in the documentation that used id like I did.