Angular 8 – Stripe Payment Gateway Example

Angular 8 – Stripe Payment Gateway Example

Angular 8 – Stripe Payment Gateway Example. Stripe allows us to easily accept and manage payments online. On the other hand, Angular is gathering more and more popularity. In this tutorial, we will learn Stripe Payment Gateway in the Angular 8 application

Stripe payment gateway integration with the angular 8 application is very easy. There are lots of packages available for the stripe and angular but, we are going to show you, how easily you can handle stripe payment gateway in Angular 8 application without additional Angular 8 library for Stripe payment gateway.

Before start Stripe integration in Angular 8. We need a Angular 8 Project. If you don’t know how to create a new angular 8 project. Follow this tutorial.

Stripe offer two way to interact with Stripe server using JS.

  • Default Stripe form.
  • Custom Stripe Form.

Default Stripe Form gives us the easiest and safest way to create a token.

So, let’s start with ‘Default Stripe Form’

First of all, we need to add a stripe checkout script which will highlight the global variable stripecheckout.

<script src="https://checkout.stripe.com/checkout.js"></script>

The second way to include it via component.

I will prefer the second method because in this method the stripe will load when we really need it.

Open the app.component.ts file and add the below method on it

loadStripe() {

    if(!window.document.getElementById('stripe-script')) {
      var s = window.document.createElement("script");
      s.id = "stripe-script";
      s.type = "text/javascript";
      s.src = "https://checkout.stripe.com/checkout.js";
      window.document.body.appendChild(s);
    }
}

Next, Call the above method from ngOnInit method like below

ngOnInit() {
    this.loadStripe();
}

The loadStripe the method will add the script dynamically when the component will load.

Next, Create a new method calledpaywhich will open the stripe payment form.

pay(amount) {   

    var handler = (window).StripeCheckout.configure({
      key: 'pk_test_aeUUjYYcx4XNfKVW60pmHTtI',
      locale: 'auto',
      token: function (token: any) {
        // You can access the token ID with `token.id`.
        // Get the token ID to your server-side code for use.
        console.log(token)
        alert('Token Created!!');
      }
    });

    handler.open({
      name: 'Demo Site',
      description: '2 widgets',
      amount: amount * 100
    });

}

Next, We need to add the button to our component’s template. Open the app.component.html file and put the below HTMLWe have two ways to load this JS.

In the first method we need to add the script tag to theindex.htmlfile.


  ## Stripe Checkout



      Pay $20


      Pay $30


      Pay $50



      Try it out using the test card number **4242 4242 4242 4242**, a random three-digit CVC number, any expiration date in the future, and a random five-digit U.S. ZIP code.


After the above changes our app.component.ts file will looks like this

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


  constructor() { }
  handler:any = null;
  ngOnInit() {

    this.loadStripe();
  }

  pay(amount) {   

    var handler = (window).StripeCheckout.configure({
      key: 'pk_test_aeUUjYYcx4XNfKVW60pmHTtI',
      locale: 'auto',
      token: function (token: any) {
        // You can access the token ID with `token.id`.
        // Get the token ID to your server-side code for use.
        console.log(token)
        alert('Token Created!!');
      }
    });

    handler.open({
      name: 'Demo Site',
      description: '2 widgets',
      amount: amount * 100
    });

  }

  loadStripe() {

    if(!window.document.getElementById('stripe-script')) {
      var s = window.document.createElement("script");
      s.id = "stripe-script";
      s.type = "text/javascript";
      s.src = "https://checkout.stripe.com/checkout.js";
      s.onload = () => {
        this.handler = (window).StripeCheckout.configure({
          key: 'pk_test_aeUUjYYcx4XNfKVW60pmHTtI',
          locale: 'auto',
          token: function (token: any) {
            // You can access the token ID with `token.id`.
            // Get the token ID to your server-side code for use.
            console.log(token)
            alert('Payment Success!!');
          }
        });
      }

      window.document.body.appendChild(s);
    }
  }
}

You have successfully integrated the strip with angular. With the above integration, you will be able to generate tokens. Now you need to code some server-side code to catch this payment.

For server-side payment capture, visit https://stripe.com/docs/api/charges/create

Running application:

Run the application usingng serve --oand you should see three payment button, click on any one will appear stripe payment popup. Congrats!! See, it was easy.

Our Application will look like this

Live Demo

Implementing Feature Flags in an Angular

Angular Material Table With Paging, Sorting And Filtering

Reactive Template-Driven forms with Angular

Reactive form programming in Angular 7

NgRx Testing - The Complete Guide

Listen Changes In Reactive Form Controls Using valueChanges In Angular

7 Ways to Make Your Angular App More Accessible

Angular RxJS: Observables, Observers and Operators Introduction

The Pros and Cons of Angular Development

angular angular-js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?