IONIC post method is returning undefined value - node.js

Question

ERROR MESSAGE
I tested the node js post on postman and it worked. However, when I made use of ionic serve, it will show the error as shown in the image above. This error occurred when I call the makePayment() function in the stripe.page.ts file. The data I retrieved through this.checkout.makePayment in the makePayment() function returns undefined. I am guessing that the issue is probably my node js isn't being triggered when I use ionic serve. Is there a way to solve this?
THIS IS MY checkout.service.ts FILE
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class CheckoutService {
constructor(private http: HttpClient) { }
makePayment(stripeToken: any): Observable<any>{
const url = "http://localhost:5040/checkout"
return this.http.post<any>(url,{token:stripeToken})
}
}
THIS IS MY index.js FILE
const express = require("express");
const bodyparser = require('body-parser')
const app = express();
app.use(bodyparser.urlencoded({ extended: false }))
app.use(bodyparser.json())
const stripe = require("stripe")("###SECRETKEY###");
const cors = require('cors')
app.use(cors())
app.post('/checkout', function(req, res) {
try {
console.log(req.body);
token = req.body.token
const customer = stripe.customers
.create({
email: "cycoplayz#gmail.com",
source: token.id
})
.then((customer) => {
console.log(customer);
return stripe.charges.create({
amount: 1000,
description: "Test Purchase using express and Node",
currency: "USD",
customer: customer.id,
});
})
.then((charge) => {
console.log(charge);
res.json({
data:"success"
})
})
.catch((err) => {
res.json({
data: "failure",
});
});
return true;
} catch (error) {
return false;
}
})
app.listen(5040, () => {
console.log("App is listening on Port 5040")
})
THIS IS MY stripe.page.ts FILE
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { Loan } from '../shared/loan';
import { LoanService } from '../shared/loan.service';
import { ChargeInfo } from '../shared/models/chargeinfo';
import { CheckoutService } from '../shared/services/checkout.service';
#Component({
selector: 'app-stripe',
templateUrl: './stripe.page.html',
styleUrls: ['./stripe.page.scss'],
})
export class StripePage implements OnInit {
paymentHandler: any = null;
success: boolean = false
failure:boolean = false
loan: Loan;
loanid: string;
reason: string;
amount: number;
payment: number;
charged: ChargeInfo[] = [];
constructor(private checkout: CheckoutService, private route: ActivatedRoute, private
loanService: LoanService) {
this.loanid = this.route.snapshot.params.id
this.loanService.getChargesById(this.loanid)
.then(data =>{
this.reason = data.charges[0].reason;
this.amount = data.charges[0].amount;
})
}
ngOnInit() {
this.invokeStripe();
}
makePayment(amount: number) {
const paymentstripe = (stripeToken: any) => {
try{
this.checkout.makePayment(stripeToken).subscribe((data: any) => {
console.log(data);
if (data.data === "success") {
this.success = true
}
else {
this.failure = true
}
});
}
catch(err){
console.log(err);
console.log("hi");
}
};
const paymentHandler = (<any>window).StripeCheckout.configure({
key: '###PUBLISHABLE KEY###',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken);
console.log(this.checkout.makePayment);
console.log(this.checkout.omg)
paymentstripe(stripeToken);
},
});
paymentHandler.open({
name: 'CHARGES',
description: this.reason,
amount: this.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: '###PUBLISHABLE KEY###',
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken);
},
});
};
window.document.body.appendChild(script);
}
}
}