Online payment using Stripe, Angular, and Spring boot

What is Stripe?

Stripe is a suite of payment APIs that powers commerce for online businesses of all sizes.

Create an account:

Navigate to the stipe website Here

Enter your info and click create account button.

Then you will receive an activation email. After activating your account, log in.

Get the API key :

On the Stripe, dashboard click on Developers

Then click on the API key and copy the Publishable key we will use it later.

Create an Angular application :

Open a terminal and run :

ng new stripe

After creating the project, we will install stripe-js and Angular Material :

npm install @stripe/stripe-js
ng add @angular/material

Note: I used angular material to change the style of the application and it is not required to work with Stripe.

Next, let’s add some environment variables:

To fix the CORS issue, add the proxy.config.json file on the top level:

Now update package.json and change the start command to :

"start": "ng serve --proxy-config proxy.conf.json",

Then we will generate two components: the first one when the user validates or cancel the payment.

ng g c cancel
ng g c sucess

Let’s add some Modules inside the app.module.ts :

Create Spring boot application :

https://start.spring.io/

Dependencies: Spring Web, and Spring Boot DevTools.

After downloading and unzipping, the project add these 2 dependencies:

<!-- gson -->
<dependency>
<groupId>com.google.code.gson</groupId><artifactId>gson</artifactId></dependency><!-- stripe --><dependency><groupId>com.stripe</groupId><artifactId>stripe-java</artifactId><version>20.41.0</version></dependency>

Gson is a Java library that can be used to convert Java Objects into their JSON representation.

Now repeat the same steps as before to get your API key, but now copy the Secret key.

Then let’s create StripeController to hold our rest APIs:

Don’t panic, for now, it’s an empty controller we will add more methods later.

Stripe checkout :

Let’s integrate Stripe checkout for a one-time payment.

Frontend:

Let’s generate a new component :

ng g c checkout

Let’s update the app.routing.ts :

Next, add this code to checkout.component.html :

update the checkout.component.ts :

Then download this image from here and copy it to the/assets/images folder.

And finally, add the router-outlet to the app.component.ts :

<router-outlet></router-outlet>

Backend :

Let’s create a model package then create a CheckoutPayment it is a POJO class :

Next, let’s update the StripeController :

And last update the app.properties files :

server.port=8888

We change the default port from 8080 to 8888.

Let’s Test what we did :

Navigate to http://localhost:4200/checkout :

Click on the Buy it for $999 button :

Now open a new navigation tab and navigate to :

copy the card number and enter the email, the name, any 3 digits, and any date.

Then click the Pay 999.00 button.

Stripe will redirect you to http://localhost:4200/success

Let’s repeat the same steps, but this time we will cancel the transaction :

Stripe will redirect you to http://localhost:4200/cancel

To ensure that we made a transaction, let’s navigate to :

https://dashboard.stripe.com/test/payments?status%5B%5D=successful

We have a successful payment.

Stripe Subscription :

Let’s integrate Stripe Subscription for recurring payments.

Before starting coding, we need to create a product on the Stripe platform with 2 prices: the first for monthly subscriptions and the other for yearly.

Navigate to https://dashboard.stripe.com/ and then click Products

Next, let’s create our first price :

The first price for a $100 subscription per month.

Let’s add another one for an $1100 subscription per year.

Then click the Save product button.

Stripe will redirect you to the products page :

We will need them later.

Frontend :

Let’s come back to the angular application and generate a new component :

ng g c subscription

Backend :

Let’s back to the spring boot project and create a new POJO class inside the model package :

Now let’s test what we did, navigate to :

http://localhost:4200/subscription

And click the Pay $100 per month button

fill in the form with data as we did it before.

Then navigate to :

We create a new payment, but with the type invoice, this means it is a recurring payment.

Last word :

You can find the source code from my GitHub Repository:

Frontend :

Backend:

If you enjoyed this article, please clap it up 👏 and share it so that others can find it! Follow me to get more of me 😄.

I'm Hamdi, a software engineer 👨‍💻, and writer 📝