Stripe Payment Gateway In Angular

The Code Points September 25, 2022 0

In this article, we will learn how to implement Stripe payment in an angular application.

So, let's start with the implementation

First, we need to create a new angular application using the following command in the terminal.

ng new angular-stripe-payment

Now, we required a script checkout JS add the following code under the index.html file.

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

Now, Add the following code under the app.component.html file.

<label>Amount: ${{amount}}</label>
<br />
<button (click)="onCheckout()">Pay</button>
<br />
<span>{{token}}</span>

Now, We also gave the button a click handler. The component onCheckout() method will be called as soon as the user presses the button.

Add the following code under the app.component.ts file.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'stipe-angular';
  amount: number = 50;
  token: any;
  onCheckout() {
    var handler = (<any>window).StripeCheckout.configure({
      key: '<your Publishable key>',
      locale: 'auto',
      token: (token: any) => {
        this.token = `token : ${token.id}`;
      }
    });
    handler.open({
      name: 'The Code Hubs',
      description: 'How to integrate with Stripe checkout',
      amount: this.amount * 100
    });
  }
}

When a user hits a button, the onCheckout() method is called, which shows our Stripe checkout pop-up.

The user's card-related token will be returned by the token callback that we pass along with the handle configuration object. On the server side, this token is usable.

Use the card number 4242 4242 4242 4242 with any future date and any three-digit number for the CVC to test the payment gateway system.

Click here to read more about the testing card specifics.

The Stripe.js integration guide contains more information.

Now, run the application using the ng serve command into the terminal and see the browser screen we are able to show the carousel slider and easily move to the next and previous slide.

Conclusion

In this article, we learned how to implement Stripe payment in an angular application.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.