diff --git a/client/src/components/_test/card-payment-modal.component..jsx b/client/src/components/_test/card-payment-modal.component..jsx
deleted file mode 100644
index 5f0d9617b..000000000
--- a/client/src/components/_test/card-payment-modal.component..jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Modal } from "antd";
-import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { toggleModalVisible } from "../../redux/modals/modals.actions";
-import { selectCardPayment } from "../../redux/modals/modals.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import IntellipayTestPage from "./intellipay-test";
-
-const mapStateToProps = createStructuredSelector({
-  cardPaymentModal: selectCardPayment,
-  bodyshop: selectBodyshop,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
-});
-
-function CardPaymentModalComponent({
-  cardPaymentModal,
-  toggleModalVisible,
-  bodyshop,
-}) {
-  const { context, visible } = cardPaymentModal;
-
-  return (
-    <Modal
-      visible={visible}
-      onOk={() => toggleModalVisible()}
-      onCancel={() => toggleModalVisible()}
-      cancelButtonProps={{ style: { display: "none" } }}
-      width="90%"
-      destroyOnClose
-    >
-      <IntellipayTestPage bodyshop={bodyshop} context={context} />
-    </Modal>
-  );
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CardPaymentModalComponent);
diff --git a/client/src/components/_test/test.page.jsx b/client/src/components/_test/test.page.jsx
index b750e3873..524a41a45 100644
--- a/client/src/components/_test/test.page.jsx
+++ b/client/src/components/_test/test.page.jsx
@@ -3,7 +3,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setModalContext } from "../../redux/modals/modals.actions";
-import CardPaymentModalComponent from "./card-payment-modal.component.";
+import CardPaymentModalContainer from "../card-payment-modal/card-payment-modal.container.";
 
 const mapStateToProps = createStructuredSelector({});
 
