Introduction

In this article, we will learn how to implement Stripe payment gateway in Angular

Let’s begin.

First, we required a checkout script to add the following line index.html

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

Next step, we need to add a button to our component template:

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

We also added a click handler to the button. Once the user clicks on the button, the onCheckout() method defined in the component will be invoked.

Now let’s take a look at the component implementation:

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
    });

  }
}

 

Once the user clicks on the button onCheckout() method is invoked, This will open our stripe checkout pop-up.

The token callback that we pass with the handle configuration object will return the token associated with the user’s card. This token can be used on the server-side.

To test things out, use card number 4242 4242 4242 4242 with any future date and any 3-digit number for the CVC.

You can read more about the testing card details click here.

You can read more about the integration of Stripe.js in Stripe’s guide.

Output: