Mosess Blog
Create a Function with Javascript to Mask Card Details.

Create a Function with Javascript to Mask Card Details.

Moses Adebayo's photo
Moses Adebayo
·

5 min read

Hi everyone, so here's a quick blog post to show how I achieved this.

In this digital world, where snooping is at a high rate, people's financial information is at risk every second, and as a software engineer, you are always claiming to proffer solutions so we'll be providing one in a bit.

So basically, the task was to "Create a function that could mask out the numbers on a debit card and leave the last four digits open.

the OG here is the splice() method in javascript.

STEPS:

i spinned up a quick boilerplate with vite.
invoked the npm init vite command and then went ahead to select the vanilla starter, nothing too overkill, it's just a simple task.

cleared unnecessary files and got into code. My HTML code is below:

<div class="debit-card">

      <img src="/visa.png" class="visa" />

      <img src="/chip.png" class="chip" />
        <h2 id="card">1234 9000 9012 9011</h2>
      </h2>
      <div class="info">
        <div class="valid">
          <span class="title"
            >valid<br/>from</span>
          <span class="detail">03/23</span>
        </div>
        <div class="expire">
          <span class="title"
            >expires<br/>end</span>
          <span class="detail">03/23</span>
        </div>
      </div>
    </div>

So basically, that was the backbone, now let's get to styling the UI.

:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "Arial", sans-serif;
  background-size: cover;
  background-color: #242424;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.debit-card {
  width: 630px;
  height: 395px;
  padding: 50px 50px 40px;
  background: linear-gradient(
    111.46deg,
    rgba(180, 180, 180, 0.5) 0%,
    rgba(153, 153, 153, 0.15) 100%
  );
  border: 2px solid rgba(224, 224, 224, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.debit-card .bank {
  width: 235px;
  position: absolute;
  top: 30px;
  right: 30px;
}

.debit-card .visa {
  width: 135px;
  position: absolute;
  bottom: 40px;
  right: 30px;
}

.debit-card .chip {
  width: 70px;
  margin-bottom: 20px;
}

.debit-card h2 {
  color: #e0e0e0;
  font-size: 30px;
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 30px;
}

.info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  width: 60%;
}

.info .title {
  display: inline-block;
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  margin-right: 5px;
}

.info .detail {
  color: #e0e0e0;
  font-size: 25px;
  font-weight: 400;
  text-transform: capitalize;
}

.info .expire {
  text-align: auto;
}
.info .valid {
  text-align: auto;
}

Not much you see, now, that got the UI in place, I believe this code up there is self-explanatory to every dev reading this.

Now, this is where we write the function that handles the masking.

This code is not much but I'll explain it bit by bit.

// function maskCreditCard(cardNumber) {
//  const n = cardNumber.length;

  // splice the last four characters
  const lastFour = cardNumber.slice(-4);
  const remaining = cardNumber.slice(0, n - 4);

  // mask the remaining numbers with asterisks
  const masked = "*".repeat(remaining.length) + lastFour;

  return masked;
}

// this to get the elementId that was created earlier in the HTML above to apply the function to.
const creditCardNumberElement = document.getElementById("card");
const creditCardNumber = creditCardNumberElement.textContent;
const maskedNumber = maskCreditCard(creditCardNumber);
creditCardNumberElement.textContent = maskedNumber;

From the code snippet above, i used a JavaScript function that obfuscated the credit card number by replacing all digits except the last four with asterisks. I could have made it get the digits from an input value, but not trying to make it overkill and i had to deliver it fast, so i made it fetch the credit card number element from the HTML, applies the obfuscation function to the element's text content, and update the text content with the obfuscated number/character which is the asterik character.

More breakdowns.

  • The function maskCreditCard accepts a single argument cardNumber,

  • representing the credit card number that needs to be obfuscated.

  • The length of the "cardNumber" string is determined using the "length" property and assigned to the "n" variable.

  • The last four characters of the cardNumber string are extracted and stored in the lastFour variable using the "slice" method with a negative index.

  • The remaining characters of the cardNumber string is extracted and stored in the remaining variable using the slice method with a starting index of 0 and an ending index of "n-4".

  • The repeat method generates a string of asterisks (*) equal to the length of the "remaining" string, and then the lastFour string is appended to the end of it to create the obfuscated credit card number. The final result is stored in the "masked" variable.

  • The function returns the masked string as its output.

  • The getElementById method is used to fetch the credit card number element from the HTML, and its text content is stored in the creditCardNumber variable.

  • The maskCreditCard function is called with creditCardNumber as its argument, and the output is stored in the "maskedNumber" variable.

  • The textContent property is used to update the credit card number element with the `maskedNumber`

To the OG, the slice method:

i used the slice method to extract a portion of the cardNumber string. The first slice call extracts the last four characters of the cardNumber string and stores it in the lastFour variable.

The logic for the slice method is quite simple.

string.slice(start, end)

where start is the starting index (inclusive) and end is the ending index (exclusive) of the substring to be extracted.

In this case, the negative value of "-4" is used as the "start" index, which means that the method starts counting from the end of the string and extracts the last four characters. This is a shorthand way of extracting the last four characters of a string with JavaScript.

The second "slice" call extracts the remaining characters of the cardNumber string, which are all but the last four characters. It starts at the beginning of the string (index 0) and ends at the "n-4" index (exclusive). The "n-4" index value ensures that the last four characters are excluded from the "remaining" string.

Overall, this code presents a not-so-effective technique but a wise way to conceal financial infos like credit card numbers on a website, enhancing security.

Then we have this:

If you wish to read through the code, check the link to the repository here:

https://github.com/adebayo-moses/maskcard

So that's all everyone, until the next one. stay cooking.👨🏾‍🍳

Cover Image Credit: https://www.behance.net/gallery/6152617/Robbers/modules/47931405

JavaScriptSecurityFrontend DevelopmentHTML CSS JAVASCRIPTMaskCard