Braintree-javascript - collect additional customer information?

Question

Question is:What is the correct way for collecting customer information and storing it in the vault?

I want to store customer's billing information in Braintree's vault upon filling out and submitting the drop-in ui form for the purpose of creating periodic future transactions. Future transactions will have irregular/varied amounts being charged.

Currently the drop-in ui I have configured only has a paypal button and input fields for cc # and expiration date. This is what I currently have for drop-in ui:

According to the docs , Braintree drop-in ui only allows collecting: cc#, exp date, postal code/cvv, paypal acc, and venmo acc.

I was thinking something along the lines of creating a form and collecting from input fields using jquery and feeding it to Braintree's transaction API , but not sure this is PCI/SAQ-A compliant. I also found that I can store a new customer in the vault upon a successful transaction .

Code looks like this:

<div class="container-fluid">
<div class="container">
  <form class="form-horizontal" role="form" id="checkout" method="post" action="/checkout">

    <!-- billing information -->
    <div class="container" style="width: 50%">
      <div class="form-group">
        <label class="control-label col-xs-3" for="Full Name">Full Name:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="fullname" placeholder="Full Name">
          </div>
        <br>
          <label class="control-label col-xs-3" for="Address">Address:</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="Address" placeholder="Address">
          </div>
        <br>
        zip | city
        <br>
        country
      </div>
    </div>
      <hr>
      <!-- braintree drop-in ui form-->
      <div class="text-center" id="payment-form"></div>

      <!-- TOS -->
      <div class="container">
        <h4>TOS Place holder</h4>
        This will be where the TOS goes. It's a pretty good space is it not?
        <br>
        <h4>TOS Place holder</h4>
        This will be where the TOS goes. It's a pretty good space is it not?
        <br>
        <h4>TOS Place holder</h4>
        This will be where the TOS goes. It's a pretty good space is it not?
      </div>
      <hr>
      <div class="text-center">
        <input type="submit" value="Submit Payment" class="btn btn-primary btn-lg">
      </div>
    </form>
  </div>
</div>
<!-- braintree sdk -->
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>

<!-- braintree setup -->
<script>

/*
* Uncomment when no longer in sandbox
*/
//Get client token
// $.get( "/client_token", function(clientToken) {
//   braintree.setup(clientToken, 'dropin', {
//     container: 'payment-form'
//   });
// });


var clientToken = *removed*;
braintree.setup(
    // Replace this with a client token from your server
    clientToken,
    "dropin", {
      container: "payment-form",
      form: "checkout",
    });
</script>

Any help is much appreciated! Thank you for taking the time to read.

Answer 1

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

The Braintree Drop-in UI is responsible for collecting PCI and other sensitive payment information. The approach you mentioned, collecting billing information in a form and then submitting the billing information to Braintree via API from your server (using transaction.sale or paymentMethod.create ), is the correct approach for populating this information. This approach is fully PCI compliant.

Additionally, passing the form attribute to braintree.setup is not necessary in your example because your payment-form div is within your checkout form.