BrainTree.js with AngularJS and customVariables
I am using BrainTree.js for PCI Compliance and the tutorial I am using here:
https://www.braintreepayments.com/docs/javascript
Here it is recommended to call the form by ID like this:
var braintree = Braintree.create("YourClientSideEncryptionKey");
braintree.onSubmitEncryptForm('braintree-payment-form');
I am using AngularJS with a form inside a controller. Therefore, inputs such as name, map, etc. are bound to the area using the 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 way that uses the data collected using the ng model?
Example:
braintree.onSubmitEncryptForm({name: $scope.card.name, card: $scope.card.number});
source to share
In Braintree, a function braintree.onSubmitEncryptForm
wraps a little functionality. Basically it just grabs the jQuery form representing the input, transforms the form fields, and then scrapes them from the DOM before allowing the request to be submitted to the server.
Since angular includes jQuery, you can invoke braintree.encryptForm($('#braintree-payment-form'));
that will return the encrypted data to the DOM. You should be able to access the "ccv" and "number" input elements as usual (the expiration should not 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 method create_transaction
(if you are using it from the tutorial).
source to share