In this tutorial, you will learn how to quickly integrate Stripe checkout payment gateway in Angular application through an example tutorial. We will discuss various configurations and methods to add one of the most popular payment gateways into your app.
This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12
Thinking about adding a payment gateway, seems a cumbersome job. But integrating the reputed and reliable payment gateway like Stripe is very easy and straightforward into the Angular application.
Having a payment solution is very common these days when everything is available to buy online. Stripe is a financial oriented service provider, which allows different types of payment solutions around the globe.
Let’s go ahead and start the integration of Stripe payment gateways in our Angular app.
How to Integrate Stripe Payment Gateway in Angular?
Follow these quick steps to add Stripe to the Angular app.
- Step 1 – Setup Angular Application
- Step 2 – Fetch Stripe API Public Key
- Step 3 – Update Component Class
- Step 4 – Update Template HTML File
- Step 5 – Run Application
Step 1 – Setup Angular Application
To begin with, let’s set up a new Angular application. Open the terminal window and execute the following ng command. Make sure you have Angular CLI installed.
$ ng new angualr-stripe-payment-app
Move inside the application directory
$ cd angualr-stripe-payment-app
Step 2 – Fetch Stripe API Public Key
Before starting the Stripe integration, you need to have a public stripe key. After that we can continue the integration part.
Let’s follow these steps to get Strip keys:
- Visit the Stripe portal.
- Create a Stripe developer account, then log in.
- On Dashboard, click on the “Get your test API keys” and copy the Publishable key
Step 3 – Update Component Class
Now, open the app.component.ts file and update the class as shown below:
Step 4 – Update Template HTML File
Next, update the HTML template with payment controls. Open the app.component.html file and update it with the following template HTML.
<div> <h2>Angular Stripe Checkout Page</h2> <div> <button (click)="initializePayment(2)" >Paymant of $2</button> </div> <div> <button (click)="initializePayment(25)" >Payment $25</button> </div> <div> <button (click)="initializePayment(35)" >Payment of $35</button> </div> </div>
Step 5 – Run Application
Thereafter implementing the above changes, test the Stripe payment gateway. Run the application by hitting the below command:
$ ng serve --open --ssl true
--ssl true will open the app on a secure URL. If asked you can allow the app to open at the following URL:
Step 6 – Test Card Data
You can try adding the following test card numbers provided by Stripe for development purposes.
4242424242424242: Succeeds and immediately processes the payment.
4000000000009995: Always fails with a decline code of insufficient_funds.
4000002500003155: Requires authentication, which in this integration will fail with a decline code of authentication_not_handled.
CVV: Any 3 digit number
Date: Any future date.
We have successfully integrated the Stripe Checkout Payment gateway in the Angular application in quick steps.