Rendering error referenceerror: C:\users\mekstein\documents\cardknox reporting api\views\template.ejs:27

See more:

Javascript

I created a form that should be able to submit a transaction (using API Key) and also run a report based on the API key that has been put in, I'm trying to link 2 ejs files (main and the reporting files) together but this is what I'm getting on the browser xCommand error

It's already defined in my server.js file,

see below server.js, template.ejs report.ejs select.js

What I have tried:

server.js

  1  const express = require("express");
  2  const request = require("request");
  3  
  4  const app = express();
  5  const path = require("path");
  6  
  7  app.use(express.static(path.join(__dirname, "public")));
  8  app.set("view engine", "ejs");
  9  app.set("views", path.join(__dirname, "/views"));
 10  
 11  app.get("/gatewayjson", (req, res) => {
 12    const xKey = req.query.xKey;
 13    const xCommand = req.query.xCommand;
 14    const xCardNum = req.query.xCardNum;
 15    const xExp = req.query.xExp;
 16    const xAmount = req.query.xAmount;
 17    const xSoftwareName = "Cardknox";
 18    const xSoftwareVersion = "2.1";
 19    const xVersion = "5.0.0";
 20  
 21    const body = JSON.stringify({
 22      xKey: xKey,
 23      xCommand: xCommand,
 24      xCardNum: xCardNum,
 25      xExp: xExp,
 26      xSoftwareName: xSoftwareName,
 27      xSoftwareVersion: xSoftwareVersion,
 28      xVersion: xVersion,
 29      xAmount: xAmount,
 30    });
 31  
 32    request(
 33      {
 34        url: "https://x1.cardknox.com/gatewayjson",
 35        method: "POST",
 36        body: body,
 37      },
 38      (error, response, body) => {
 39        if (error) {
 40          console.log(error);
 41        } else {
 42          console.log(body);
 43  
 44          const responseObject = JSON.parse(body);
 45          const xAuthCode = responseObject.xAuthCode;
 46          const xRefNum = responseObject.xRefNum;
 47          const xStatus = responseObject.xStatus;
 48          const xError = responseObject.xError;
 49  
 50          if (xError) {
 51            res.render("template", {
 52              xError: xError,
 53              xRefNum: xRefNum,
 54            });
 55          } else {
 56            res.render("template", {
 57              xKey: xKey,
 58              xAuthCode: xAuthCode,
 59              xRefNum: xRefNum,
 60              xStatus: xStatus,
 61              xCommand: xCommand,
 62            });
 63          }
 64        }
 65      }
 66    );
 67  });
 68  
 69  app.get("/reportjson", (req, res) => {
 70    const xKey = req.query.xKey;
 71    const xCommand = req.query.xCommand;
 72    const xVersion = "5.0.0";
 73    const xSoftwareName = "Cardknox";
 74    const xSoftwareVersion = "2.1";
 75    const xBeginDate = req.query.xBeginDate;
 76    const xEndDate = req.query.xEndDate;
 77  
 78    const body = JSON.stringify({
 79      xKey: xKey,
 80      xCommand: xCommand,
 81      xVersion: xVersion,
 82      xSoftwareName: xSoftwareName,
 83      xSoftwareVersion: xSoftwareVersion,
 84      xBeginDate: xBeginDate,
 85      xEndDate: xEndDate,
 86    });
 87  
 88    request(
 89      {
 90        url: "https://x1.cardknox.com/reportjson",
 91        method: "POST",
 92        body: body,
 93      },
 94      (error, response, body) => {
 95        if (error) {
 96          console.log(error);
 97        } else {
 98          console.log(body);
 99  
100          // Parse the response body
101          const responseObject = JSON.parse(body);
102  
103          // Extract the relevant fields from the response
104          const xAmount = responseObject.xAmount;
105          const xAuthAmount = responseObject.xAuthAmount;
106          const xCardType = responseObject.xCardType;
107          const xCommand = responseObject.xCommand;
108          const xEnteredDate = responseObject.xEnteredDate;
109          const xExp = responseObject.xExp;
110          const xMaskedAccountNumber = responseObject.xMaskedAccountNumber;
111          const xMaskedCardnumber = responseObject.xMaskedCardnumber;
112          const xRefNum = responseObject.xRefNum;
113          const xRefNumCurrent = responseObject.xRefNumCurrent;
114          const xResponseError = responseObject.xResponseError;
115          const xResponseResult = responseObject.xResponseResult;
116          const xToken = responseObject.xToken;
117  
118          // Render the response fields in a template
119          res.render("report", {
120            xAmount: xAmount,
121            xAuthAmount: xAuthAmount,
122            xCardType: xCardType,
123            xCommand: xCommand,
124            xEnteredDate: xEnteredDate,
125            xExp: xExp,
126            xMaskedAccountNumber: xMaskedAccountNumber,
127            xMaskedCardnumber: xMaskedCardnumber,
128            xRefNum: xRefNum,
129            xRefNumCurrent: xRefNumCurrent,
130            xResponseError: xResponseError,
131            xResponseResult: xResponseResult,
132            xToken: xToken,
133          });
134        }
135      }
136    );
137  });
138  
139  app.listen(3060, () => {
140    console.log("Server listening on port 3060");
141  });

