Site Admin
Site Admin Founder of MeaningArticles
4618 Views

Angular 12 Stripe Payment Gateway integration example

Hello dev.

This articles Through comprehensive Angular 12 Stripe checkout payment gateway learning, you will discover the simple and easy technique of integrating stripe card payment gateway in angular software.

imposing a stripe card checkout payment gateway in the angular software is exorbitantly effortless. through this immaculate educational, we would really like to share direct method to handle online payments in the angular app.

With the help of stripe, you can make payment online. Its payment processing services are in particular engineered for e-commerce websites and mobile app.

Regardless of severa packages to be had online for coping with stripe payments in angular, we will use considerably smooth method for stipe integration in angular.


Create Angular Application

The first step requires installing a new angular application, but make sure you have angular CLI installed on your system.

Having said that, you can skip this step if the app is already installed:

ng new angualr-stripe-example

Next, move inside the project root:

cd angualr-stripe-example


Get Stripe Publishable Key

Now, you have to 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:

If you don’t have secret publisher key. So, first of all, you need to REGISTER and get secret publisher key and secret key.

If you have already registered with stripe, so click this link and login on stripe and get the secret publisher key and the secret key LOGIN.

Get secret publisher and key on stripe dashboard looks like:


Update Typescript File

You have to open and update 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: 'your key',
      locale: 'auto',
      token: function (stripeToken: any) {
        console.log(stripeToken)
        alert('Stripe token generated!');
      }
    });
  
    paymentHandler.open({
      name: 'MeaningArticles',
      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

Place the given code in app.component.html:

<div class="container">
  <h2 class="mt-5 mb-4">Angular Stripe payment Example - meaningarticles.com</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

Above command manifest the angular stripe app on the browser on the following URL:

http://localhost:4200

The test card details that you can enter into the angular stripe form for making payments through the card is HERE.

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.