Accepting Credit Cards In Your iOS App Using Stripe

Update note: This tutorial was updated to iOS 11, Xcode 9, and Swift 4 by Lorenzo Boaro. The original tutorial was written by Pietro Rea.

In this tutorial, you are going to learn how to accept credit cards in an iOS app using an amazing service called Stripe. You will walk through the whole process, from creating your Stripe account to accepting customer payments.

Stripe is an easy way to accept online and mobile app payments from both individuals and businesses.

There are two main features provided by the Stripe service. First of all, it avoids all the bureaucracy of creating a merchant account while still ensuring transaction safety. Also, it allows you to set up a developer account without verifying any business information. You can start accepting credit cards with Stripe’s API after signing up using the test environment. Moving to production is easy. All you need to do is to switch out your test API keys with live ones, and that’s it!

Getting Started: Creating Your Stripe Account

The first step is to get your API keys from Stripe. Head over to stripe.com and click on the green button that says CREATE ACCOUNT. Notice the phrase The new standard in online payments is stamped right on the homepage. So far, so good!

At this point, you are going to create a full-fledged Stripe account. It does not require to have your business details handy since we are going to use test data.

Insert your details (don’t forget to check the Captcha box) and click Create your Stripe account. You will be greeted with a dialog to add a mobile recovery number. If you chose not to do so now, click Skip.

To find your keys, click on API on the dashboard’s left menu.

As shown below, Stripe generates a pair of test secret/publishable API keys for your account. You won’t be able to use your live keys until you verify your account with Stripe. For the purposes of this tutorial, and whenever you’re just developing, you want to use the test secret and test publishable keys.

Note: Whenever you need your API keys, remember this is where you’ll find them. If your keys ever become compromised, you can reset them using the dotted icons to their right.

RWPuppies: The Stripe Sample Project

Your project for this tutorial is RWPuppies, a fully-functional mobile storefront that sells and ships puppies right to your door and accepts payments using credit cards. Full disclosure: This app will not ship puppies right to your door. Sorry if that’s a disappointment!

The app consists of the following three tabs:

• Featured Puppy: Displays the puppy of the day. This tab contains the puppy’s detailed information like name, breed and price. There’s even an Add to Cart button right there on the view controller if you decide to buy the featured pup on a whim. :]
• Inventory: Displays the entire list of puppies on sale in table format. Tapping on any cell takes you to that pup’s details page, which looks very similar to the featured puppy page.
• Checkout: Shows all the puppies that are currently in your cart, along with a running total for your order. Tapping on Continue takes you to a view controller where you can enter your credit card information and complete your purchase.

You don’t want to waste your time setting up table views or dragging out buttons in Interface Builder when you’re here to learn about Stripe so you’ll be happy to hear this tutorial provides you with a starter project that has everything unrelated to Stripe already implemented for you.

You can download the starter project here.

Open RWPuppies.xcworkspace. Build and run RWPuppies to give it a whirl, and notice that the UI and most of the functionality is already in place.

Real-world e-commerce apps typically get their inventory data from a remote server. For simplicity, the ten puppies on display, including the featured puppy, are all read from a local file named puppies.json. The contents look something like this:

[

{
 "id" : 12252012,
 "name" : "Penny",
 "breed" : "Dachshund",
 "photo_large" : "http://www.raywenderlich.com/downloads/puppies/dachshund.jpeg",
 "cuddle_factor" : 5,
 "price" : 29999
 },

 ...
]

The checkout cart is implemented as a singleton called CheckoutCart. You can add and remove any number of puppies to and from your cart and all the changes will be reflected automatically in the third tab, which contains your order information.

Your primary task is to integrate the logic to collect and send the payment to your simple back-end app that will talk to Stripe.

“But I’m a mobile developer. I don’t do back end!” Fear not. You’ll find it’s pretty straightforward. :]

But Wait A Second, You Might Be Wondering… What About In-App Purchases?

Credit card payments are not to be confused with In-App Purchases. In-App Purchases can only be used to sell digital goods that are going to be consumed within the app. If you are dealing with a physical good or service, not only should you not try to use an In-App Purchase, you must not. Apple will reject your app!

Say you developed a game. If you want to offer more levels for 99 cents a pop, you have to use an In-App Purchase. If, on the other hand, you want to sell official t-shirts inside the app, then you have to handle your own credit card payments with a service like Stripe.