DEV Community: Drew Womble

Using Stripe to Implement Payment handling on a website

Drew Womble — Fri, 21 Jul 2023 17:16:03 +0000

Using Stripe to set up payment handling yourself can seem like a daunting task. While Stripes documentation is incredibly useful, it can be confusing at times. In this demonstration I'll show you how I set it up in one of my projects. From getting the payments to go through to stripe, and receiving the information from the payment to update your database.

First you'll want to go to Stripe's website and setup an account. Then install Stripe with pip install stripe. In this example I'm using Flask for the backend and React for the frontend. The website is an e-commerce page for buying and selling skateboards. Now create some models for the product to sell and the receipts then run flask db init, flask db migrate, and flask db upgrade to create the database. My models look like so:

Now that we have a database go back to your Stripe dashboard and click on developers. A tab for API keys will show click that and get your test key.

Since this project was being tracked by github I have my test key stored as an environment variable in a separate .env file. You can either do the same or replace environ.get('STRIPE_API_TEST_KEY') with your key in quotes. Now there isn't a lot of stuff we have to do on the front end so figure out what button you want to use to redirect the user to the stripe checkout page. Then create a post request to whatever route you're using to create the checkout session like so:

Mine is the one on line 23. Now that you have a way to redirect the user on the frontend, you can either create the products manually in the Stripe dashboard or use the following function to create them on Stripe and in your database.

You can disregard the get method (lines 147-149). What's happening here is whenever the user creates a new deck to sell lines 160-170 is actually creating the products in your Stripe dashboard as well as adding the product id's and price id's to our database because we will need them later.

Here we defined a route for the session, and got the product from our database. Now that we have said product we can use the price id stripe provides to determined the amount the user will be charged. We also specified the client_reference_id so when we get the information back we'll know which user made the purchase. You can add a lot here from custom fields to shipping addresses, but for the purposes of this example we won't be needing all the extra fields. Now you'll need to setup a webhook to retrieve the data from stripe after the transaction. I used Ngrok, you can use any service you like. Stripe even offers its own CLI you can use, but I prefer ngrok. If you go with ngrok you'll need to create an account and download ngrok. Once you've done that unzip the file. Sometimes you'll run into issues if it isn't set as a windows environment variable. To set it as such copy the path for the ngrok application. Then in the windows search bar search edit environment variables. You should see something like this:

From here click environment variables and then under system variables click on Path. Then click edit. Now click on New and paste in the path do the ngrok application. You can now close the window and open up your terminal. If you actually set the path to a variable enter that variable name otherwise paste the path back in and type http 5000. Or whatever port you plan on running your server on. You should have something like this:

Copy the link after Forwarding and head back over to your Stripe dashboard. From the developers tab you should find a tab for webhooks. Once there click on add endpoint. Then paste the link from the terminal into endpoint URL and add /webhook to the end. Now click on select events then checkout. Now toggle the event called checkout.session.completed, and select add endpoint. Now click on the endpoint you just created; under signing secret click reveal and copy the key.

Same as before my key is stored as an environment variable, but you can just paste it in here as a string. Now we'll write the method to use the webhook.

The only really important thing here is lines 67-75. This is where we retrieve the event object and add the relevant information to the receipts table. You can get a lot of information back from this depending on what you specify when you initially create the checkout session. Now you can test it out and see how it all works! Stripe provides you with a test card number you can use for the transactions so you don't unload your bank account trying to test an app. Feel free to leave any questions in the comments I'll be sure to get back to you, and checkout the repo used in the examples here!

A Comprehensive Guide to Cookies and Sessions in Web Development with Python

Drew Womble — Fri, 30 Jun 2023 03:46:24 +0000

Cookies and sessions are powerful tools that enable websites to store and manage user data. Understanding how cookies and sessions are used is essential to building dynamic and personalized web applications.

Not those kind of cookies!!!
ok
....now that your eyes have rolled out of the back of your head.

COOKIES:
Cookies are small pieces of data stored on a user's computer by the websites that they visit. These data snippets are then passed from the users browser to the web server whenever a request is made. This allows websites to remember users preferences, track their activity, and store session information.

Cookies are primarily used for personalization, session management, tracking, and analytics. Personalization would be how cookies are used to remember a users preferences and deliver an experience more tailored to the user. Thing's like how a website will remember your username when you go to login or a preferred language. Session management involves maintaining a user's session information. This allows for user authentication throughout a user's visit to a website. Tracking and analytics can be used to collect data on a user's behavior. Resulting in websites optimizing their content for each user, and you seeing ads for the same things on every site you visit.

In Python, the http.cookies module provides functionalities for working with cookies. Setting a cookie with Python isn't difficult and can be achieved with a few lines of code when using the http.cookies module:

