How to Integrate Stripe Card Checkout Payment Gateway in Angular 12

Last updated on: by Editorial Team
Throughout this comprehensive Angular 12 Stripe checkout payment gateway example tutorial, you will find out the simple and easy method of integrating stripe card payment gateway in angular application.

Implementing a stripe card checkout payment gateway in the angular application is exorbitantly effortless. Through this immaculate tutorial, we would like to share direct method to handle online payments in the angular app.

Stripe is a profound financial service and software company which is situated in San Francisco, California and Dublin, Ireland. With the help of stripe, you can make payments online. Its payment processing services are specially engineered for e-commerce websites and mobile applications.

Regardless of numerous packages available online for handling stripe payments in angular, we will use drastically easy method for stipe integration in angular.

Angular Stripe Card Payment Gateway Example

  • Create Angular Application
  • Get Stripe Publishable Key
  • Update Typescript File
  • Update Angular HTML File
  • Run Development Server

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:

  • 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.
pk_test_51H7bbSE2RcKvfXD4DZhu

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: '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

Place the given 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

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

http://localhost:4200

How to Integrate Stripe Card Checkout Payment Gateway in Angular

Here are the test card details that you can enter into the angular stripe form for making payments through the card.

NumberBrandCVCDate
4242424242424242VisaAny 3 digitsAny future date
4000056655665556Visa (debit)Any 3 digitsAny future date
5555555555554444MastercardAny 3 digitsAny future date
2223003122003222Mastercard (2-series)Any 3 digitsAny future date
5200828282828210Mastercard (debit)Any 3 digitsAny future date
5105105105105100Mastercard (prepaid)Any 3 digitsAny future date
378282246310005American ExpressAny 4 digitsAny future date
371449635398431American ExpressAny 4 digitsAny future date
6011111111111117DiscoverAny 3 digitsAny future date
6011000990139424DiscoverAny 3 digitsAny future date
3056930009020004Diners ClubAny 3 digitsAny future date
36227206271667Diners Club (14 digit card)Any 3 digitsAny future date
3566002020360505JCBAny 3 digitsAny future date
6200000000000005UnionPayAny 3 digitsAny future date

Conclusion

We have completed this tutorial, and i reckon from now on you will be able to implement stripe payment gateway in the angular app without getting stuck.