Angular 16 Stripe card payment gateway; Through this tutorial, i am going to show you how to implement stripe card payment gateway in the Angular 16 apps.
Angular 16 Stripe Card Payment Gateway Example
Follow the below given steps to implement stripe payment gateway in Angular 16 apps:
- Create Angular Application
- Get Stripe Publishable Key
- Update Typescript File
- Update Angular HTML File
- Run Development Server
Create Angular Application
Run the following command on command prompt to install a new angular application:
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
Run the following command on command prompt to start angular stripe payment gateway app:
ng serve --open
The above command manifest the angular stripe app on the browser on the following URL:
http://localhost:4200