Using custom fields for braintree's hosted fields & drop-in

Question

I wanted to know if it is possible to use a custom form for braintree payment integration. By custom i mean something like this:

<form id="payment-form" method="post" action="/checkout.php">
  <div id="customField>{$customField;}</div>
  <div id="customField2>{$customField2;}</div>
  <input type="submit" value="PAY">
</form>

<script src="https://js.braintreegateway.com/js/braintree-2.31.0.min.js"></script>
<script>
var clientToken = "";
braintree.setup("clientToken", "dropin", {
  container: "payment-form"
});
</script>

I want to post my custom fields to checkout.php but it seems the form only returns payment method nonce. I don't want to store any of these custom values in braintree's vault either. Checkout.php just adds all values together (including received payment method nonce) from previous forms in an array and passes these values to .NET server. So is there a way to pass these values to checkout.php?

Answer 1

It looks like this is certainly possible using Braintree's Custom Fields

It looks like, though, you are not properly formatting your form to populate the Drop-In, per your Braintree.setup. The container you are specifying in the braintree.setup will correlate to a div element that will in turn be the drop in, not the ID of the complete payment form.

So, if you have a form that looks like;

<form> <div id="dropin-container"></div> </form>

, you'd want your braintree.setup to look like;

braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'dropin', {container: 'dropin-container'});

in order to convert the DIV "dropin-container" into the Drop In.

Custom Fields, though, can be included in the form, but you'll want to make them simply HTML Input elements, as opposed to div elements, that will be returned to your server alongside the nonce.

Hope this helps!