- 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
- 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 outStripe 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.
- 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.
- 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.
- 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.
- 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.
- 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:
- 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.
- 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.
- The POST submit also has a few details from the Stripe Checkout Form – including the user’s email address, address, etc.
- All of the resolutions to the above issues (there were a lot!)