How to integrate Stripe credit card payment gateway in angular 11 application? Well, in this step by step tutorial, we will explain to you about the angular 11 stripe payment gateway without using any third-party package.
Stripe is a popular online tool which makes an online transaction for web and mobile application easy. You can implement it using the external packages; however, this quick tutorial gives you the direct and simple method to add a stripe payment gateway in angular.
Angular 11 Stripe Card Checkout Payment Gateway Integration Example
- Step 1: Organize Angular Environment
- Step 2: Crete Stripe Publishable Keys
- Step 3: Implement Stripe Card Checkout Payment Gateway
- Step 4: Create Payment Form
- Step 5: Start Angular App
Organize Angular Environment
Before we start implementing stripe payment gateway in angular, we must ensure the latest angular CLI is configured on our development machine.
You can evoke the following command to install Angular CLI:
npm install -g @angular/cli
Once the angular command line interface installed, then you can install the new angular app with just simple command:
ng new angular-demo
Using the below command, you can enter into the project’s root:
Crete Stripe Publishable Keys
Let us ascertain the easy method to get the stripe publishable keys.
Firstly, head over to the www.stripe.com website and make sure to sign-in.
Right after sign into the app, you enter inside the stripe dashboard; on the left side, you need to click on the Developers link; afterward, click on the API Keys.
After clicking on the API Keys, you navigated to the API Keys screen, here the Publishable key, and secret key manifest. You have to click on the reveal live key token to show the secret.
Implement Stripe Card Checkout Payment Gateway
In the next step, we need to create custom functions using the stripe key to make the credit card payment checkout system, so get inside the app.component.ts file and add the following code:
Make Payment Request
Let us create three buttons and attach
checkout() method with click event and the respective amount associated to it.
Head over to app.component.html file and update the following code:
<div class="container"> <h2 class="mb-5">Angular Stripe Credit Card Payment Gateway Example</h2> <div class="col-md-4 mb-3"> <button (click)="checkout(20)" class="btn btn-primary btn-block">Pay $20</button> </div> <div class="col-md-4 mb-3"> <button (click)="checkout(30)" class="btn btn-primary btn-block">Pay $30</button> </div> <div class="col-md-4"> <button (click)="checkout(40)" class="btn btn-primary btn-block">Pay $40</button> </div> </div>
Start Angular App
Let us build the angular app and serve it using the ng serve command, open terminal, and invoke the command:
Use the suggested url on the browser’s address bar to test the angular stripe payment gateway app:
Use the following credit card details to make dummy payments:
|4000 0566 5566 5556||Random 3 digits||Future date|
|4242 4242 4242 4242||Random 3 digits||Future date|
Stripe is an excellent tool for making payments online for international transaction, similarly angular is a profound platform which is getting popularity recently. In this tutorial, we combined both unique tools to solve the problem of making payments online.
In this tutorial, we have learned how to implement a stripe card payment gateway in the angular app from scratch using the stripe keys. Most importantly, we didn’t use any package to solve this problem; instead, we focused on a direct and straightforward method.