This week on CodePen Radio, we're talking about the tech behind taking payments in a web app. If you want to make money with any kind of online business, money will need to change hands. We go over the different options for payment processing, and explain how we personally use Stripe and PayPal for processing payments.

Everyone loves Stripe

1:58 Stripe is pretty much unanimously loved.

2:38 We had to design payment screens to take payments for our Pro user accounts. So we designed the forms, and after a user fills in their credit card information, Stripe takes that information and turns it into a token; so we never have to store the credit card info on our servers.

6:04 After users fill out the form, we have the option to charge whatever we want, but our contract states the amount that we will be charging the user.

6:54 What is the IPN (Instant Payment Notification) system?

  1. User gives us credit card information and agrees to monthly payment
  2. Every month, Stripe send us information about which users have paid, or are past due on a payment

Stripe also writes a lot of code to handle common problems that happen with payments, so you don't have to. You just have to handle the callbacks from their API.

9:35 The initial call to Stripe turns the user's card information into a token, then we make another call to them that says, "We have this token, we have this user, let's do some stuff with this information" (create a user subscription, make a charge, etc.).

10:22 In the old days, when you had to store credit card information on your server, you had to meet PCI compliance standards to make sure that your server won't be hacked and your user's information stolen.

11:04 With Stripe, you hold an ID for a user, and that ID represents a user on Stripe's servers, and Stripe stores the card information and does the processing, so that the credit card information never gets stored on your server.

Your choices for payment processors

11:47 At CodePen, we made the decision to take Paypal because of the number of requests we got for it. Currently, between 5-10% of our users are using PayPal to make monthly payments.

14:30 Another reason you might choose Paypal over another company is credit card expiration dates. Expired credit card numbers are a big part of customer churn, so using Paypal may help prevent some of that churn.

15:14 What about Apple Pay? Apple Pay will work similarly to Stripe, in that they use tokens to transfer information between users and payment processor. It's still a new service, so we'll be taking a deeper look at it in the near future.

The difficulties of integrating PayPal

17:13 Where to start? Here are some of the difficulties we ran into when trying to integrate PayPal into CodePen:

  1. Getting the developer account set up
  2. Everything happens on a subdomain, and that causes problems
  3. They use ancient encoding in their API

If you are just selling a few products on your site, you might not need to use Stripe, you could just use a simple Paypal button, or Wufoo.

22:53 Some companies choose to use Stripe to process payments for their site. Shopify, for example, uses Stripe to handle the large volume of payments from their user's customers, and they probably worked out a deal with Stripe to take a cut of the money flowing through their payment system.

What are your choices for payment processors?

24:49 There doesn't seem to be a ton of choices for payment processing providers. There's a high barrier to entry because of regulation, and so there are just a handful of good providers for this service.

What information do you need to collect for payment?

27:49 You don't need the user's address, zip code, or the CVC security code (the three numbers) from the credit card to make a charge. You're able to choose the level of security by how much information you require from the user.

The more information the user has to enter into the form, the less likely they are to finish the form. We're removed most of that information from our forms, but this could prevent us from moving to another payment processor, because we would need to provide that information about our users to continue monthly charges with their cards.

What can go wrong?

30:32 We're responsible for policing fraud, so it's possible that if enough fraudulent charges went through some of our account, our account could be shut down. So we need to keep an eye on any fraudulent activity to prevent it from continuing.

33:20 A quick overview of the Stripe Ruby Mock library.

Show Links:


  • Man this episode sounds super useful. Can’t wait to listen to it. Thanks for also providing show notes. That’s what I used to browse through the contents of what you covered.

    I’ve used stripe in the past and it’s pretty sweet. That’s probably what we’ll use in the future as well.