Display only last 4 digits by using javascript

[ppbb123]

Hi,

I have a field of credit card information. How to display only last 4 digits of that field in results page or details page :?: Thank you.

[HongTaiLang]

1. For Results page

Please try to insert the code inside a HTML Block section of the Results page of the DataPage using the Caspio Bridge DataPage Wizard. Remember to change "FieldName" in the script to the appropriate field name

<script language="JavaScript">
var str = "[@field:FieldName]";
var n = str.replace(/.(?=.{4})/g, 'x');
document.write(n);
</script>

2. For Details Page

Please try to insert the code inside the HTML Block section under the Credit Card field of the Details page. Remember to change "FieldName" in the script to the appropriate field name.

"getElementsByTagName('tr')[2].cells;" means the field is the third field in Details page. If the field is the fisrt one, please change it to "getElementsByTagName('tr')[0].cells;" ...

<div id="html_bl"></div>
<script>
var str= '[@field:FieldName]';
var x=document.getElementById('html_bl').parentNode.parentNode.parentNode.getElementsByTagName('tr')[2].cells;
var n = str.replace(/.(?=.{4})/g, 'x');
x[1].innerHTML = n;
</script>

[webmaestro]

I don't think this is very helpful... There's a glaring hole in this logic. The actual Credit Card number is still in the source.

 

After following your logic, here is my HTML Block:

<script language="JavaScript">
var str = "[@field:card_number]";
var n = str.replace(/.(?=.{4})/g, 'x');
document.write(n);
</script>

and here is what's output by the DataPage:

<td colspan="2">
<script language="JavaScript">
var str="1234567812345678"; //VERY BAD: Credit Card # *unencrypted* in source!
var n = str.replace(/.(?=.{4})/g, 'x');
document.write(n);
</script>xxxxxxxxxxxx5678 <!-- credit card # 'encrypted' in display -->
</td>

It's pretty important that the Credit Card number *not* be in the HTML or JavaScript output.

 

What would be better would be something on the *SERVER* end via some 'Formatting' option on the Search and Report Wizard - Configure Details Page Fields 'Standard' or 'Advanced' tab, so that the output becomes something along these lines:

 

[@field:card_number.replace(/.(?=.{4})/g, 'x')]

 

Even better, would be to *store* the credit card information in an ENCRYPTED format. [EDIT] Even better would be not to store the CC info at all... [/EDIT]

 

Here's an interesting post covering this:

 

http://www.perlmonks.org/?node_id=74488

[cheonsa]

Hello, 

Sharing with you my solution to display only the last 4 digits of the credit card information in Details Page. Paste this in the Footer:

<script>

var account = document.getElementById('EditRecordCCNumber');

account.value = new Array(account.value.length-3).join('x') + 
account.value.substr(account.value.length-4, 4);

</script>

Replace CCNumber in EditRecordCCNumber depending on the correct field name in the Table. 

[NailDyanC]

Just to add, you may also consider this workaround:

If you want to show the value in report page, add HTML Block and use the code below in source:

<div id="sn[@field:Id]"></div>

<script>

var ssn = '[@field:CCField]';

document.getElementById('sn[@field:Id]').innerHTML= "*****" + ssn.substr(ssn.length - 4);

</script>

"[@field:Id]" needs to be replaced with the field which is holding unique identifier and [@field:Field] with appropriate field.

Also, if you want to show the value in details page then you can add a virtual field (here we have Virtual1) and use the code below to the footer:

<script>

var ssn = '[@field:CCField]';

document.getElementById('cbParamVirtual1').value= "*****" + ssn.substr(ssn.length - 4);

</script>

Moreover, if you want this field to be editable you can add a Virtual Checkbox , update CC, and set a Rule to hide Virtual 1 if Virtual 2 is checked and hide CCField if Virtual2 is not checked. This way you can see the whole value and update.

And you may also use the code below for Single Record Update DataPage and put the code inside the footer:

<script>

var ssn = document.getElementById('EditRecordCCNumber');

 

ssn.value = new Array(ssn.value.length-3).join('x') +

ssn.value.substr(ssn.value.length-4, 4);

 

</script>

 The last four number of the credit card will only be shown and numbers before it will be masks after you click the update button (this is using Single Record Update DataPage):

[NailDyanC]

Just want to add, you may check this link for other workaround: