You may know that I’m addition to my work as a composition instructor at NDSU and my work as a composer, one of my side gigs is web development—I write software (Liszt) for running schools of music. So of course, one of my composing tasks is maintaining a website where people can buy my music. And to make that happen, you kind of need some sort of shopping cart.
For the past several years, I’ve used a great shopping cart platform called Snipcart to handle the shopping part of my websites, both at KyleVanderburg.com and at NoteForge. It’s kind of a drop-in solution: include some code, and as long as your “add to cart” buttons are coded right, they take care of everything. It’s $10 a month, and they package up all the purchasing information and send it off to Stripe, my payment processor.
Recently though, Snipcart has been unable to charge my card for the monthly subscription. When I’ve pressed for diagnostic information, they’ve pointed me to Stripe, and I figure if I’m going to have to deal with Stripe anyway, why not save $10 a month and build my own shopping cart?
First off, I started off with some things that helped out already:
So with those constraints, the first thing I need are a couple of databases, one for the “cart” and one for “cart items.” Cart doesn’t need much more than some sort of identifier, while cart items need fields for cart id, item, and quantity. (It occurs to me on this write-up that there might be a way to build this without a Cart database, but too late now).
Next up, we need a cart page on the website to handle all the cart functions. I decided to program it in PHP because I’m faster at that than writing it with JavaScript. The first time the cart page (let’s call it cart.php) is loaded, it creates a Cart database record, gets a Globally Unique Identifier (GUID) and writes that GUID as a cookie to the user’s browser. (I considered using HTML local storage or PHP sessions, and cookies seemed like the easiest.) Liszt just generated GUIDs for every table row anyway so that’s easy.
In pseudocode: (Note: none of this is actually production code, but it’s close enough to explain it)
<?php
//Generate Cart ID if not set.
if(empty($_COOKIE['NoteForgeCart'])){
$cart->build(); //This will create the record and the GUID.
setcookie("NoteForgeCart",$cart->guid,time()+60*60*24*30,"/"); /* expires in 30 days */
$cartid=$cart->guid;
}else{$cartid = $_COOKIE['NoteForgeCart'];}
?>I opted to use url constructions like cart.php?addItem=myAwesomeScore to manipulate the cart. This requires that every change to the cart cart involves a page reload, but the code is lightweight enough to where I’m not worried about performance. I could have written this in JavaScript and done some sort of Ajax call but…this was faster. Oh and of course instead of myAwesomeScore, I’m using the GUID of the product we’re adding.
<?php
//When we're adding items
if(isset($_GET['addNewItem'])){
$row = $product->getByGUID($_GET['addNewItem']);
if(!empty($row)){
//Add to Cart
$cart_items->build();
$update['cart']=$cartid;
$update['item']=$_GET['addNewItem'];
$update['qty']="1";
$cart_items->update($update);
}else{
//Invalid Product ID
echo "Invalid Product";
}
}
?>From a user interface level, this means that product links can just be to cart.php?addNewItem=guid. Some css styling to load that page in an iFrame in the drawer I mentioned, and it’s an easy implementation.
Retrieving cart contents is easy since we can just do a database query for all the rows in the Cart Items database with a certain cart I’d. That code goes on Cart.php last.
<?php
foreach($cart_items->getByCart($cartid) as $cartitem){
$item=$product->getByGUID($cartitem['item']);
/* display cart items here, prettily */
}
?>Deleting a cart item is easy to work out: a button which loads cart.php?removeItem=item reloads the cart and removes that row from the database.
<?php
//When we're deleting items
if(isset($_GET['removeItem'])){
$cart_items->getByGUID($_GET['removeItem']);
$cart_items->delete();
}
?>Adding an item to the cart that’s already in the cart proves a challenge. When an item is added to the cart, the cart contents needs to be loaded to see if that item is already on the cart, and if so, to increase the quantity by one. This requires some additions to the addNewItem method.
<?php
$contents = $cart_items->getCartContents($cartid);
if(in_array($_GET['addNewItem'],$contents)){
//Item In Cart, Update Quantity
$cart_items->getSingleItem($cartid,$_GET['addNewItem']);
$update['qty']=$cart_items->row['qty']+1;
$cart_items->update($update);
}
?>Changing quantities poses the next problem. A simple way would be to include a text field for quantity, and then add a handler for when it changes, to make a database update. That was a little more complicated than I wanted it to be. I considered + and – buttons, but if the page reloaded every time, it would be obnoxious for large quantities. I considered +1, +10, and +100 buttons, but that seemed similarly awkward. I opted for + and – buttons that ask the user how much to add or remove from the cart.
The next challenge is the actual checkout process. We need an intermediate page between cart.php and Stripe to format the data—something like cart-process.php. This will package the cart in a format that Stripe understands and pass it off to Stripe. Since the cart ID is just in a cookie, we can use that. This takes a bit of time to figure out the nested arrays, but the Stripe documentation (and the Stripe errors in the Apache logs) are well-written.
Once you can get Stripe to catch the data, you’re home free.
There’s a lot of things I haven’t sorted out in this quick and dirty process: shipping prices, whether products need to be shipped, taxes (though I think Stripe is doing that for me)(I figured that out since this write-up), digital assets, and so on. Snipcart used to automatically send out download links for digital goods, and I think I’ll just have to not have that for a bit.
I’ve been using a GitHub project to track everything, here’s what that looks like:
There’s some room for improvement, but it’s not bad for several hours of worth over the weekend to save $120 a year by writing 200 lines of code.
This code will (hopefully) go live later this week.
When I first built Liszt, it required (logically) that users have a username and password. Well, more correctly, it required that I have a username and password, since I was the only one using it. As it grew and I got better at programming, I kept slightly upgrading the credential process and permissions system–the last iteration used a salted password based on a proprietary hashing algorithm.
When storing usernames and passwords, the worst way to go about it is to store passwords in plain text. If your password is “password”, then you just put “password” in the database. Hashed passwords are a little better. It involves taking a one-way Hash, which is a way to take a variable length string like “password” or “pwd” and maps it to data of a fixed size, like 36 characters. The problem here is that if multiple people have the same password, if a bad actor were to steal the User database in Liszt, they could cross reference hashed passwords with password hints.
Liszt never had password hints though, so…but whatever.
Encrypted passwords are alright, but since encryption has a sibling named decryption, it’s safe only as long as the encryption key is safe.
The safest way to store passwords oneself is to combine the user’s password with what’s called a salt. In the case of Liszt, I took a hashed combination of the users ID number, combined with a hashed combination of the user’s password, hashed the result for good measure, and saved that in the database. That way, even if everyone had the same password, it wouldn’t show up in the database as the same password. Everyone gets their own gibberish.
Much of my philosophy on how to properly authenticate users comes from YouTuber Tom Scott–most specifically, his “How Not to Store Passwords (https://www.youtube.com/watch?v=8ZtInClXe1Q, which I’ve just explained in brief) and “The Fictional Day Google Forgot to Check Passwords” (https://www.youtube.com/watch?v=y4GB_NDU43Q). And as I onboarded more and more students, it made more sense to start using alternative providers–Since most clients used Microsoft Office 365, having Microsoft handle the authentication made the most sense. That way, I never have to deal with the passwords.
I wrote much of the code to handle the OAUTH login myself, based on snippets I found online and bolting them to Liszt’s Single Sign On system. Liszt doesn’t use external frameworks for the simple reasons that 1) They either didn’t exist and I wasn’t smart enough to use them when I get started, and 2) It would be a massive undertaking now, and Liszt is kind of its own platform. Because of this, I didn’t use a lot of third-party libraries.
In late 2020, I finally integrated the PHP package manager Composer because I needed it for some storage work I was doing (maybe a blog post in there too), which opened up the possibility of using some existing packages and modules I previously either didn’t use, or integrated manually. One of these things is the League of Extraordinary Packages’ OAUTH Client.
At the beginning of 2021, Liszt contained four login systems. The first was the original Liszt username/password combo, the second was Microsoft 365 for registered users, the third was Microsoft 365 for students and clients, and the last was
A hacked-together beta version of the Google OAUTH code, which worked fine on the Google end, but I never really properly wrote the Liszt end. My work in January has been to reduce Liszt to one login system that can handle multiple providers. Which is…really what I should have done at the beginning.
This sounds reasonably simple, but here are some of the challenges:
Also, I wanted the following:
So there’s just a ton of access control flow going on. Here’s what that looks like now.
For starters, when I coded the original Liszt Office 365 login setup, I used my personal email account. Since we’re upgrading, I moved it to NoteForge. Sound easy? Yes. Is easy? Microsoft now requires that commercial or business accounts be verified, which is a reasonably straightforward, though undocumented process. What that ultimately means is that instead of this:
Liszt now asks for permissions like this:
Even though it’s the same app, in the view of Microsoft it’s different, so all users will have to re-authorize Liszt. Only this time, it comes with a nice blue checkmark.
So Microsoft (or Google or whoever I end up using as providers) verifies the login–Liszt never sees the password or login information, it just gets Profile information, who you are, what your email address is, etc. Then Liszt has to figure out what to do with you. And that flow is, simply, complicated.
The most straightforward cases are either registered users or identified clients/students logging in–It just passes the info on to the appropriate part of Liszt. Next are users or clients who haven’t logged in before and need their Microsoft username applied to their Liszt profile. Reasonably simple.
What about Clients who are trying to log in as Users? Or vice versa? Now Liszt tries to nudge you in the right direction:
Alright, we have those. Next up are people who are clients in multiple Liszt sites–which are arguably few, but better to take care of this now while I know what the code does. If you’re logging in at the wrong place, Liszt will now try to nudge you towards the right client site.
At NDSU, we tried allowing students to self-enroll in 2019, and that worked really well. But, it was a completely manual solution. As in, I wrote some code that said “enroll at this website, get attached to the Marching Band.” With this system, I’ve built in hooks to allow students to self-enroll by inputting a code, which will grant them the appropriate access and assign them to the appropriate groups. That’s not hooked up yet, but it’s ready to be written.
People who are logging in who just need to be fingerprinted? That’s easy–since we’re not checking them against a database, we just package their data and send it to the appropriate Liszt-built system.
Finally, there’s the user onboarding flow, which is designed for creating new registered user accounts. That group will either want to get access to an existing site, or to create a whole new site. That last group, I’m not ready to automate yet, so Liszt collects their information and creates a workorder. Those new users to an existing site, however, now get the option to type in a secret code (provided by the administrator) which creates a permissionless user for that site. Admins can go in and assign the required permissions afterward.
Complicated? Sure. Better in the long term? Way better. In fact, I coded the Google login code for the system in about ten minutes this morning.
Progress? Very yes.
The new version of the Liszt login system goes live later this week.