Angular 14 Stripe Card Payment Gateway Example

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