Online payment using Stripe, Angular, and Spring boot

Hamdi Bouallague

5 min readApr 19, 2021

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 :

Testing

Hire a Stripe certified expert or use a prebuilt solution created by one of our verified partners (no code required)…

stripe.com

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