Angular 15/14 Stripe Card Payment Gateway Example

Angular 15/14 Stripe card payment gateway; Through this tutorial, i am going to show you how to implement stripe card payment gateway in the Angular 15/14 apps.

Angular 15/14 Stripe Card Payment Gateway Example

Follow the below given steps to implement stripe payment gateway in Angular 15/14 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';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {
  paymentHandler:any = null;
  constructor() { }
  ngOnInit() {
  makePayment(amount) {
    const paymentHandler = (<any>window).StripeCheckout.configure({
      key: 'pk_test_51H7bbSE2RcKvfXD4DZhu',
      locale: 'auto',
      token: function (stripeToken: any) {
        alert('Stripe token generated!');
      name: 'Positronx',
      description: '3 widgets',
      amount: amount * 100
  invokeStripe() {
    if(!window.document.getElementById('stripe-script')) {
      const script = window.document.createElement("script"); = "stripe-script";
      script.type = "text/javascript";
      script.src = "";
      script.onload = () => {
        this.paymentHandler = (<any>window).StripeCheckout.configure({
          key: 'pk_test_51H7bbSE2RcKvfXD4DZhu',
          locale: 'auto',
          token: function (stripeToken: any) {
            alert('Payment has been successfull!');

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 class="col-md-5 mb-2">
    <button (click)="makePayment(25)" class="btn btn-primary btn-block">Pay $25</button>
  <div class="col-md-5">
    <button (click)="makePayment(35)" class="btn btn-success btn-block">Pay $35</button>

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:


Recommended Angular Tutorials

Leave a Comment