Highlights:

  • Set up coupon system for Stripe payments
  • Figured out how to debug with Flask (with debug toolbar, console messages, etc.)
  • Used AJAX to check if coupon exists, then applies coupon
  • Linked successful payment route to a confirmation page
  • Resolved a number of formatting issues.

Issues I faced:

  • Issue: I didn’t know how to debug in my Flask environment. I’m no longer working in a typical Python environment (I’m not using Jupyter Notebook here.) For example, when I made print statements, I wasn’t sure where I could see them. Do I get the messages in the terminal? In the Safari Inspector tool console?
  • Solution: I found online that you can install a flask debugger toolbar – the flask_debugtoolbar. You have to pip install it and import it in the python code. You also have to do some command line prompts. See the docs here: https://flask-debugtoolbar.readthedocs.io/en/latest/ 
  • In the pic below, you can see I got a debugging toolbar on the right side of the browser. Some of the messages go towards the Logging section. You can also see your GET / POST data in the Request Var section.
  • Question: When a customer subscribes via Stripe, can I check if they are an existing customer? Check if they are already subscribed to me? 
  • Answer: Probably. We get the email address they type in. We can check that against our database.
  • Question: If an existing customer accidentally pays again, can I cancel their payment?
  • Answer: Maybe just refund them?
  • Question: What data do I need to initially save in my database?
  • Answer: Maybe start with their email address, name, date/time of payment, source?
  • Issue: How do I add a coupon functionality to the Stripe Checkout widget? 
  • Solution: There’s no capability for Stripe Checkout. One option, which I’ll pursue in the next version, is to use a separate page and lay out Stripe Elements, where you can control the layout of the payment form. The quicker solution here is to ask for coupon details outside of the payment widget, then apply that to the final price paid.
  • Issue: There are a couple of different environments / packages I have to work across: HTML, Javascript / jQuery, AJAX, Python, Flask. It’s taking a long time to learn how each one works.
  • Solution: This we’ll just have to slog through.
  • Issue: I was getting a bad routing page. I couldn’t figure out why for the longest time. 
  • Solution: I realized I forgot to put action = ‘/applyCoupon’ to my form <form enctype=”multipart/form-data” id=”form_coupon”, action=’applyCoupon’ method=”POST”>
  • Solution (update): This is not the right solution. My HTML code should not have any routing action, because this was being taken care of by my AJAX code. 
  • Issue: Even though I took out the action = ‘/applyCoupon from the <form> tag, I am still getting the bad routing page. 
  • Solution: Since my routing is being done by AJAX, I also have to update my <button> element. I need to change the attribute type = ‘submit’ to type = ‘button’. I suppose type=‘submit’ makes a GET/POST request.
Received a 405 error when I clicked the ‘Apply coupon’ button. Apparently my Flask routing was wrong somewhere…
applyCoupon.js. This AJAX code is routing to the /applyCoupon route. Thus, my other HTML code doesn’t need to.
index.html. Here I don’t need to add the action attribute in the <form> tag. I also need to change my <button> type to ‘button’, not ‘submit’.
  • Issue: I realized my jQuery / AJAX code wasn’t even being used.
  • Solved: Strangely, I had to move all of my <script> for .js files to outside of the <head> and <body> tags. When I moved them after the <body> tag, then my webpage started working again.
applyCoupon.js – my latest version of the file has all of the code commented out…
Yet, my browser console shows that the same code is not commented out. This looks like an older version of my code.
Sure enough, on the right toolbar I can see that this applyCoupon.js loaded is a bit older. The date here is Mon, 21 Jan 2019 14:15:58 GMT. My latest file was saved a few minutes after that. So this confirms that this is my old file. Solution? Just a hard refresh of the browser. Bonus: You can see that this file expires on Tue, 22 Jan 2019 02:15:58 GMT. I suppose that’s when the browser will call for a new updated version of this file?
  • Issue: After a coupon is successfully applied, I can’t change the charge amount on the Stripe Checkout button using jQuery. The coupon is loaded by a script tag, so maybe the jQuery doesn’t bind with the element before it’s fully downloaded? Might not be any good approach to this…
  • Solution: Take out the price from the Stripe Checkout button. I just put another text above it with the final price. 
  • Issue: Some of my fonts are not the same as I set them on carrd.co. Perhaps it’s because of these issues appearing in the console? I’m having trouble loading a bunch of fonts, apparently.
So many font packs failed to load! Apparently, this wasn’t the issue with the strange formatting in my website. Actually, I just forgot to update the classes in my .css files to point to the right elements.
  • Resolved: The issue was because I changed the id name of my form from ‘form01’ to ‘coupon-form’ in my .html file, and I didn’t update the links on my CSS file either. The issue above about loading fonts still applies, but it doesn’t seem to be affecting the look of my website.
  • Issue: Can’t update the value field with jQuery. Tried updating value of a text field with $(#’coupon_checkout).val(coupon.id). 
  • Resolved: In my <input id=‘coupon_checkout’> tag, I didn’t initially include a value = ‘’ attribute. I need to initially include it in the tag and set it to blank, so I can update the value later with jQuery.
  • Issue: Confirmation page wasn’t loading. It was getting stuck with some transitions.
  • Resolved: It was an issue with my .js code. Mainly, my .html file wasn’t pointing to the javascript code. In the JS code, there was a part where it was listening for when the page was done loading. After it was done loading, it would remove some .is-loading classes from the <body> tag, so that they would be replaced with .loaded tags, which complete the transition effect.

Wishes:

  • I wish I could show you my list of Google searches over the past few days regarding these coding projects. I think that would be interesting to show (fun to see?). Unfortunately, after doing a quick Google search, I can’t find the functionality for it. Google used to allow you to do this back in 2015 (history.google.com), but I think this page got replaced with another accounts page.

Things I learned

  • For Stripe API, when the user types in credit card details and clicks submit, the following happens, according to Stripe:
    1. Their credit card details and verifying information are sent to a Stripe server to be checked. If all clears, Stripe sends back a token to the user’s browser.
    2. Then from user’s browser, they’ll send the token to my server. I’ll have to process the payment on my server using that token moving forward.
    3. The POST submit also has a few details from the Stripe Checkout Form – including the user’s email address, address, etc.
  • To let the user type a coupon code, click “Submit coupon,” check in the server if that coupon is valid, then update the website with an updated price without refreshing the whole page, I’ll need to use AJAX. AJAX is “Asynchronous Javascript and XML.” Here’s a tutorial to implement it: https://www.youtube.com/watch?time_continue=9&v=Kcka5WBMktw
  • All of the resolutions to the above issues (there were a lot!)
Ching Jui Uncategorized , , , , , , ,

3 Replies

  1. Hi Ching,

    Very cool that you have set up all of this in your own time. Will try and make an effort to read through all the details.

    Had a chat with a few of my networks and security friends about VPNs etc. and the one thing that came up was with regard to data security and sensitive information. How is this being processed and protected? How have you dealt with this?

    Also, you have said that your servers are set up in America – can I ask which provider you are using? And how it will scale up/down depending on the demand?

    Otherwise, very cool that you are learning and setting it all up! Will read up and follow with any further questions.

Leave a Reply

Your email address will not be published. Required fields are marked *