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 :
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.
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 :
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 :
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 :
Hire a Stripe certified expert or use a prebuilt solution created by one of our verified partners (no code required)…
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 :
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.
Let’s come back to the angular application and generate a new component :
ng g c subscription
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 :
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:
This project was generated with Angular CLI version 9.1.7. Run ng serve for a dev server. Navigate to…
Contribute to HamdiBouallegue/stripe-spring-boot development by creating an account on GitHub.
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 😄.