Braintree payment with nodejs not working

Question

I have the following html:

<form id="payment-form" method="post" submit="/checkout">
     <input type="submit" value="Pay $10">
     <input type="hidden" name="payment_method_nonce" value="0fgg1679-75e2-43e0-bc1f-94faee177877">
     <iframe src="https://assets.braintreegateway.com/dropin/2.28.0/inline-frame.html#3a713953-3106-4fd5-8714-b0ada1723284" frameborder="0" allowtransparency="true" scrolling="no" name="braintree-dropin-frame" width="100%" height="68" id="braintree-dropin-frame" style="transition: height 210ms cubic-bezier(0.39, 0.575, 0.565, 1); border: 0px; z-index: 9999; height: 70px;"></iframe>
</form>

The html was originally only the input type=submit and the payment-form but my javascript has the following code that transforms the elements into what is seen above:

braintree.setup(BT_CLIENT_TOKEN, "dropin", {
  container: "payment-form"
});

The BT_CLIENT_TOKEN is successfully instantiated in the server side to the client side. When I open the website I can login to sandbox and see the following:

When I click "pay", however, the form is not submitted through my app.post("/checkout") on the nodejs server side but instead through the default route app.post("/") . Also, the body of the request always comes empty req.body: {} (and shouldn't as far as I know, should come with the nounce at least).

Does anyone have any idea on what is happening? Thank you very much.

Answer 1

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

I have a couple of suggestions. First, be sure to define an action attribute in your <form> .

<form id="payment-form" method="post" action="/checkout">

Second, the Braintree Drop-in requires a container element to be nested within a <form> . It is this container element that should be targeted within braintree.setup() .

HTML

<form id="payment-form" method="post" action="/checkout">
  <div id="dropin-container"></div>
</form>

JavaScript

braintree.setup('BT_CLIENT_TOKEN', 'dropin', {
  container: 'dropin-container'
});

Regarding req.body: {} , it is difficult to dig deeper without a more comprehensive look at your code and I'd prefer to avoid guessing without that context. If the suggestions above do not resolve the issue, perhaps you can edit your question and provide more code snippets to help the community examine this more closely.