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';
@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