Notes

import { Component } from '@angular/core';
import {loadStripe} from '@stripe/stripe-js';
import { Stripe } from '@stripe/stripe-js';

@Component({
selector: 'app-stripe',
templateUrl: './stripe.component.html',
styleUrls: ['./stripe.component.scss']
})


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

this.loadStripe();
}

pay(amount: any) {

var handler = (<any>window).StripeCheckout.configure({
key: 'pk_test_51Mn18bSF5Bhh2uVr1gsTXJdTW45wWRy4BumyTiVde8cF436gQbKIUBzf1iGECnBDARZXdWqNMGCwRslSlKhYaKEk00mRdyK20b',
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: 'ShipKart',
description: 'Your one stop Shopping solution',
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_51Mn18bSF5Bhh2uVr1gsTXJdTW45wWRy4BumyTiVde8cF436gQbKIUBzf1iGECnBDARZXdWqNMGCwRslSlKhYaKEk00mRdyK20b',
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);
}
}
}





################################
<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>