@@ -15,13 +15,11 @@ const mapDispatchToProps = (dispatch) => ({
 function Test({ setCardPaymentContext }) {
   return (
     <div>
-      <CardPaymentModalComponent />
+      <CardPaymentModalContainer />
       <Button
         onClick={() =>
           setCardPaymentContext({
-            context: {
-              test: "Test String",
-            },
+            context: {},
           })
         }
       >
diff --git a/client/src/components/_test/intellipay-test.jsx b/client/src/components/card-payment-modal/card-payment-modal.component..jsx
similarity index 77%
rename from client/src/components/_test/intellipay-test.jsx
rename to client/src/components/card-payment-modal/card-payment-modal.component..jsx
index eb06d7651..5769e21ad 100644
--- a/client/src/components/_test/intellipay-test.jsx
+++ b/client/src/components/card-payment-modal/card-payment-modal.component..jsx
@@ -1,17 +1,19 @@
 import React, { useEffect } from "react";
 import axios from "axios";
 import { useTranslation } from "react-i18next";
-import { Button, Card, Form, Input, InputNumber, Select } from "antd";
+import { Button, Card, Form, Input, InputNumber, Row, Select } from "antd";
 import moment from "moment";
 import { useMutation } from "@apollo/client";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
 import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
-import { INSERT_PAYMENT_RESPONSE } from "./payment_response.queries";
+import { INSERT_PAYMENT_RESPONSE } from "../_test/payment_response.queries";
+import DataLabel from "../data-label/data-label.component";
 
-const IntellpayTestPage = ({ bodyshop, context }) => {
+const CardPaymentModalComponent = ({ bodyshop, context }) => {
   const [form] = Form.useForm();
   const amount = Form.useWatch("amount", form);
+  const payer = Form.useWatch("payer", form);
   const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
@@ -36,8 +38,17 @@ const IntellpayTestPage = ({ bodyshop, context }) => {
         console.log("Modal - Payment Response: ", response);
         // TODO store the response
         form.setFieldValue("paymentResponse", response);
+        form.submit();
+      });
+
+      window.intellipay.runOnNonApproval(function (response) {
+        console.log("Modal: Non Payment: ", response);
       });
     });
+
+    if (context.jobid) {
+      form.setFieldValue("jobid", context.jobid);
+    }
   }, []);
 
   const disabled = false;
@@ -90,12 +101,12 @@ const IntellpayTestPage = ({ bodyshop, context }) => {
             rules={[
               {
                 required: true,
-                //message: t("general.validation.required"),
+                // message: t("general.validation.required"),
               },
             ]}
           >
             <JobSearchSelectComponent
-              disabled={disabled}
+              disabled={context.jobid}
               notExported={false}
               clm_no
             />
@@ -121,7 +132,7 @@ const IntellpayTestPage = ({ bodyshop, context }) => {
             rules={[
               {
                 required: true,
-                //message: t("general.validation.required"),
+                // message: t("general.validation.required"),
               },
             ]}
           >
@@ -147,15 +158,29 @@ const IntellpayTestPage = ({ bodyshop, context }) => {
           >
             <InputNumber />
           </Form.Item>
-          <Button type="primary" data-ipayname="submit" className="ipayfield">
-            Proceed to Payment
-          </Button>
-        </LayoutFormRow>
 
-        <Button htmlType="submit">Submit Payment</Button>
+          <Row justify="space-around">
+            <Button
+              type="primary"
+              data-ipayname="submit"
+              className="ipayfield"
+              disabled={!amount || !payer}
+            >
+              Proceed to Payment
+            </Button>
+            <DataLabel
+              valueStyle={{
+                color: context.balance.getAmount() !== 0 ? "red" : "green",
+              }}
+              label={t("payments.labels.balance")}
+            >
+              {context.balance.toFormat()}
+            </DataLabel>
+          </Row>
+        </LayoutFormRow>
       </Form>
     </Card>
   );
 };
 
-export default IntellpayTestPage;
+export default CardPaymentModalComponent;
diff --git a/client/src/components/card-payment-modal/card-payment-modal.container..jsx b/client/src/components/card-payment-modal/card-payment-modal.container..jsx
new file mode 100644
index 000000000..83142431d
--- /dev/null
+++ b/client/src/components/card-payment-modal/card-payment-modal.container..jsx
@@ -0,0 +1,62 @@
+import { Button, Modal } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectCardPayment } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CardPaymentModalComponent from "./card-payment-modal.component.";
+
+const mapStateToProps = createStructuredSelector({
+  cardPaymentModal: selectCardPayment,
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
+});
+
+function CardPaymentModalContainer({
+  cardPaymentModal,
+  toggleModalVisible,
+  bodyshop,
+}) {
+  const { context, visible, actions } = cardPaymentModal;
+
+  const handleCancel = () => {
+    toggleModalVisible();
+    actions.refetch();
+  };
+
+  const handleOK = () => {
+    toggleModalVisible();
+    actions.refetch();
+  };
+
+  const handleNewPayment = () => {};
+
+  return (
+    <Modal
+      visible={visible}
+      onOk={handleOK}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="back" onClick={handleCancel}>
+          Go Back
+        </Button>,
+        <Button key="submit" type="primary" onClick={handleNewPayment}>
+          Submit Payment
+        </Button>,
+      ]}
+      width="50%"
+      destroyOnClose
+    >
+      <CardPaymentModalComponent bodyshop={bodyshop} context={context} />
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CardPaymentModalContainer);
diff --git a/client/src/components/job-payments/job-payments.component.jsx b/client/src/components/job-payments/job-payments.component.jsx
index a67ed047b..f12b81bee 100644
--- a/client/src/components/job-payments/job-payments.component.jsx
+++ b/client/src/components/job-payments/job-payments.component.jsx
@@ -23,6 +23,8 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   setPaymentContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "payment" })),
+  setCardPaymentContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "cardPayment" })),
 });
 
 export function JobPayments({
@@ -30,6 +32,7 @@ export function JobPayments({
   jobRO,
   bodyshop,
   setPaymentContext,
+  setCardPaymentContext,
   refetch,
 }) {
   const { t } = useTranslation();
@@ -160,6 +163,16 @@ export function JobPayments({
           >
             {t("menus.header.enterpayment")}
           </Button>
+          <Button
+            onClick={() =>
+              setCardPaymentContext({
+                actions: { refetch: refetch },
+                context: { jobid: job.id, balance },
+              })
+            }
+          >
+            Card Payment
+          </Button>
           <DataLabel
             valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
             label={t("payments.labels.balance")}
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index 46949077f..40047bf19 100644
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -31,6 +31,10 @@ const ManageRootPage = lazy(() =>
 );
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
+const CardPaymentModalContainer = lazy(() =>
+  import("../../components/card-payment-modal/card-payment-modal.container.")
+);
+
 const JobsDetailPage = lazy(() =>
   import("../jobs-detail/jobs-detail.page.container")
 );
@@ -195,6 +199,8 @@ export function Manage({ match, conflict, bodyshop }) {
     >
       <PaymentModalContainer />
 
+      <CardPaymentModalContainer />
+
       <BreadCrumbs />
       <BillEnterModalContainer />
       <JobCostingModal />
diff --git a/server/intellipay/intellipay.js b/server/intellipay/intellipay.js
index 87aec5e2c..3eadfa0b1 100644
--- a/server/intellipay/intellipay.js
+++ b/server/intellipay/intellipay.js
@@ -11,8 +11,11 @@ require("dotenv").config({
   ),
 });
 
+const url = process.env.NODE_ENV
+  ? "https://secure.cpteller.com/api/custapi.cfc?method=autoterminal"
+  : "https://test.cpteller.com/api/custapi.cfc?method=autoterminal";
+
 exports.lightbox_credentials = async (req, res) => {
-  console.log("In API Lightbox Credential route.");
   try {
     const options = {
       method: "POST",
@@ -21,9 +24,12 @@ exports.lightbox_credentials = async (req, res) => {
       data: qs.stringify({
         merchantkey: "3B8068",
         apikey: "Oepn2B.XqRgzAqHqvOOmYUxD2VW.vGSipi",
-        operatingenv: "businessattended", // add these for EMV Swipe
+        operatingenv:
+          process.env.NODE_ENV === undefined
+            ? process.env.NODE_ENV
+            : "businessattended",
       }),
-      url: "https://test.cpteller.com/api/custapi.cfc?method=autoterminal", //added .test
+      url,
     };
 
     const response = await axios(options);