Angular 11 Stripe Payment Gateway Integration Tutorial Example

How to integrate Stripe credit card payment gateway in angular 11 application? Well, in this step by step tutorial, we will explain to you about the angular 11 stripe payment gateway without using any third-party package.

Stripe is a popular online tool which makes an online transaction for web and mobile application easy. You can implement it using the external packages; however, this quick tutorial gives you the direct and simple method to add a stripe payment gateway in angular.

Angular 11 Stripe Card Checkout Payment Gateway Integration Example

• Step 1: Organize Angular Environment
• Step 2: Crete Stripe Publishable Keys
• Step 3: Implement Stripe Card Checkout Payment Gateway
• Step 4: Create Payment Form
• Step 5: Start Angular App

Organize Angular Environment

Before we start implementing stripe payment gateway in angular, we must ensure the latest angular CLI is configured on our development machine.

You can evoke the following command to install Angular CLI:

npm install -g @angular/cli

Once the angular command line interface installed, then you can install the new angular app with just simple command:

ng new angular-demo

Using the below command, you can enter into the project’s root:

cd angular-demo

Crete Stripe Publishable Keys

Let us ascertain the easy method to get the stripe publishable keys.

Firstly, head over to the www.stripe.com website and make sure to sign-in.

Right after sign into the app, you enter inside the stripe dashboard; on the left side, you need to click on the Developers link; afterward, click on the API Keys.

After clicking on the API Keys, you navigated to the API Keys screen, here the Publishable key, and secret key manifest. You have to click on the reveal live key token to show the secret.

Implement Stripe Card Checkout Payment Gateway

In the next step, we need to create custom functions using the stripe key to make the credit card payment checkout system, so get inside the app.component.ts file and add the following code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  strikeCheckout:any = null;

  constructor() { }

  ngOnInit() {
    this.stripePaymentGateway();
  }
  
  checkout(amount) {
    const strikeCheckout = (<any>window).StripeCheckout.configure({
      key: 'pk_test_12239293949ksdfksdjkfj1232q3jkjssdfjk',
      locale: 'auto',
      token: function (stripeToken: any) {
        console.log(stripeToken)
        alert('Stripe token generated!');
      }
    });
  
    strikeCheckout.open({
      name: 'RemoteStack',
      description: 'Payment widgets',
      amount: amount * 100
    });
  }
  
  stripePaymentGateway() {
    if(!window.document.getElementById('stripe-script')) {
      const scr = window.document.createElement("script");
      scr.id = "stripe-script";
      scr.type = "text/javascript";
      scr.src = "https://checkout.stripe.com/checkout.js";

      scr.onload = () => {
        this.strikeCheckout = (<any>window).StripeCheckout.configure({
          key: 'pk_test_12239293949ksdfksdjkfj1232q3jkjssdfjk',
          locale: 'auto',
          token: function (token: any) {
            console.log(token)
            alert('Payment via stripe successfull!');
          }
        });
      }
        
      window.document.body.appendChild(scr);
    }
  }

}

Make Payment Request

Let us create three buttons and attach checkout() method with click event and the respective amount associated to it.

Head over to app.component.html file and update the following code:

<div class="container">

  <h2 class="mb-5">Angular Stripe Credit Card Payment Gateway Example</h2>

  <div class="col-md-4 mb-3">
    <button (click)="checkout(20)" class="btn btn-primary btn-block">Pay $20</button>
  </div>
  <div class="col-md-4 mb-3">
    <button (click)="checkout(30)" class="btn btn-primary btn-block">Pay $30</button>
  </div>
  <div class="col-md-4">
    <button (click)="checkout(40)" class="btn btn-primary btn-block">Pay $40</button>
  </div>
</div>

Start Angular App

Let us build the angular app and serve it using the ng serve command, open terminal, and invoke the command:

ng serve

Use the suggested url on the browser’s address bar to test the angular stripe payment gateway app:

http://localhost:4200

Use the following credit card details to make dummy payments:

Conclusion

Stripe is an excellent tool for making payments online for international transaction, similarly angular is a profound platform which is getting popularity recently. In this tutorial, we combined both unique tools to solve the problem of making payments online.

In this tutorial, we have learned how to implement a stripe card payment gateway in the angular app from scratch using the stripe keys. Most importantly, we didn’t use any package to solve this problem; instead, we focused on a direct and straightforward method.