Getting started with Stripe – part 2

05/19/2014

This is a follow-up to my introductory post on Stripe. I covered Stripe’s merchant and marketplace products in the first post, and in this one we’ll try building some basic web apps that use Stripe Checkout and Stripe.js.

Note that to keep the focus on the API I kept things as minimal as possible, which meant omitting most error checking, so do not use any of the code from this post as-is in production. At the very least, you need to add comprehensive error handling and use HTTPS for both the frontend and the backend.

Backend: Node.js + Express

We’ll use a common node.js + Express backend for all the examples, so let’s cover that first.

Making a charge against a credit/debit card using the Stripe API requires a surprisingly small amount of code. The following is a fully-functional Node.js/Express app that will make a $10 charge against a card token supplied in an HTTP POST request to http://<server>:3000/charge, and respond with either an HTTP 204 OK or an HTTP 500 error depending on whether the card was successfully charged or not.

To test, save the above code into a file called index.js, replacing sk_MY_SECRET_KEY with your Stripe secret key (if you don’t have one, sign up for an account with Stripe). Then setup and run it like you would any Express application, i.e.:

Your backend is now running at http://localhost:3000

This backend can accept a Stripe card token and make a $10 charge against it. Sweet! We now need to build a frontend that accepts card information, converts that into a card token, and sends it to the backend.

Frontend: Stripe Checkout

1. Minimal Checkout example

Save the above into a file called stripe.html in the same directory you saved the backend index.js file into, replacing pk_MY_PUBLISHABLE_KEY with your Stripe publishable key. Open the application by visiting http://localhost:3000/stripe.html

Click on the “Pay with Card” button to launch the Stripe Checkout UI and enter email and card information. You can use any valid email, expiry date and CVC, and one of the test card numbers listed here. I usually use a@b.com, 01/20, 123 and 4242 4242 4242 4242, respectively.

When you hit Pay, the card number you entered will be charged $10. Pretty amazing that it’s this easy to accept card payments!

2. Customizing the Checkout dialog

Stripe Checkout is actually pretty configurable. The previous example used the absolute minimum possible configuration (just the data-key parameter), so let’s go ahead and customize the dialog a little:

  • Show the site logo
  • Show the site name
  • Show a description for the charge
  • Show the charge amount
  • Ask for the billing address
  • Change the ‘Pay with Card’ button label

Replace the contents of <body> in stripe.html from the first example with the above code, replace pk_MY_PUBLISHABLE_KEY with your Stripe publishable key, then refresh the page to see the updated button and dialog.

The full list of configuration parameters supported by Checkout is available here.

3. Launching the Checkout dialog programmatically

In the above examples, the Checkout dialog is always launched using a Stripe-generated button. We customized the button label in the second example, but there may be cases when we need to customize the look of the button further, or perhaps launch the dialog from a drop-down menu or link.

To do this, we need to launch the Checkout dialog via Javascript.

Same drill as before. Replace the contents of <body> in stripe.html with the above, plug in your Stripe key and refresh the page. This time, instead of the usual blue Stripe button you will see a link. Clicking on the link will bring up the Checkout dialog.

The first section of the code is a function that submits data to the server once the card token is received from Stripe. The second section configures the Checkout dialog similarly to how we did it in the previous example, but with Javascript. The third section takes care of opening the Checkout dialog when the link is clicked.

The code is a bit longer in this case because the logic in the first and third sections were handled by Stripe Checkout in the first two examples, albeit at the cost of customizability.

Frontend: Stripe.js

Let’s continue on our customization spree. Now that we have our own UI element that launches the Checkout dialog, let’s see if we can use our own UI elements to replace the Checkout dialog itself. Perhaps the look & feel of the dialog doesn’t match the rest of our site, or we want to remove some of the fields (like email), or we want to add additional UI elements. To accomplish this, we’ll have to go one level down to Stripe.js.

Stripe.js encapsulates the card information to token mapping functionality that is part of Checkout. By linking our custom UI code with Stripe.js, we can mimic the end-to-end functionality of Checkout.

1. Minimal Stripe.js example

Let’s start with a super-minimal example: a bare-bones form that takes card information from the user, uses Stripe.js to securely transmit it to Stripe to get back a card token, and then finally submits the form to the server along with the token so the card can be charged.

Although this is functional, I felt icky just typing fake card numbers into this UI. Let’s see if we can make the UI look a little better.

2. Using a nicer Bootstrap-based dialog

Let’s glam up the form a little using the Bootstrap library. First, add the following to the <head> section of stripe.html:

Now replace the <body> contents with the following:

Now when you press the button, you should see a modal dialog that looks like this:


Still very bare-bones, especially compared to Stripe Checkout, but nonetheless decent looking and a good base to build on.

And that concludes my high-level walkthrough of Stripe Checkout and Stripe.js integration. Hopefully you found it informative!