Include Stripe in Angular project

I am working on a website which uses angular for client and django for backend and I want to include stripe for payments. To configure stripe on the backend I have a microservice which runs on docker and accepts the following requests:

• one for creating a stripe customer

• another one for creating a payment

I configured stripe on the client using the provided form as follows:

export class PaymentComponent implements OnInit {

paymentHandler:any = null;

constructor(private checkoutService: CheckoutService) { }

ngOnInit() {
this.invokeStripe();
}

initializePayment(amount: number) {
const paymentHandler = (<any>window).StripeCheckout.configure({
key: 'pk_test_51MKU1wDo0NxQ0glB5HRAxUsR9MsY24POw3YHwIXnoMyFRyJ3cAV6FaErUeuEiWkGuWgAOoB3ILWXTgHA1CE9LTFr00WOT5U5vJ',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken);
alert('Stripe token generated!');
paymentStripe(stripeToken);
}
});

const paymentStripe = (stripeToken: any) => {
this.checkoutService.makePayment(stripeToken).subscribe((data:any) => {
console.log(data)
})
}

paymentHandler.open({
name: 'Card Details',
description: 'Introduce the information from your card',
amount: amount * 100
});
}

invokeStripe() {
if(!window.document.getElementById('stripe-script')) {
const script = window.document.createElement("script");
script.id = "stripe-script";
script.type = "text/javascript";
script.src = "https://checkout.stripe.com/checkout.js";
script.onload = () => {
this.paymentHandler = (<any>window).StripeCheckout.configure({
key: 'pk_test_51MKU1wDo0NxQ0glB5HRAxUsR9MsY24POw3YHwIXnoMyFRyJ3cAV6FaErUeuEiWkGuWgAOoB3ILWXTgHA1CE9LTFr00WOT5U5vJ',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken)
alert('Payment has been successfull!');
}
});
}
window.document.body.appendChild(script);
}
}

}


The makePayment method makes a request to the django server sending the stripe token.

From the server I need the above requests to the microservice.

My question is why do I need the configurations from the server as long as all I have to do to perform a payment is to make a request to the microservice? And where should I use the token.

I have also read about webhooks, but I don't really understand the concept and how to use this in my situation.

Also, do I need to test everything with Angular cli? And why?

Thank you in advance!

Continue reading...