Introducing the Shopping Cart Extension

Michael Ruescher

This post is an overview of how to create an online shopping cart with the Webpop extension engine and the Stripe API. We’ll use our Ecommerce theme as an example, it features one click payment processing, automated order confirmation emails and an admin dashboard for viewing orders.

 If you have a Webpop account, go ahead and grab that theme so you can follow along with a live example, otherwise checkout the source on github.

Stripe Setup

The Ecommerce theme uses Stripe to process payments (read why here). The first thing that happens when an authorized Webpop users visit a page of the Ecommerce theme site is that a big red prompt covers the whole page and asks for the Stripe API keys of the store owner. And it won’t go away until the store owner enters them.

The extension will do this once for production and once for developement version of your site. Enter the Stripe test keys for development and the production keys for production.

Once the keys are submitted via the configuration form, stripe.js saves the API keys in the storage module for safe keeping.  If the keys are valid, the store can now interoperate with the Stripe API to securely process credit card transactions.

The Shopping Cart

Like it’s name implies, the cart.js extension creates a shopping cart which lets customers add items and update item quantities. It uses the browser session to store the “items in cart” while the customer is shopping.

Once the customer proceeds to the checkout page, cart.js responds by rendering an order summary and payment form.

Processing Payments

When the customer fills out the payment form and clicks submit, jQuery intercepts the submit, and uses the stored Stripe public key to create an encrypted token of the credit card information and send that token directly to Stripe for validation.

Notice how the credit card info never touches any Webpop servers? These tokens are the secret sauce that lets you create a seamless, competely custom payment flow directly on your site without having to worry about PCI compliance. Of course, you still need to an SSL certificate to prevent “man in the middle” attacks on unsecured connections. We recommend Cloudflare for this.

Once the card is validated, Stripe sends back a “single use token”. This token represents the validated card and is basically a permission slip that authorizes the site with the matching secret key to initiate a single transaction with that credit card.

To charge the card for the amount of the order, the serverside stripe.js extension makes a POST request to Stripe with the secret key, the “single use token” and the amount to be charged.

Payment Success

After a successful payment transaction, a unique transaction id is returned in the success response from Stripe. This transcation id (stripe_id) turns out to be a great key for storing the whole order in the storage module.

Since Stripe also uses this id as the primary identifier in their transaction record, it lays the groundwork for doing things like linking to Stripe end points of each transaction in the order dashboard.

To make for a convenient way to retrieve all the orders later, an “order” tag is added to each key/value pair of stripe_id and order details that gets saved to the storage module.

At this point the mailer module is also invoked to send order confirmation messages to the customer and store manager.

The Orders Dashboard

Since all the since all the succesful orders are being saved, we can build a simple admin dashboard which lists out all the orders by date.

Here's the basic method to retrieve all the orders storage module tagged with "order":

var orders = storage.list({tags: ["order"]})

This returns an array of all the orders, but it could use a bit of formatting. Right now orders.items is an array that looks something like this:

[ {item: {...}, quantity: 2}, {item: {...}, quantity: 1}, ...]

where each {...} is an actual order object, something like:

{id: "st_...", email: "", ...}

But we want the orders.items to look something like this:

[{id: "st_...", email: "", quantity: 2, ...}, {id: "st...", email: "", quantity: 1, ...}, ...]

So we map a function over the array, and in that function we take the .item and .quantity of each array object and merge them together into a single item object:

var orders = storage.list({tags: ["ecommerce", "order"]}).map(function(data){
  var order = JSON.parse(data.value)
  order.items = {
    var item = obj.item;
    item.quantity = obj.quantity;
    return item;
  return order;

The reason for pointing this out is to highlight that Webpop is just Javascript and all your are doing is passing JSON objects that to the Pop Tag engine so you can render its values and whatever data heirarchy may exist with Pop Tags.

Becoming familiar with javascript methods like is a good thing to know for when you need to restructure arrays of data into more usable arrangements.

There's plenty more to explore under the hood. I encourage you to read the comments in cart.js and stripe.js. Feel free to ask questions if there are any parts which are confusing to you or would like to see developed further.

« Back to Blog Index

Sign up now

30 days free trial. Sign up in 60 seconds. Upgrade, downgrade, cancel at any time.
blog comments powered by Disqus