Hello dev.
This articles Through comprehensive Angular 12 Stripe checkout payment gateway learning, you will discover the simple and easy technique of integrating stripe card payment gateway in angular software.
imposing a stripe card checkout payment gateway in the angular software is exorbitantly effortless. through this immaculate educational, we would really like to share direct method to handle online payments in the angular app.
With the help of stripe, you can make payment online. Its payment processing services are in particular engineered for e-commerce websites and mobile app.
Regardless of severa packages to be had online for coping with stripe payments in angular, we will use considerably smooth method for stipe integration in angular.
Create Angular Application
The first step requires installing a new angular application, but make sure you have angular CLI installed on your system.
Having said that, you can skip this step if the app is already installed:
ng new angualr-stripe-example
Next, move inside the project root:
cd angualr-stripe-example
Get Stripe Publishable Key
Now, you have to create a stripe test account, stripe payment gateway integration requires to get publishable stripe keys, and later you will be using it to make the payments through stripe in angular typescript template:
If you don’t have secret publisher key. So, first of all, you need to REGISTER and get secret publisher key and secret key.
If you have already registered with stripe, so click this link and login on stripe and get the secret publisher key and the secret key LOGIN.
Get secret publisher and key on stripe dashboard looks like:
Update Typescript File
You have to open and update the following code in app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
paymentHandler:any = null;
constructor() { }
ngOnInit() {
this.invokeStripe();
}
makePayment(amount) {
const paymentHandler = (<any>window).StripeCheckout.configure({
key: 'your key',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken)
alert('Stripe token generated!');
}
});
paymentHandler.open({
name: 'MeaningArticles',
description: '3 widgets',
amount: amount * 100
});
}
invokeStripe() {
if(!window.document.getElementById('stripe-script')) {
const script = window.document.createElement("script");
script.id = "stripe-script";
script.type = "text/javascript";
script.src = "https://checkout.stripe.com/checkout.js";
script.onload = () => {
this.paymentHandler = (<any>window).StripeCheckout.configure({
key: 'pk_test_51H7bbSE2RcKvfXD4DZhu',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken)
alert('Payment has been successfull!');
}
});
}
window.document.body.appendChild(script);
}
}
}
Update Angular HTML File
Place the given code in app.component.html:
<div class="container">
<h2 class="mt-5 mb-4">Angular Stripe payment Example - meaningarticles.com</h2>
<div class="col-md-5 mb-2">
<button (click)="makePayment(15)" class="btn btn-danger btn-block">Pay $15</button>
</div>
<div class="col-md-5 mb-2">
<button (click)="makePayment(25)" class="btn btn-primary btn-block">Pay $25</button>
</div>
<div class="col-md-5">
<button (click)="makePayment(35)" class="btn btn-success btn-block">Pay $35</button>
</div>
</div>
Run Development Server
Finally, we have completed integrating stripe payment gateway in angular, now test the app:
ng serve --open
Above command manifest the angular stripe app on the browser on the following URL:
http://localhost:4200
The test card details that you can enter into the angular stripe form for making payments through the card is HERE.
i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.
