[Non Repo Related Question] MidtransNew3ds.getCardToken "onFailure" JS callback function not triggered properly, when card input is not in valid luhn-algo format

[sanjayrathod141]

Payment_Test.mp4

Hi,

Not working callback onFailure function. when the user enters the wrong card details then will not call this function. So I can manage to fail cases and not display error msg on screens.

PFA

[

----------------------Code--------------------------------------

<title>Checkout</title> <script id="midtrans-script" type="text/javascript" src="https://api.midtrans.com/v2/assets/js/midtrans-new-3ds.min.js" data-environment="sandbox" data-client-key="SB-Mid-client-ai9O6FCDRwbMVy-b"></script> <script type="text/javascript"> // card data from customer input, for example var cardData = { "card_number": 4811111111111114, "card_exp_month": 02, "card_exp_year": 2021, "card_cvv": 123, }; // callback functions var options = { onSuccess: function(response){ // Success to get card token_id, implement as you wish here console.log('Success to get card token_id, response:', response); var token_id = response.token_id; console.log('This is the card token_id:', token_id); // Implement sending the token_id to backend to proceed to next step }, onFailure: function(response){ // Fail to get card token_id, implement as you wish here console.log('Fail to get card token_id, response:', response); // you may want to implement displaying failure message to customer. // Also record the error message to your log, so you can review // what causing failure on this transaction. } }; // trigger `getCardToken` function MidtransNew3ds.getCardToken(cardData, options); </script>

[rizdaprasetya]

hi @sanjayrathod141 thanks for reaching out, looks like the issue seems valid, the onFailure function seems to behave not as expected.

We'll have to check with our internal team to check & fix this. We'll let you know when it solved. Thanks!
Note: This seems to be issue on sandbox env only, production env should be fine.

[rizdaprasetya]

Update for this case,

Issue

The issue seems to be identified on scenario:

• When the card input is in invalid format according to luhn algorithm, during calling MidtransNew3ds.getCardToken JS function, the API will unexpectedly response with 400 HTTP status code. Which will fail to be properly parsed by Browser/JS as AJAX callback.

Our team will further investigate on this.

Workaround

In order to prevent this, there is a workaround. Before passing the card.card_number input param, the value can be validated first using this implementation for example:

• https://learnersbucket.com/examples/javascript/credit-card-validation-in-javascript/

Then, only proceed to call MidtransNew3ds.getCardToken when the validation result is valid. If the card_number is not valid card, you can proceed to show validation error to the customer/user instead.

[rizdaprasetya]

Update: confirmed to be issue on our side, and our team is working to fix it. Will inform you for further updates. Thanks.

[rizdaprasetya]

hi @sanjayrathod141 we'd like to give you update. The issue has been resolved as per today. The onFailure callback should behave as expected now. You can try again and let us know if you still have any issue. Thanks!