Angular 16 Stripe Card Payment Gateway Example

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

Recommended Angular Tutorials

Leave a Comment