Above we created a SimpleCookie object to represent the cookie. We then set the value of the username cookie to 'generic username'. We also specified certain attributes such as the expiration time and the path where the cookie is accessible. Finally, we output the cookie in the response headers.

To retrieve cookies sent by the client we can access the 'HTTP_COOKIE' environment variable like so:

Above we retrieved the raw cookie string from the 'HTTP_COOKIE' environment variable using os.environ.get(). Then we parse the cookie string into a dictionary using the SimpleCookie class. Lastly, we can access the value of a specific cookie, such as 'username' if it exists.

SESSIONS:
Sessions provide us with the ability to store user-specific data on the server and maintain user state across multiple requests. Unlike cookies, which are stored on the client-side, session data is stored on the server and is associated with a unique session identifier.

Sessions offer several advantages in web development. Such as:

Secure data storage: Session data is stored on the server, ensuring the security and confidentiality of user information.
State Management: Sessions enable websites to maintain user state across multiple requests, such as remembering a user's shopping cart items or progress in a multi-step form.
Customization and Personalization: Session data allows websites to deliver customized experiences based on user preferences, setting, and history.

Python frameworks, such as Flask, provide built-in session management functionality. For example:

Here we initialized a Flask application and set a secret key, 'not_so_secret_key', which is required for session management. We then defined three routes:

The index route checks if the 'username' key exists in the session. If it does, it retrieves the value and displays it, showing that the user is logged in. Contrarily, it displays a message indicating the user in not logged in.
The login route sets the 'username' key in the session to 'generic username' on accessing the '/login' endpoint.
The logout route removes the 'username' key from the session with session.pop(). The session object in Flask provides a dictionary-like interface to store and retrieve session data. The secret_key is used to sign the session cookie, ensuring its integrity and security.

BEST PRACTICES WHEN USING COOKIES AND SESSIONS:
Using cookies and sessions requires careful consideration of privacy and security. Here are some important guidelines to follow:

Session Expiration: Define session expiration policies to ensure session data is cleared after a specified period of inactivity or a set amount of time.
Validate and Sanitize User Input: When working with cookies and sessions, ensure that user input is validated and sanitized properly to prevent security vulnerabilities such as cross-site request forgery (CSRF) and cross-site scripting (XSS) attacks.
Compliance with Privacy Regulations: Follow relevant privacy regulations, such as General Data Protection Regulation (GDPR), when handling user data through cookies and sessions.
Encryption and Integrity: Encrypt sensitive information stored in cookies to prevent unauthorized access, such as passwords. Even if your website doesn't contain any other sensitive information. A lot of people tend to use the same passwords for multiple websites. Also, sign cookies to ensure their integrity.
Secure Communication: Ensure that cookies are transmitted over secure channels (HTTPS) to prevent interception and unauthorized access.
Limited Data Storage: Store only essential data in cookies, as they are transmitted with every request and have an impact on performance.
Cookie Expiration: Set appropriate expiration times for cookies to balance convenience and security. Shorter expiration times can enhance security, while longer expiration times offer better user convenience.

Cookies and sessions are indispensable tools in web development, enabling websites to remember user preferences, track user interactions, and maintain user state. By understanding the intricacies of cookies and sessions, as well as adhering to privacy and security best practices, developers can create dynamic, personalized web applications that provide noteworthy user experiences while safeguarding user data.

Creating a simple quiz game using python

Drew Womble — Fri, 09 Jun 2023 09:43:43 +0000

This will be a simple tutorial on how to create a quiz game with Structured Query Language aka SQL and python. If you're unfamiliar with SQL check it out here. If you want to follow along you can use this repository I created as a template. First off we will want to get started with the Quiz class:

We'll want to go ahead and import sqlite3 and set some variables so that we can connect to our quiz.db file. Create the __init__ method, getters, and setters for the question and answer attributes. Then we'll want to build a class method for our create_table, drop_table, create, get_all, and find_by_question. We'll also create our save method:

Now we can work on the cli.py file:

Here we created a main method to allow us to loop through our menu and when a user input's and option it will take us to the corresponding helper functions that we are about to create. Note the .strip() at the end of line 13. That will allow us to remove and spaces the user might have accidentally entered giving us our desired response. The import at the top is preemptively imported so we can test the cli as we go. If you wish to test the cli at any point you can run the seed.py file to fill the database with dummy data. Then run the cli.py file to actually see what's happening with the cli. Now we just have to build our helper functions and we're done! We'll start with the welcome()and menu() methods:

We'll go ahead and import random and sqlite3, and we'll create the sqlite variables that we created in the Quiz class, we will need them later. These functions are pretty simple allowing the user to actually see what they should input to get to their desired destination. Now we'll want to work on the ask_question() function:

