Encrypted values on unsuccessful transaction

Question

I'm using Braintree.js in my .NET MVC project to encrypt the credit card details . The positive case works pretty well and the transactions are successful.

Problem is, I have some validations on the Controller and when I display the view again if there is an error, the credit card fields now contain the encrypted values. I tried setting the model properties to empty string to just clear them out but the encrypted values remain.

Anybody have an elegant solution for this? Thanks!

My html code looks something like this:

<script type="text/javascript" src="https://js.braintreegateway.com/v1/braintree.js"></script>
<script type="text/javascript">
    var braintree = Braintree.create("key");
    braintree.onSubmitEncryptForm('braintree-payment-form');
</script>

@model SubscriptionModel
<form action="@Url.Action("Subscribe", "Home")" method="POST" id="braintree-payment-form">
    <ul>
        <li>
            <div class="text">@Html.TextBoxFor(x => x.CreditInfo.CardholderName, new Dictionary<string, object> { { "data-encrypted-name", "CreditInfo.CardholderName" } })</div>
        </li>
        <li>
            <div class="text">@Html.TextBoxFor(x => x.CreditInfo.CardNumber, new Dictionary<string, object> { { "data-encrypted-name", "CreditInfo.CardNumber" } })</div>
        </li>
        <li>
            <div class="text">@Html.TextBoxFor(x => x.CreditInfo.Cvv,new Dictionary<string, object> { { "data-encrypted-name", "CreditInfo.Cvv" } })</div>
        </li>
        <li>
            <div class="text"> 
                @Html.TextBoxFor(x => x.CreditInfo.ExpirationMonth, new Dictionary<string, object> { { "data-encrypted-name", "CreditInfo.ExpirationMonth" } })<div>
                @Html.TextBoxFor(x => x.CreditInfo.ExpirationYear, new Dictionary<string, object> { { "data-encrypted-name", "CreditInfo.ExpirationYear" } })
            </div>
        </li>
    </ul>
     <button>Submit</button>
</form>

Answer 1

I managed to resolve this by replacing HTML.TextBoxFor with a regular input textbox as seen below:

<input type="text" autocomplete="off" data-encrypted-name="CreditInfo.CardholderName"/>

If you're using MVC, take note that your data-encrypted-name value must match the properties of your model so they are submitted properly on POST. The fields still get cleared after displaying the View again but this is good enough for me.