Angular 12 Stripe Card Checkout Payment Gateway Integration

Stripe card checkout payment gateway in angular 12 app. In this tutorial, i am going to show you how do you integrate stripe card payment gateway in angular 12 app.

Stripe was founded in 2011 and is a payment gateway that lets you accept credit card payments (in person or online) by transferring money between your merchant account and a payment processor. In fact, it’s more of an end-to-end payment processor or virtual terminal.

Stripe card checkout payment gateway in the Angular 12 application is very easy. There are lots of packages available for the stripe and angular but, in this tutorial i going to show you, how easily you can handle stripe payment gateway in Angular 12 application without additional Angular 12 library for Stripe payment gateway.

Note that, Stripe allows us to easily accept and manage payments online. On the other hand, Angular is gathering more and more popularity.

Stripe Card Payment Gateway Integration in Angular 12

• Step 1 – Add Method on App.components.ts
• Step 2 – Add HTML Form App.components.html
• Step 3 – Complete Methods on App.components.ts File
• Step 4 – Start Angular Stripe App:

Step 1 – Add Method on App.components.ts

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 called pay, which will open the stripe payment form:

pay(amount) {    
 
    var handler = (<any>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
    });
 
}

Step 2 – Add HTML Form App.components.html

Next, you need to add the button to our component’s template. Open the app.component.html file and put the below HTML:

<div class="container mt-5">
  <h2>Stripe Checkout</h2>
  <div class="row mt-5">
    <div class="col-md-4">
      <button (click)="pay(20)" class="btn btn-primary btn-block">Pay $20</button>
    </div>
    <div class="col-md-4">
      <button (click)="pay(30)" class="btn btn-success btn-block">Pay $30</button>
    </div>
    <div class="col-md-4">
      <button (click)="pay(50)" class="btn btn-info btn-block">Pay $50</button>
    </div>    
  </div>
  <p class="mt-5">
      Try it out using the test card number <b>4242 4242 4242 4242</b>, a random three-digit CVC number, any expiration date in the future, and a random five-digit U.S. ZIP code.
  </p>
</div>

Step 3 – Complete Methods on App.components.ts File

After the above changes the 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 = (<any>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 = (<any>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

Step 4 – Start Angular Stripe App:

Execute this ng serve --o on terminal to start your angular app:

Conclusion

In this angular 12 stripe payment gateway integration tutorial, you have learned how to integrate stripe payment gateway in angular application.

Recommended Angular Tutorials