Angular 14 Stripe card payment gateway; In this tutorial, you will learn how to integrate stripe card payment gateway in the angular 14 apps.
Note that, Stripe allows us to easily accept and manage payments online. On the other hand, Angular is gathering more and more popularity.
Angular Stripe Card Payment Gateway Example
Use the following steps to integrate stripe payment gateway in angular 14 apps; as follows:
- Create Angular Application
- Get Stripe Publishable Key
- Update Typescript File
- Update Angular HTML File
- Run Development Server
Create Angular Application
Use the following command to install a new angular application, but make sure have angular CLI installed on our system.
ng new angualr-stripe-example
Next, move inside the project root:
cd angualr-stripe-example
Get Stripe Publishable Key
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:
- Head over to Stripe website.
- Register to create a stripe developer account.
- Click on the “Get your test API keys” section.
- Copy publishable keys from stripe dashboard.
Update Typescript File
Now add 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: 'pk_test_51H7bbSE2RcKvfXD4DZhu',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken)
alert('Stripe token generated!');
}
});
paymentHandler.open({
name: 'Positronx',
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
Add the following html code in app.component.html:
<div class="container">
<h2 class="mt-5 mb-4">Angular Stripe Checkout Example</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
The above command manifest the angular stripe app on the browser on the following URL:
http://localhost:4200
Recommended Angular Tutorials
