Luhn Check for Credit Cards / Other - Javascript implementation

Dear Bubblers,

I’m trying to implement a Luhn algorythm (aka Modulus 10 / Mod 10) on a card number via javascript. I’ve using Toolbox to run the javasript and watched @keith 's video on using Javascript in bubble - Using Toolbox (Run Javacript) and JavaScript to Bubble Elements in Bubble on Vimeo. I’m using a simple luhn javascript calculation from:

  1. (SimplyCalc) JavaScript Luhn-algorithm Source Code
function luhn_checksum(code) {
    var len = code.length
    var parity = len % 2
    var sum = 0
    for (var i = len-1; i >= 0; i--) {
        var d = parseInt(code.charAt(i))
        if (i % 2 == parity) { d *= 2 }
        if (d > 9) { d -= 9 }
        sum += d
    }
    return sum % 10
}

I’ve added in semi-colons after each row (per Keith’s video observation) and changed any reference of “code” to my dynamic input for the card value and added console.log(sum) to report the value back to console.

Seems simple enough. What am I doing wrong? Here is my workflow and error:

So this code is a function that takes a string (referred to as “code”) as its argument and returns a computed checksum (as a number).

But all this is is a function definition. You must use the function. You do that by calling the function with an appropriate argument. For example:

luhn_checksum('4111111111111111')

(This returns the value 0.)

You will note that I took the sample credit card number and wrapped it in single quotes to make it into a string (as expected by the function). If you send this function a number, it will not work. (Though we could easily modify the function to accept a number and just turn that number into a string internally.)

Now, another thing to note about this function (as written) is that it expects our string to be free of any whitespace. If we pass it a string that includes whitespace it will break. For example:

luhn_checksum('4111 1111 1111 1111')

returns NaN (“not a number”).

This function would be a lot easier to work with if we just make it so it accepts numbers or strings and also strips out any whitespace. We can accomplish this with just one line (line 3 below):

function luhn_checksum(code) {
  // convert argument to string and remove all whitespace:
  code = String(code).replace(/\s/g, '');
  var len = code.length;
  var parity = len % 2;
  var sum = 0;
  for (var i = len - 1; i >= 0; i--) {
    var d = parseInt(code.charAt(i));
    if (i % 2 == parity) {
      d *= 2;
    }
    if (d > 9) {
      d -= 9;
    }
    sum += d;
  }
  return sum % 10;
}

Note: I don’t actually write my own JavaScript code using the semicolon, it’s just that I’m using VS Code at the moment and I have a prettier installed that inserts that crap for me.

Anyway, now that you have this function, how do you use it?

Well, you just call the function and in that function call is where you insert your Bubble dynamic value (not in the function definition):

luhn_checksum(Construct-Your-Bubble-Dynamic-Expression-Here)

Because of the changes we made to the function, that dynamic value can either be a string (what Bubble calls a text) or a number. Looks to me like you’re using an Input set to type number, so you’re good to go.

Your final code block that you put in Run JavaScript will look something like this:

function luhn_checksum(code) {
  // convert argument to string and remove all whitespace:
  code = String(code).replace(/\s/g, '');
  var len = code.length;
  var parity = len % 2;
  var sum = 0;
  for (var i = len - 1; i >= 0; i--) {
    var d = parseInt(code.charAt(i));
    if (i % 2 == parity) {
      d *= 2;
    }
    if (d > 9) {
      d -= 9;
    }
    sum += d;
  }
  return sum % 10;
}

luhn_checksum(Input A - number's value)
1 Like

Hi Keith,

I’m always impressed with your well detailed responses and assistance. Thanks for responding.

I went over your explanation a few times and watch your video again. In your example, how did output the returned computed checksum value of “0”?

I tried console.log(code); console.log(sum); which return an error “sum is not defined” or “code is not defined”. Also tried console.log(luhn_checksum), which returns this:

Thank you,
Gilles

Hi @gilles,

To actually use this code in your Bubble project you would use Run JavaScript in conjunction with the JavaScript to Bubble element to return the value back into Bubble where you can actually use it.

This is probably most easily explained via video, so here’s a video (and, yes, I show you how to log the value to the console as well… and a few other things):

Here’s the runtime of the project I build in this example (link to editor in the page):

Best Regards,
Keith

#lockdownandlearnwithkeith

2 Likes

Hi Keith,

I always admire the effort and detail you put into replying to our questions. I really appreciate that you’ve taken 20 minutes from your busy day to put this together. This video is perfect. It’s a great example that shows non-technical bubblers the Bubble power at their finger tips in being able to implement javascript code and produce results in apps. Thanks for showing cradle to grave how to imbed my code and export it to the console / back into my app with javascript to bubble. It works perfect and would be transferable to anyone else finding code examples on a website.

The only thing that’s missing is your had fedora - does it only make an appearing in San Fran winter?

I’ll be donating to your Karma app!

Thank you,
Gilles

Hello,
I am very impressed to with his responses. I think its great how he puts so much effort and take time out of his way to help others. Also if that’s your son in your profile pic he is so adorable.

Have A Splendid Day,
Nathan (Breeze)

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.