Stripe Payment Integer Amount in Backend - Want to translate to pretty $USD.XX in .hbs frontend

Question

I looked around but can't get my goal result. All my Stripe Payment money values are stored as default integers and saved in the db this way. When I pull the values from the db and load them into a variable to pass to a handlebars rendered page, I can see the value without a decimal point as expected, when I keep that same form value and pass it to my pay button from Stripe, passing the integer amount to this button gets the value as expected in payment, but what can I do to format that integer on the front end to give it a pretty $USD.XX value, yet keeping the db working with integers? When I divide the amount by 100 in the route that returns these values, this converted value finds its way back into the Pay Button, and sends a lower amount when payment dialog pops up. I want to avoid this problem by intercepting the integer amount, performing format translation only for the front end to displaying the prettys. I also got a form that edits this, but I don't want my users to have to worry about needing to enter only an integer value, so hopefully a filter that responds like an atm, when you start to enter values in there, pennies first... I just can't find the easy button to this problem.

Answer 1

I got to my desired effect,

The work around I did was to create the 'placeholder' variables that will hold as a string the values of the formatted amounts ie. bal for Model.balance, quo for Model.quote, cre for Model.credit.

In the route will do the conversion: setting the temporary placeholder variable with the formatting code and passing it out to render...

           job.bal = parseFloat(Math.round(job.balance / 100)).toFixed(2).toString();
           job.cre = parseFloat(Math.round(job.credit / 100)).toFixed(2).toString();
           job.quo = parseFloat(Math.round(job.quote / 100)).toFixed(2).toString();

The returned values have these temp placeholder values with the format I'm looking for.

Note: I had to add the placeholder variables into the Model.Schema, and also into the instance that creates this schema before I was able to even populate it with the parseFloat(...)

After that I was able to view in the .hbs render the decimal'd amount values as a string, out to the view displaying these values.

When I click the Pay Now button, it its passed the original {{balance}} into the

 data-amount: {{balance}}

I use {{balance}} etc. for the backend integer amount format that Stripe likes, then use {{bal}} etc. for the front end view for the users to see their monetary values in a toFixed(2) decimal'd view.

Whether of not this is best practice, probably not, but it's a solution I found, implemented and wanted to share.