template.ejs

  1  <!DOCTYPE html>
  2  <html lang="en">
  3    <head>
  4      <meta charset="UTF-8" />
  5      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7  
  8      <link rel="stylesheet" href="template.css" />
  9  
 10      <title>Transaction API</title>
 11    </head>
 12    <body>
 13      <form id="payment-form">
 14        <label for="xKey">Cardknox Key:</label>
 15        <input type="text" id="xKey" name="xKey" />
 16        <label for="xCommand">Command:</label>
 17        <select id="xCommand" name="xCommand">
 18          <option value="cc:sale">cc:sale</option>
 19          <option value="Report:Approved">Report:Approved</option>
 20        </select>
 21        <div class="ccFieldsForm cardInfo">
 22          <label for="xCardNum">Card Number:</label>
 23          <input type="text" id="xCardNum" name="xCardNum" />
 24          <label for="xExp">Expiration Date:</label>
 25          <input type="text" id="xExp" name="xExp" />
 26        </div>
 27        <% if (xCommand === 'Report:Approved') { %> <%- include('report.ejs') %>
 28        <% } %>
 29        <div class="ccFieldsForm paymentInfo">
 30          <label for="xAmount">Amount:</label>
 31          <input type="text" id="xAmount" name="xAmount" />
 32        </div>
 33        <button type="submit">Submit</button>
 34      </form>
 35  
 36      <% if (typeof xAuthCode !== 'undefined') { %>
 37      <div id="success-message" style="display: block">
 38        Transaction processed successfully with approval code: <%= xAuthCode %>
 39        and reference number: <%= xRefNum %>.
 40      </div>
 41      <% } %> <% if (typeof xError !== 'undefined') { %>
 42      <div id="error-message"><%= xError %>: Ref Number <%= xRefNum %></div>
 43      <% } %>
 44  
 45      <script src="/select.js"></script>
 46      <script src="/modify.js"></script>
 47      <script src="/onchange.js" defer type="module"></script>
 48    </body>
 49  </html>

report.ejs

  1  <!DOCTYPE html>
  2  <html lang="en">
  3    <head>
  4      <meta charset="UTF-8" />
  5      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7      <title>Reporting API</title>
  8    </head>
  9    <body>
 10      <div id="reportFields" style="display: block">
 11        <label for="xBeginDate">Begin Date:</label>
 12        <input type="date" id="xBeginDate" name="xBeginDate" />
 13        <label for="xEndDate">End Date:</label>
 14        <input type="date" id="xEndDate" name="xEndDate" />
 15      </div>
 16  
 17      <% if (typeof xAuthCode !== 'undefined') { %>
 18      <table id="response-table">
 19        <tr>
 20          <th>Transaction ID (xRefNum)</th>
 21          <th>Amount (xAmount)</th>
 22          <th>Card Type (xCardType)</th>
 23          <th>Last 4 Digits(xCardLastFour)</th>
 24        </tr>
 25        <tr>
 26          <td><%= xCommand %></td>
 27          <td><%= xAmount %></td>
 28          <td><%= xCardType %></td>
 29          <td><%= xBeginDate %></td>
 30          <td><%= xEndDate %></td>
 31          <td><%= xCardLastFour %></td>
 32          <td><%= xRefNum %></td>
 33        </tr>
 34      </table>
 35      <% } %>
 36    </body>
 37  </html>`

select.js

  1  const xCommand = document.getElementById("xCommand");
  2  const xCardNum = document.getElementById("xCardNum");
  3  const xExp = document.getElementById("xExp");
  4  const xAmount = document.getElementById("xAmount");
  5  const labelCardNum = document.querySelector('label[for="xCardNum"]');
  6  const labelExp = document.querySelector('label[for="xExp"]');
  7  const labelAmount = document.querySelector('label[for="xAmount"]');
  8  const reportFields = document.getElementById("reportFields");
  9  
 10  xCommand.addEventListener("change", (event) => {
 11    event.preventDefault();
 12    const value = event.target.value;
 13  
 14    if (value === "Report:Approved") {
 15      // Hide the credit card, expiration date, and amount fields
 16      xCardNum.style.display = "none";
 17      xExp.style.display = "none";
 18      xAmount.style.display = "none";
 19      // Hide the labels for the credit card number, expiration date, and amount fields
 20      labelCardNum.style.display = "none";
 21      labelExp.style.display = "none";
 22      labelAmount.style.display = "none";
 23      // Show the report fields
 24      reportFields.style.display = "block";
 25    } else {
 26      // Show the credit card, expiration date, and amount fields
 27      xCardNum.style.display = "block";
 28      xExp.style.display = "block";
 29      xAmount.style.display = "block";
 30      // Show the labels for the credit card number, expiration date, and amount fields
 31      labelCardNum.style.display = "block";
 32      labelExp.style.display = "block";
 33      labelAmount.style.display = "block";
 34      // Hide the report fields
 35      reportFields.style.display = "none";
 36    }
 37  });