Credit Card Encryption with AngularJS in Braintree

Question

I use Braintree for a payment gateway and I have a problem.
I am sending credit card information with other user details.

For security reasons, credit card information must be encrypted and executed by Braintree, including the following:

braintree.onSubmitEncryptForm('braintree-payment-form'); 

This works fine until I use pure javascript (AngularJS) in the interface, and I see that the data is not encrypted when sent to the server,
Here is the code:

 <form name="paymentForm" ng-submit="submitUser(userDetails)" method="post" id="braintree-payment-form"> <p> <label style="color:white">Name</label> <input type="text" ng-model="userDetails.userName" name="userName" size="20" /> </p> <p> <label style="color:white">Email</label> <input type="text" ng-model="userDetails.email" name="email" size="20"/> </p> <p> <label style="color:white">Company</label> <input type="text" ng-model="userDetails.company" name="company" size="20" /> </p> <label style="color:white">Card Number</label> <input type="text" size="20" ng-model="userDetails.number" autocomplete="off" data-encrypted-name="number" /> </p> <p> <label style="color:white">CVV</label> <input type="text" size="4" ng-model="userDetails.cvv" autocomplete="off" data-encrypted-name="cvv" /> </p> <p> <label style="color:white">Expiration (MM/YYYY)</label> <input type="text" size="2" ng-model="userDetails.month" data-encrypted-name="month" /> / <input type="text" size="4" ng-model="userDetails.year" data-encrypted-name="year" /> </p> <input type="submit" id="submit" /> 

In the submit form, I submit the data to the server.

 $scope.submitUser = function(userDetails){ $http({ url: '/createtransaction', method: 'POST', data: JSON.stringify(userDetails), headers: {'Content-Type': 'application/json'} }).success(function (data, status, headers, config) { // success }).error(function (data, status, headers, config) { //error }); } 

Is there a way to encrypt card data?

Answer 1

Question: “Why are AJAX request data not encrypted from Braintree JS ” and the response is not related to HTTPS.

Yes, HTTPS is required to encrypt traffic in the production process - in which case it will encrypt already encrypted card data, but HTTPS is neither a question nor an answer here.

If you look at the Braintree documentation ( Example here ), you will notice that each input in the example form has added the data-encrypted-name attribute:

 <input type="text" size="20" autocomplete="off" data-encrypted-name="number" /> 

The documentation then indicates this code:

 braintree.onSubmitEncryptForm('braintree-payment-form'); 

When the form is submitted, the code in braintree.js , checks the form, looks at the plain text in each marked input , encrypts it, saves the encrypted values ​​in accordance with the data--encrypted-name attributes, and then that the encrypted data is used when the form is transmitted through HTTP / HTTPS.

In the above code example, AngularJS OP contains data-encrypted-name attributes on some input (I don’t know if they need to be on all of them), but just marking the input is not enough, Encryption function of raw input values ​​(or, in this case , model data) should still be called, and then this encrypted model can be sent to POST back to the server.

The problem, on the other hand:

• Form creates a model
• Model sent over HTTP to the server

Fixed implementation:

• Form creates a model
• Braintree.js is called to encrypt some parts of the model.
• The encrypted model is sent via HTTP (or HTTPS during production) to the server

Here plunkr someone else showed one way to encrypt AngularJS model data on the fly:

http://plnkr.co/edit/2kF9Im?p=preview

If it were me, I would just call braintree.encrypt() in each field immediately before submitting the form, and not every keystroke - or change the directive to work on the form during submission.

Answer 2

If your html page is accessible using HTTPS, then your form will be (unless otherwise specified) HTTPS. If you want HTTPS to be used, you will need to do something on the server to disable HTTP for this particular page.