braintree use test credit card for 3D secure transaction

Question

am trying to implement 3D secure payment in braintree sandbox but getting this error and unable to figure out what is wrong with code .

Is it possible to make 3D secure transaction using test credit card.

How to show error if response have some error

lookup response :

{"paymentMethod":{"type":"CreditCard","nonce":"5b721a96-8db5-07ba-55b1-d6546239d2b9","description":"ending in 11","isLocked":false,"securityQuestions":["cvv"],"details":{"cardType":"MasterCard","lastTwo":"11","lastFour":"0011"},"threeDSecureInfo":{"liabilityShifted":false,"liabilityShiftPossible":false,"status":"authentication_unavailable","enrolled":"U"},"consumed":false,"default":false,"hasSubscription":false,"binData":{"prepaid":"Unknown","healthcare":"Unknown","debit":"Unknown","durbinRegulated":"Unknown","commercial":"Unknown","payroll":"Unknown","issuingBank":"Unknown","countryOfIssuance":"Unknown","productId":"Unknown"}},"threeDSecureInfo":{"liabilityShifted":false,"liabilityShiftPossible":false},"lookup":{"acsUrl":null,"md":"tf6v87wpjpwtdydgbm","termUrl":"https://api.sandbox.braintreegateway.com:443/merchants/jd8k25qkwvyhngp2/client_api/v1/payment_methods/5b721a96-8db5-07ba-55b1-d6546239d2b9/three_d_secure/authenticate?authorization_fingerprint=15ed71ef406740a812f5e8ccca7302f2ffebd7ded88685faaadd287ef2b118e1%7Ccreated_at%3D2018-06-09T18%3A03%3A23.177132032%2B0000%26customer_id%3Dcustomer_4%26merchant_id%3Djd8k25qkwvyhngp2%26public_key%3Dzm5kmgjkx2hbyn3r\u0026authorization_fingerprint_64=MTVlZDcxZWY0MDY3NDBhODEyZjVlOGNjY2E3MzAyZjJmZmViZDdkZWQ4ODY4NWZhYWFkZDI4N2VmMmIxMThlMXxjcmVhdGVkX2F0PTIwMTgtMDYtMDlUMTg6MDM6MjMuMTc3MTMyMDMyKzAwMDAmY3VzdG9tZXJfaWQ9Y3VzdG9tZXJfNCZtZXJjaGFudF9pZD1qZDhrMjVxa3d2eWhuZ3AyJnB1YmxpY19rZXk9em01a21namt4MmhieW4zcg%3D%3D","pareq":null}}

My code:

<script src="{{ URL::asset('theme/js/jquery.min.js') }}"></script>    
<script src="https://js.braintreegateway.com/web/3.34.0/js/client.min.js"></script>    
<!-- Load the 3D Secure component. -->
<script src="https://js.braintreegateway.com/web/3.34.0/js/three-d-secure.min.js"></script>    
<script type="text/javascript">
        function showCardDetail(id){
    $('#card-detail').hide();
    if(id==3){
      $('#card-detail').show();
          }
     }
       $("#paymentForm").submit(function(e) {
         var paymentMethod = $("input[name='payment_method']:checked").val();
         if(paymentMethod==3){
           var holderName = $('#holderName').val();
        var holderCreditCardNumber = $('#holderCreditCardNumber').val();
        var customer_credit_card_expiration_date = $('#customer_credit_card_expiration_date').val();
        var customer_credit_card_cvv = $('#customer_credit_card_cvv').val();
         $.get( "{{ route('ajaxGenerateNonce')}}",{ 
        holderName:holderName, 
        holderCreditCardNumber:holderCreditCardNumber, 
customer_credit_card_expiration_date:customer_credit_card_expiration_date, 
        customer_credit_card_cvv:customer_credit_card_cvv}, function(data) {

        console.log(data.clientToken);
        console.log(data.nonce);
        braintree.client.create({
          // Use the generated client token to instantiate the Braintree client.
          authorization: data.clientToken
        }, function (clientErr, clientInstance) {
          if (clientErr) {
            return;
          }
          braintree.threeDSecure.create({
            client: clientInstance
          }, function (threeDSecureErr, threeDSecureInstance) {
            if (threeDSecureErr) {
              return;
            }
            verifyCard(threeDSecureInstance,data );
          });
        });         
      });
        e.preventDefault();
      }  
    })
function verifyCard(threeDSecure, data){
var my3DSContainer = document.createElement('div');  
        threeDSecure.verifyCard({amount: '500.00',nonce: data.nonce,
          addFrame: function (err, iframe) {
            my3DSContainer.appendChild(iframe);
            document.body.appendChild(my3DSContainer);
          },
          removeFrame: function () {
            // Remove UI that you added in addFrame.
            document.body.removeChild(my3DSContainer);
          }
        }, function (err, response) {
            console.log(response);
              // Send response.nonce to use in your transaction
        });
    }
    </script>

Answer 1

Based on the lookup response you provided, it doesn't look like you're using the 3D Secure-specific test cards. I recommend using this Cardinal Consumer Authentication Test Cases Guide for testing 3D Secure in the sandbox environment.

To show errors when they occur, I recommend logging them to your console. Currently, you have your code set to return if an error occurs at any level. You can update it to log the error with something like this:

if (clientErr) {
  console.error(clientErr);
  return;
}

You can do this for each instance of the errors you've included, such as threeDSecureErr. If you continue to have problems, feel free to reach out to Support at [email protected].