How to mask SEPA (IBAN and BIC) information correctly? - payment

Question

I'm currently developing a payment system where users can use SEPA-debit to pay for the service. The user has the ability to enter the data once and can then select the same payment method when making another payment in the future.
So in order for the user to select the proper account to debit, I need to show some information about her/his accounts. In the world of credit cards it is normal to mask all but the last 4 digits of the card number, e.g. XXXX-XXXX-XXXX-1234
Should I also hide all but the last 4 digits when displaying IBAN numbers? And should I do the same for the BIC, or is it safe to display the complete BIC number?

Answer 1

The IBAN and BIC don't need masking in my opinion. The only information the BIC is providing is in which bank the specific account belongs. There are plenty of lists on the internet with the BIC codes for each bank.
As for the IBAN, you could mask it if this information is shown to 3rd parties for privacy purposes (same reason why you would maybe want to hide the full name of a person and display only e.g. John S. instead of John Smith), but even if somebody steals your IBAN he can do nothing with it without your confirmation. If you give your confirmation, he could do a direct debit, but normally your bank notifies you in advance and you can refuse it. So there are limited opportunities for fraud.
Also I am aware of some mobile apps for banks that allow you to connect the contacts of your phone to the app and you get to see their bank account (in case you want to make them a payment)
I hope this answers your question.

Answer 2

Use can use the mask jquery library via this link ,
Then use one of these functions depends on your situation,
If the text field is staticall created :
$(document).ready(function(){
$('#rib').mask('SS00 0000 0000 0000 0000 00', {
placeholder: '____ ____ ____ ____ ____ __'
});
});
#rib{
height: 35px;
border: 2px solid #CECECE;
width: 300px;
text-indent: 10px;
border-radius: 3px;
}
#rib:focus{
border-color: black;
outline: none
}
<input id="rib" name="rib" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
If the text field is dynamically created :
$(document).on('focus', '#field', function () {
$(this).mask('SS00 0000 0000 0000 0000 00', {
placeholder: '____ ____ ____ ____ ____ __'
});
});