Add Stripe Card Checkout Payment Gateway in Angular 16

Throughout this comprehensive Angular 16 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 16 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: any) {
    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

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

Number	Brand	CVC	Date
4242424242424242	Visa	Any 3 digits	Any future date
4000056655665556	Visa (debit)	Any 3 digits	Any future date
5555555555554444	Mastercard	Any 3 digits	Any future date
2223003122003222	Mastercard (2-series)	Any 3 digits	Any future date
5200828282828210	Mastercard (debit)	Any 3 digits	Any future date
5105105105105100	Mastercard (prepaid)	Any 3 digits	Any future date
378282246310005	American Express	Any 4 digits	Any future date
371449635398431	American Express	Any 4 digits	Any future date
6011111111111117	Discover	Any 3 digits	Any future date
6011000990139424	Discover	Any 3 digits	Any future date
3056930009020004	Diners Club	Any 3 digits	Any future date
36227206271667	Diners Club (14 digit card)	Any 3 digits	Any future date
3566002020360505	JCB	Any 3 digits	Any future date
6200000000000005	UnionPay	Any 3 digits	Any 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.