Payments on iOS with Stripe

Integrating Stripe on iOS with Swift, Webhooks, & NodeJS

Photo by blocks on Unsplash

Just recently, I needed to implement payment methods for a project I’ve been working on. First thing that came in mind was Stripe, of-course. I was hesitating to visit their website because the last time I did, it was not user-friendly and it was hard to navigate through.

I was not sure if I could track down the sample code and the documentation I needed. If it came to the worst, I’d have to fully rely on only Apple Pay for transactions 😬.

I was wrong. Many things had changed and it got me so excited. I navigated through the website until I got to the documentation and sample code. It was all I needed, and within a few minutes, I set up my app to accept payments!

For this tutorial, I’ll guide you on how to make use of Stripe’s resources to setup your app to accept payments. You will:

1. Setup your dashboard
2. Setup your backend (NodeJS + Express)
3. Setup your front-end (Swift)

Ever heard of web-hooks? It’s a method that allows apps to communicate. Stripe utilizes web-hooks to notify your app that an event has occured. We’ll therefore be using web-hooks for this tutorial.

The Dashboard

Begin by creating an account with stripe if you haven’t done so. From the menu on the left, go to Developers, then API Keys. Make sure the switch for ‘view test data’ is on. These will generate test API keys suitable for testing.

Next, go to Web-hooks. From here, you can create a web-hook end-point and define the events as well as the URL of the backend application.When you’re done, make sure to get a web-hook secret.

The Backend

You’ll need to clone Stripe’s resources from here: https://github.com/stripe-samples/accept-a-card-payment

Navigate to using-webhooks, then server, then open the node folder with your favorite editor.

Open terminal and navigate to the node folder and run npm install. If there’s anything you’ll need to adjust, it’ll be in the server.js file.

You’ll then need to create a dot-env file (.env), which will hold your public key, secret key, and web-hook secret.

# Stripe API keys - see https://stripe.com/docs/development#api-keys
STRIPE_PUBLISHABLE_KEY=PUBLIC-KEY-GOES-HERE
STRIPE_SECRET_KEY=SECRET-KEY-GOES-HERE
# Required to run webhook
# See README on how to use the Stripe CLI to setup
# Ignore when running `without-webhooks` samples
STRIPE_WEBHOOK_SECRET=WEBHOOK-SECRET-GOES-HERE
#Environment setup (web client)
STATIC_DIR=../../client/web

All done? run npm start. Hopefully at this point, you would have run it without any problems.

The Front-end

Navigate to using-webhooks, then client, then iOS, then App (Swift). You’ll notice the CheckoutViewController.Swift. In here is a button, custom text field that collects the credit card information.

There’s also some code that handles communication with the server. This carry’s out the task of the payment intent and passes the credit card information to the server for verification and payment.

Copy CheckoutViewController.Swift into your project.

In your app’s project make sure to install Stripe. I used Cocoapods for this.

In AppDelegate.Swift, make sure to import Stripe.

Then inside the ‘didFinishLaunchingWithOptions’ function, make sure to define the publishable key as default as shown below.

STPAPIClient.shared().publishableKey = Constants.stripePublicKey        
Stripe.setDefaultPublishableKey("public_key_here")        STPPaymentConfiguration.shared().publishableKey = "public_key_here"

All Done!

Make sure your NodeJS backend app is running then run your iOS app and test the payment with the sample credit cards from Stripe.

I hope you enjoyed this tutorial.

Happy Coding! ✨