I'm in the middle of creating a form (dev) where you can enter a Cardknox Transaction API and it will give me a response back whether it went thru or not, , i'm trying to add toast notificatiom, so that when I hit submit it should pop up a notification that it was approved, or error message, etc. however, when I'm trying to hit submit it gives me the below error messages in the consoletoastify error
see my code below
server.js
const express = require("express");
const request = require("request");
const app = express();
const path = require("path");
app.use(express.static(path.join(__dirname, "server")));
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "/views"));
app.get("/gatewayjson", (req, res) => {
const xKey = req.query.xKey;
const xCommand = req.query.xCommand;
const xCardNum = req.query.xCardNum;
const xExp = req.query.xExp;
const xAmount = req.query.xAmount;
const xSoftwareName = "Cardknox";
const xSoftwareVersion = "2.1";
const xVersion = "5.0.0";
const body = JSON.stringify({
xKey: xKey,
xCommand: xCommand,
xCardNum: xCardNum,
xExp: xExp,
xSoftwareName: xSoftwareName,
xSoftwareVersion: xSoftwareVersion,
xVersion: xVersion,
xAmount: xAmount,
});
request(
{
url: "https://x1.cardknox.com/gatewayjson",
method: "POST",
body: body,
},
(error, response, body) => {
if (error) {
console.log(error);
} else {
console.log(body);
const responseObject = JSON.parse(body);
const xRef = responseObject.xRef;
res.render("template", { xRef: xRef });
}
}
);
});
app.listen(3060, () => {
console.log("Server listening on port 3060");
});
template.ejs
<%- include('partials/head') %>
<body>
<script src="toastify.js"></script>
<form
action="/gatewayjson"
method="get"
onsubmit="showNotification('<%= xRef %>')"
>
<label for="xKey">Cardknox Key:</label><br />
<input type="text" id="xKey" name="xKey" /><br />
<label for="xCommand">Command:</label><br />
<input type="text" id="xCommand" name="xCommand" /><br />
<label for="xCardNum">Card Number:</label><br />
<input type="text" id="xCardNum" name="xCardNum" /><br />
<label for="xExp">Expiration Date:</label><br />
<input type="text" id="xExp" name="xExp" /><br />
<label for="xAmount">Amount:</label><br />
<input type="text" id="xAmount" name="xAmount" /><br /><br />
<input type="submit" value="Submit" />
</form>
toastify.js
function checkRequiredFields() {
const requiredFields = document.querySelectorAll("[required]");
for (let i = 0; i < requiredFields.length; i++) {
if (!requiredFields[i].value) {
Toastify({
text: "Please fill in all the required fields",
duration: 10000,
close: true,
gravity: "top",
position: "left",
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
stopOnFocus: true,
}).showToast();
return false;
}
}
return true;
}
function showNotification(xRef) {
if (xRef === "") {
Toastify({
text: "Error: xRef is missing",
duration: 10000,
close: true,
gravity: "top", // `top` or `bottom`
position: "left", // `left`, `center` or `right`
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
stopOnFocus: true, // Prevents dismissing of toast on hover
}).showToast();
} else {
Toastify({
text: "Transaction Approved with xRef: " + xRef,
duration: 10000,
close: true,
gravity: "top",
position: "left",
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
stopOnFocus: true,
}).showToast();
}
}
please let me know what's wrong here, thanks
