Stripe card payment gateway in angular 11/12 app. In this tutorial, you will learn how to integrate stripe card payment gateway in angular 11 app.
And this tutorial guide you step by step on how to integrate stripe card checkout payment gateway in angular 11/12 app.
Note that, 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 card payment gateway in the Angular 11/12 application. Stripe payment gateway integration with the angular 11 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 11/12 application without additional Angular 8 library for Stripe payment gateway.
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, you need to add a stripe checkout script which will highlight the global variable stripecheckout.
you have two ways to load this JS.
In the first method you need to add the script tag to the index.html file.
<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 you 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 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
});
}
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>
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 = (<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
Running application:
Run the application using ng serve --o and you should see three payment button, click on any one will appear stripe payment popup. Congrats!! See, it was easy.
Conclusion
In this angular 11 stripe payment gateway integration tutorial, you have learned how to integrate stripe payment gateway in angular application.