Here we created another helper function for our helper function randomize_questions. This function selects the questions from our database and gives us a single random question with its corresponding answer. The ask_question() function takes the question and answer given to us by randomize_questions() and compares the answer to the user's input. If correct the terminal will say you got the answer right and if not it'll tell you you're wrong and give you the correct answer. After answering the question right or wrong you'll get sent to another helper function for our helper functions to determine if the user wants to keep answering questions or if they want to go back to the menu:

If the user chooses yes they'll be spit back to ask_question() if they choose no they'll be redirected to the menu. Now we will want to create our function to handle creating new questions:

Here we give the user option to input the question and answer they want to add to the database and store them as variables. Then we can use the create method from the Quiz class to actually add the users inputs to the database. Lastly we can add validation by using the find_by_question method to check that the users inputs were successfully added to the database. Now we just need to add functions to handle the user exiting the cli and for invalid user inputs:

The exit_cli() function allows the user to exit the cli in a user friendly way. Although ctrl + d works too. The invalid_inputs function simply prints a message to the user telling them their input was invalid and returning them to the menu. Note you don't have to call menu() in invalid_inputs() because menu() comes before our if statement in the while loop in cli.py. This means if we aren't somewhere in the loop say ask_question() the user will automatically get taken back to menu(). Now your done! The cli should look a little something like this:

Looks great right! Well not really we didn't do any styling, but it works like a charm! If you want to checkout the completed project you can find the repo here!

Create a Flashcard Application Using React

Drew Womble — Fri, 19 May 2023 05:57:20 +0000

Start by opening your terminal moving into whatever folder you want the application to be in and using npx create-react-app flash-card-app flash-card-app being whatever you wish to name the project. Then I like to delete all of the unnecessary flack such as the test files and the logo .png's in the public folder. After that make sure to run npm install to install the node modules. Then create your .json file to store all of the questions and answers.

Once you make your .json file go into the package.json and inside the scripts object add this line:

This will allow you to create a RESTful API to both fetch data and post data. Make sure to run the command npm run server to actually start the server. Also run npm start so we can watch our progress in the browser. Next we will start building out our App component which will act as our main parent.

We will create the CardList component and the Form component soon for now they're just placeholders. It wouldn't hurt to go ahead and import them though. Now we will actually have to fetch our data from the json server we created. Import useState and useEffect to help us with this.

Use the setCards function in the GET request to set cards equal to the data we get back. Then we can pass cards as a prop to our CardList component. Create the CardList component and export it.

Here we created the CardList component. Created our displayCards variable which maps through the cards that were passed down and sends each one to the Card component that we will create in just a moment. Don't forget to add the key={card.id} in the Card component. React needs the key component in list items to track what gets added, removed, or reordered. Now we will create the Card component with card now being passed as a prop.

Now we can use useState to implement a flip functionality to our cards.

The only thing happening here is when you click on the card the state of flipCard will get set to true. Then the ternary allows us to see the answer instead of the question. You should now be able to toggle between the answers and questions by clicking on the individual cards. This is great and all, but what if you want to add new flashcards without going into the json and manually creating new objects. That's why we will do just that by creating a Form component. Create a normal component that returns a form with 3 inputs; one for the question, answer, and submit. Like so:

Now we will use state to set what the user types into the form and pass it to our handleSubmit function.

Here we are taking what the user types for question and answer, and setting our state variables to those values. We then pass that information into our handleSubmit, create a new object with it and pass it to the handleForm function. Which must be created in the main App component in order to set the state of the cards to whatever the user submitted. Don't forget to add e.preventDefault()! The handle form function should look like this:

This function takes the new card object and adds it onto the existing array of card objects. The only issue with this is when we refresh the page all the cards we added are now gone! To prevent this from happening we can add a POST request into our handleSubmit function.

Here we have our POST request which takes our newCardObject and post's it to our RESTful API resulting in an updated json with our information. Note we don't have to add an id to the new object. The server will do that for us. Also it's nice to reset the state of question and answer at the end of the handleSubmit function. That way the form clears itself and we don't have to backspace everything from the inputs when we want to add something new. Lastly, we can add some simple styling:

And you should have fully functional flashcard application that looks something like this:

Of course if this is all too much work, or you just don't feel like making it yourself. I've published this project to github. You can find it here.

Using `.map()` in JavaScript

Drew Womble — Fri, 28 Apr 2023 15:44:23 +0000

In JavaScript, the .map() function is a higher-order function that is used to transform an array by applying a function to each element of the array. The .map() function creates a new array with the results of calling the provided function on every element in the original array. It does not modify the original array.

The basic syntax for the .map() function is as follows:

array.map(function(currentValue, index, arr))

