Jump to content

Display only last 4 digits by using javascript


Recommended Posts

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>
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

  • 7 years later...

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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...