I need to store only last 4 digits of credit card

Question

I am using Braintree for payment gateway.
I have a requirement where I need to store only last 4 digits of credit card, expiry date (As per PCI Complaince).
I have implemented front-end code in javascript and on sending data to server, credit card information is encrypted.
Is there anyway I can get last four digits, expiry date and card type at backend or can I decrypt it?

<form name="paymentForm" action="/createtransaction" method="post" id="braintree-payment-form">
   <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" />

Answer 1

(Disclosure, I work for Braintree)

Since you're using client-side encryption you won't be able to get the information as it is encrypted before the transaction is created. However, once you've made the transaction, the result object will contain the first six / last four digits of the cards number and the expiration date. You can then store those values in your database.

It would look something like:

Result<Transaction> result = gateway.transaction().sale(
  ...
);
Transaction transaction = result.getTarget();
CreditCard creditCart = transaction.getCreditCard();
String last4 = creditCard.getLast4();
String expiration = creditCard.getExpirationDate();

Answer 2

Since you are using Braintree's Client-side Encryption flow, according to their documentation, you cannot access the unencrypted version of the sensitive information (i.e. credit card numbers). This is done on purpose, so that you can reduce security risks and maintain PCI compliance.

Braintree states in this post:

Once the user presses the “Submit” button on the form containing their credit card information, you use a Braintree-provided JavaScript library to encrypt sensitive fields before the form is ever posted to your server. The sensitive non-encrypted data is not included on the form that is submitted and, therefore, will never pass through your system. However, all other fields will be available to you. This means you can perform custom validations, formatting, and logging to your heart’s content without exposing yourself to the security risk and extra PCI compliance requirements of having unencrypted credit card data passing through your environment.

Also note that there is no way to decrypt the data either as you do not have access to the decryption keys.

If you want to gain access to the actual sensitive credit card data then I think you'll have to take a different approach. The Server-to-Server flow looks like your best bet. Braintree states:

S2S works in a similar fashion to accessing any API over HTTP. First, you create a form on your website where the user enters their credit card data, billing information, etc. When the user submits the form, the contents are sent to your server. Using the data you’ve received, you make an API call to Braintree using one of their client libraries, check the result and display necessary information to your user.