The function() is required and will be the function that is run on each array element. currentValue is also required and represents the value of the current element. The index is optional and represents the index of the current element. arr is also optional and is the array of the current element.

.map() is an incredibly useful tool in JavaScript. You could use other methods such as for...of loops; however, .map() increases the readability of your code.

Here is an example of the differences between using a for...of loop and using the .map() function. Let's say we have the following array of menu items at a barbeque restaurant:

const menuItems = [
     {
          dish: 'Pulled Pork',
          price: 12.99
     },
     {
          dish: 'BBQ Chicken',
          price: 11.99
     },
     {
          dish: 'Brisket',
          price: 13.99
     }
 ]

It's May 16th! International barbeque day! The owner calls and says that everything should be 50% off! We could use a for...of loop to iterate through the array and change the prices. Like so:

function loopAndUpdate(array, updater){
  const updatedArray = []
  for(let item of array){
      updatedArray.push(updater(item))
  }
  return updatedArray
}
function halfOff(item){
  item.price = item.price/2
  return item
}
console.log(loopAndUpdate(menuItems, halfOff))
//=> [
  { dish: 'Pulled Pork', price: 6.495 },
  { dish: 'BBQ Chicken', price: 5.995 },
  { dish: 'Brisket', price: 6.995 }
]
console.log(menuItems)
//=> [
  { dish: 'Pulled Pork', price: 6.495 },
  { dish: 'BBQ Chicken', price: 5.995 },
  { dish: 'Brisket', price: 6.995 }
]

For this example we wrote a function that allows us to loop through our array and return the updated array. Then wrote another function to change the price to half off. Notice the original array was changed. If we wanted to prevent that we could use the Object.assign() function like so:

function halfOff(item){
  let itemCopy = Object.assign({}, item)
  itemCopy.price = itemCopy.price/2
  return itemCopy
}
console.log(loopAndUpdate(menuItems, halfOff))
//=>[
  { dish: 'Pulled Pork', price: 6.495 },
  { dish: 'BBQ Chicken', price: 5.995 },
  { dish: 'Brisket', price: 6.995 }
]
console.log(menuItems)
//=>[
  { dish: 'Pulled Pork', price: 12.99 },
  { dish: 'BBQ Chicken', price: 11.99 },
  { dish: 'Brisket', price: 13.99 }
]

In this example the original object remains unchanged because we made a copy of it and passed that into our loopAndUpdate function. This works, but things are starting to get messy and overcomplicated. Especially when we have .map() at our disposal! Let's assume we are dealing with the same object as before menuItems. Here's an example using .map() to do the same thing:

const halfOff = menuItems.map(item =>{
  item.price = item.price/2
  return item
})
console.log(halfOff)
//=>[
  { dish: 'Pulled Pork', price: 6.495 },
  { dish: 'BBQ Chicken', price: 5.995 },
  { dish: 'Brisket', price: 6.995 }
]
console.log(menuItems)
//=>[
  { dish: 'Pulled Pork', price: 6.495 },
  { dish: 'BBQ Chicken', price: 5.995 },
  { dish: 'Brisket', price: 6.995 }
]

That looks a lot better, but I know what you're thinking. "I thought .map() didn't change the original array!" While this is true JavaScript is not storing the actual object at each index of menuItems. It's storing a pointer that references the location in memory at where the object is stored. .map() is creating a new array, but it's filled with pointers to the same objects. To fix this we can use Object.assign() in the same way we did before:

const halfOff = menuItems.map(item =>{
  let itemCopy = Object.assign({}, item)
  itemCopy.price = itemCopy.price/2
  return itemCopy
})
console.log(halfOff)
//=>[
  { dish: 'Pulled Pork', price: 6.495 },
  { dish: 'BBQ Chicken', price: 5.995 },
  { dish: 'Brisket', price: 6.995 }
]
console.log(menuItems)
//=>[
  { dish: 'Pulled Pork', price: 12.99 },
  { dish: 'BBQ Chicken', price: 11.99 },
  { dish: 'Brisket', price: 13.99 }
]

Fixed! Now .map() really shines when we already have a helper function to take 50% off the price:

function halfOff(item){
  let itemCopy = Object.assign({}, item)
  itemCopy.price = itemCopy.price/2
  return itemCopy
}
const halfPrice = menuItems.map(halfOff)
console.log(halfPrice)
//=>[
  { dish: 'Pulled Pork', price: 6.495 },
  { dish: 'BBQ Chicken', price: 5.995 },
  { dish: 'Brisket', price: 6.995 }
]

All condensed into one line! .map() really is a useful function. Hopefully now you understand why it is useful, and understand how to use it. Not only does it make your code easier to read, but it makes things easier on you too!