Creating a checkout flow with Stripe Checkout

In this post we’ll explore how easy it is to build a simple checkout flow using the Stripe Checkout API.

I will assume that you already know how to setup a client-server application with Angular and NestJS. If not, please take a look at my previous article here. The same concepts can be applied to any other JavaScript frameworks. So, with this out of the way let’s go ahead and build the checkout.

We’re going to need first the secret and publishable keys from the Stripe account. To access them, got to your test account settings: https://dashboard.stripe.com/test/apikeys and copy your standard keys in a .env file in the root of the project.

We’ll also need to install the stripe libraries for node and the client side. And also @nest/config to access the .env file in the out API:

Now, with the dependencies installed, let’s start creating the app.

First we need to create a session using the Stripe library for node and return the session id to the client. There we’re going to use it to redirect the user to the Stripe checkout page.

In the api, let’s create a stripe module and a service. Afterwards declare a createCheckoutSession method. And initialise the stripe library by passing the Stripe secret key, declared in the .env file. We can use the NestJS config library for that.

This method is going to get a list of items, that will represent the user’s purchase. They are called line-items in Stripe. Apart from the line-items, we need to provide an array of payment methods that the client can use. In this case we’ll allow credit cards and iDEAL. And also the success_url and cancelation_url. In this case, for testing purposes well redirect to localhost:4200, where we serve the frontend app. And this is the createCheckoutSession method.

Now let’s use it in out app service. We already have one created when initialising the nest app. But before we can inject the stripe service, we’ll need to import the stripe module in out app module.

Let’s define the getLineItems method, witch will return a list of coffees with random amounts between 1 to 10 euros. Also, the getCheckoutSessionId, where will call the stripe service, pass in the line items and return the newly created session id. And this is how it looks.

The final part is to define an endpoint in the app controller and return the session id.

Now, go ahead start the nest app, open a terminal and test the endpoint. As you can see, we get a session id.

Great. We have the api up and running. The next step is to create the Angular frontend.

We already have the frontend application in the monorepo from the previous article. So all we need is to define the components and redirect the user to the stripe checkout using the client-side library. Let’s do that now.

First let’s go in the app.module and define the routes. Well have a checkout route where all the checkout magic is going to happen.

In the CheckoutComponent create a button using angular material components. And let’s call the CheckoutService to redirect us to the checkout.

In out checkout service, first well need to load Stripe client library using the loadStripe method using the publishable key from the Stripe account.

Then, when the user clicks on the “Go to checkout” button, well call the api to provide us with a session id and then call redirectToCheckout from the Stripe library, witch will redirect us to the Stripe checkout page.

Ok, now let’s test out app. If we run the frontend we should see the “Go to checkout” button and when clicking it it should redirect us to the checkout page.

We can go ahead and fill-in the card with one of the Stripe test cards that can be found here: https://stripe.com/docs/testing

After a successful payment you should be redirected back to the frontend application. Canceling the flow would result in the same outcome for now. We can also declare two separate success and cancel routes in our frontend or handle those cases in a different way. But I’ll leave that one of for a feature articles were we will also customize the default stripe checkout page.

We’ve managed to get to the end. The code can be found here on GitHub.

I hope that after reading this article you have a better sense of how simple is to create a checkout flow using Stripe. And that you’ll join me in one of the next journeys where we will more in-depth into Stripe’s features.