BrainTree.js with AngularJS and customVariables

Question

I am using the BrainTree.js for PCI compliance, and the tutorial I am using here:

https://www.braintreepayments.com/docs/javascript

There recommendation is to call the form by the ID like so:

var braintree = Braintree.create("YourClientSideEncryptionKey");
braintree.onSubmitEncryptForm('braintree-payment-form');

I'm using AngularJS with the form being inside a controller. So inputs such as name, card, etc are tied to a scope using ng-model:

<div class="form-group">
  <label>Card Number</label>
  <input type="text" class="form-control" name="number" ng-model="card.number" />
</div>

My question is how can I submit a form using AngularJS and BrainTree.js in a manner that uses the data collected using ng-model?

Example:

braintree.onSubmitEncryptForm({name: $scope.card.name, card: $scope.card.number});

Answer 1

In Braintree, the braintree.onSubmitEncryptForm function wraps a small amount of functionality. Basically it just grabs the jQuery form representing the input data, transforms the form fields, and then scrubs them from the DOM, before allowing the request to be submitted to the server.

Since angular includes jQuery, you could call the braintree.encryptForm($('#braintree-payment-form')); which would return the encrypted data in the DOM. You should be able to access the 'ccv' and 'number' input elements like normal (the expire doesn't need to be encrypted).

month=55&year=5555&number=%24bt4%7Cjavascript_1_3_10%24ne0ib
vLjzzck52xzNiY2C8grXaZgpwfVpGrsR9TbHLPaW983e3y7R6tClw8YxYe5w
MA9%2BNHLjPBb%2FEsJQBSiCARJK7Wlxu53GO6mHMr0QMglQEiy9%2B9Dla8
DkY0XBpyfomqniwsDEuudiX7l%2FIb%2FsS4BRFu1BS8MpNpYWSghdj%2FTR
28jhRxlBNZVLjlG9cJd%2FNwDIRUv80qX4Di38bjrvywZR3nP%2BsEcUDSZj
DYQb08LDtN6Vhg5%2FTt1ketZqQH83XheDAFeTuGnb6iE1n8cZbePio8%2FC
m071d2zDZiSc57m%2BEnMJERc%2F2NYrWERl32o4L6DlltB9veZH30mKsPkB
Q%3D%3D%24qpTMCwpQQ5aEk3QO60yu8dQ1SBh3ezit564s1gK604tyIHh%2F
XqipKWgPCli2ZtFW%24AUph2EeuSMh2e8CxNRGVfsIRLvegNAulBDdDY3kwl
GA%3D&cvv=%24bt4%7Cjavascript_1_3_10%24e%2FWsFiRYkHsV%2B6RD5
j26KwII3ErBklZjXB2o1SKGtg1GvemW9J5cSQNBu3K%2BAy0uymAu5awICVR
pIB7%2FiIPBkC8vHBhX57oJabKkCyqkm6YWKio5Pce%2BasD1q4RzGFT1y1Q
iqw%2Fmt12ovQz6G%2B6yZbqQ0wUtFPt4vMSnmQIBogNtgiXeHbirSDHrY9N
V7hoBIaQ%2FV4up87AXs%2FL36FKuBF1rtTyhh%2BEEDgvqkKuRfr6Sim2zc
JNEvcsi7mJp4y6F1%2BNUiLao3w8RfTKt%2BUJUU1XHz3sWLeb2A1chamnFY
UjdVyEgrRFpGH9%2BLdrNYghpmibM6xRsO9p%2Bi1a8yYOMsg%3D%3D%24sd
IGDgI6Jo3zru4YEXtvYI37Oesw09HBISdpcCh6dho%3D%24s8SaRheCM6kWV
OQQ3Ae%2FJjVQQpw6Hht0BWrVIGpV1u4%3D

And then POST to your create_transaction method (if you're running from the tutorial).