@a-tech.jo/atech_payment 1.0.6 → 1.0.8

package/README.md

@@ -17,10 +17,16 @@ This Package is the frontend interface to integrate with A-Tech payment project,
 3. **Publishing**  
    When ready to share the package, publish it by running `npm publish`.  
    After publishing, it can be installed in any app using:  
-   `npm run publish`
+   `npm run publish:npm`
 
 4. **Add to your project**  
    1. Open next.config.js
    2. Add the package to transpilePackages key as below:
       transpilePackages: [ "@a-tech.jo/atech_payment"]
-   3. use the package 
+   3. use the package 
+   
+
+5. **To specify environment it can be detected using.env variable NODE_ENV as below: **
+   1. production
+   2. staging
+   3. development

package/index.js

@@ -1,5 +1,6 @@
 import HyperpayOrder from "./src/hyperpay/hyperpayOrder.js";
 import PaypalOrder from "./src/paypal/paypalOrder.js";
+import hyperpayConnector from "./src/shared/requests/hyperpayConnector.js";
 
 const PymentOrder = ({
     provider = "hyperpay",
@@ -7,30 +8,38 @@ const PymentOrder = ({
     clientId = "test",
     onChange = () => {},
     onStatusChange = () => {},
-    env = "development",
     redirectUrl = "",
 }) => {
     if (provider === "paypal") {
-        console.log(process.env.API_URL);
         return (
             <PaypalOrder
                 order={order}
                 clientId={clientId}
                 onChange={onChange}
                 onStatusChange={onStatusChange}
-                env={env}
             />
         );
     }
 
     if (provider === "hyperpay") {
-        console.log(process.env.API_URL);
-        return (
-            <HyperpayOrder order={order} redirectUrl={redirectUrl} env={env} />
-        );
+        return <HyperpayOrder order={order} redirectUrl={redirectUrl} />;
     }
 
     return <div />;
 };
 
-export { PymentOrder };
+const verifyCheckout = async (provider, checkoutId, env, resoucePath) => {
+    if (provider === "hyperpay") {
+        const response = await hyperpayConnector.getOrderStatus(
+            checkoutId,
+            env,
+            resoucePath
+        );
+        console.log(response);
+        return response;
+    }
+
+    return false;
+};
+
+export { PymentOrder, verifyCheckout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-tech.jo/atech_payment",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "type": "module",
   "description": "A-Tech Payment React Package",
   "source": "index.js",
@@ -19,7 +19,7 @@
     "build:prod": "webpack --mode=production --node-env=production",
     "watch": "webpack --watch",
     "serve": "webpack serve",
-    "publish": "npm publish --access public"
+    "publish:npm": "npm publish --access public"
   },
   "author": "A-Tech",
   "license": "GNU",

package/src/hyperpay/hyperpayOrder.js

@@ -1,99 +1,99 @@
 import { useEffect, useState } from "react";
 import hyperpayConnector from "../shared/requests/hyperpayConnector.js";
-
-const HyperpayOrder = ({ redirectUrl, order, env }) => {
-  const [error, setError] = useState(null);
-  const [checkoutId, setCheckoutId] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    if (order) {
-      initiateOrder();
+import backendConnector from "../shared/requests/backendConnector.js";
+
+const HyperpayOrder = ({ redirectUrl, order }) => {
+    const [error, setError] = useState(null);
+    const [checkoutId, setCheckoutId] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        if (order) {
+            initiateOrder();
+        }
+    }, [order]);
+
+    const initiateOrder = async () => {
+        try {
+            if (!order) {
+                setError("Order data must be provided");
+                return;
+            }
+            setIsLoading(true);
+            const result = await hyperpayConnector.createHyperpayOrder(order);
+            setIsLoading(false);
+
+            if (result?.error) {
+                setError(result.error);
+                return;
+            }
+
+            if (result?.id) return setCheckoutId(result.id);
+        } catch (err) {
+            console.error("err", err);
+            setError("An unexpected error occurred.");
+        }
+    };
+
+    const checkout = async () => {
+        try {
+            if (!checkoutId) {
+                setError("Checkout ID must be provided");
+                return;
+            }
+            setIsLoading(true);
+            const result = await hyperpayConnector.getOrderStatus(checkoutId);
+            setIsLoading(false);
+
+            if (result?.error) {
+                setError(result.error);
+                return;
+            }
+
+            return result;
+        } catch (err) {
+            console.error("err", err);
+            setError("An unexpected error occurred.");
+        }
+    };
+
+    useEffect(() => {
+        if (checkoutId) {
+            const script = document.createElement("script");
+            script.src = `https://eu-test.oppwa.com/v1/paymentWidgets.js?checkoutId=${checkoutId}`;
+            script.async = true;
+            script.crossOrigin = "anonymous";
+            document.body.appendChild(script);
+
+            return () => {
+                document.body.removeChild(script);
+            };
+        }
+    }, [checkoutId]);
+
+    if (error) {
+        return <p>Error: {error}</p>;
     }
-  }, [order]);
-
-  const initiateOrder = async () => {
-    try {
-      if (!order) {
-        setError("Data must be provided");
-        return;
-      }
-      setIsLoading(true);
-      const result = await hyperpayConnector.createHyperpayOrder(order, env);
-      setIsLoading(false);
-
-      if (result?.error) {
-        setError(result.error);
-        return;
-      }
 
-      setCheckoutId(result?.id);
-    } catch (err) {
-      console.error("err", err);
-      setError("An unexpected error occurred.");
+    if (isLoading) {
+        return <p>Loading...</p>;
     }
-  };
 
-  const checkout = async ( ) => {
-    try {
-      if (!checkoutId) {
-        setError("Checkout ID must be provided");
-        return;
-      }
-      setIsLoading(true);
-      const result = await hyperpayConnector.getOrderStatus(checkoutId, env);
-      setIsLoading(false);
-
-      if (result?.error) {
-        setError(result.error);
-        return;
-      }
-
-      return result;
-    } catch (err) {
-      console.error("err", err);
-      setError("An unexpected error occurred.");
-    }
-  }
-
-  useEffect(() => {
     if (checkoutId) {
-      const script = document.createElement("script");
-      script.src = `https://eu-test.oppwa.com/v1/paymentWidgets.js?checkoutId=${checkoutId}`;
-      script.async = true;
-      script.crossOrigin = "anonymous";
-      document.body.appendChild(script);
-
-      return () => {
-        document.body.removeChild(script);
-      };
+        return (
+            <form
+                action={redirectUrl}
+                className="paymentWidgets"
+                data-brands="VISA MASTER AMEX"
+            ></form>
+        );
     }
-  }, [checkoutId]);
-
-  if (error) {
-    return <p>Error: {error}</p>;
-  }
 
-
-  if (isLoading) {
-    return <p>Loading...</p>;
-  }
-
-  if (checkoutId) {
     return (
-      <form
-        action={redirectUrl}
-        className="paymentWidgets"
-        data-brands="VISA MASTER AMEX"
-      ></form>
+        <div>
+            <p>No order</p>
+        </div>
     );
-  }
-
-  return (
-    <div>
-      <p>No order</p>
-    </div>
-  );
 };
 
 export default HyperpayOrder;

package/src/paypal/paypalOrder.js

@@ -1,32 +1,33 @@
 import React from "react";
 import { PayPalScriptProvider } from "@paypal/react-paypal-js";
 import ButtonWrapper from "./buttonWrapper.js";
+import config from "../shared/config.js";
 
 const PaypalOrder = ({
-  currency = "USD",
-  clientId = "test",
-  order = {},
-  onChange = () => {},
-  onStatusChange = () => {},
-  env,
+    currency = "USD",
+    clientId = "test",
+    order = {},
+    onChange = () => {},
+    onStatusChange = () => {},
 }) => {
-  const initialOptions = {
-    clientId: clientId,
-    currency: currency,
-    vault: order.type === "subscription",
-  };
-  return (
-    <div style={{ maxWidth: "750px", minHeight: "200px" }}>
-      <PayPalScriptProvider options={initialOptions}>
-        <ButtonWrapper
-          order={order}
-          onChange={onChange}
-          onStatusChange={onStatusChange}
-          env={env}
-        />
-      </PayPalScriptProvider>
-    </div>
-  );
+    const env = config.NODE_ENV;
+    const initialOptions = {
+        clientId: clientId,
+        currency: currency,
+        vault: order.type === "subscription",
+    };
+    return (
+        <div style={{ maxWidth: "750px", minHeight: "200px" }}>
+            <PayPalScriptProvider options={initialOptions}>
+                <ButtonWrapper
+                    order={order}
+                    onChange={onChange}
+                    onStatusChange={onStatusChange}
+                    env={env}
+                />
+            </PayPalScriptProvider>
+        </div>
+    );
 };
 
 export default PaypalOrder;

package/src/shared/config.js

@@ -1,12 +1,20 @@
-const config = {
-    development: {
-        BACKEND_BASE_URL: "http://localhost:5000/api",
-        HYPERPAY_BASE_URL: "https://eu-test.oppwa.com/",
-    },
-    production: {
-        BACKEND_BASE_URL: "http://prod:5000/api",
-        HYPERPAY_BASE_URL: "https://eu-prod.oppwa.com/",
-    },
+let config = {
+    NODE_ENV: process.env.NODE_ENV,
+    BACKEND_BASE_URL: "http://localhost:5000/api",
+    HYPERPAY_BASE_URL: "https://eu-test.oppwa.com/",
 };
 
+const production = {
+    BACKEND_BASE_URL: "http://prod:5000/api",
+    HYPERPAY_BASE_URL: "https://eu-prod.oppwa.com/",
+};
+
+const staging = {
+    BACKEND_BASE_URL: "https://stage.payment.atech-workspace.com/api",
+};
+
+if (process.env.NODE_ENV === "production")
+    config = { ...config, ...production };
+if (process.env.NODE_ENV === "staging") config = { ...config, ...staging };
+
 export default config;

package/src/shared/requests/backendConnector.js

@@ -2,23 +2,23 @@
 import request from "./request.js";
 
 class BackendConnector {
-  async createPaypalOrder(data, env) {
-    const requestConfig = {
-      url: "/paypal/orders/create-order",
-      data,
-    };
-    const result = await request.post(requestConfig, env);
-    return result;
-  }
+    async createPaypalOrder(data) {
+        const requestConfig = {
+            url: "/paypal/orders/create-order",
+            data,
+        };
+        const result = await request.post(requestConfig);
+        return result;
+    }
 
-  async approveOrder(data, env) {
-    const requestConfig = {
-      url: "/paypal/orders/capture-order",
-      data,
-    };
-    const result = await request.post(requestConfig, env);
-    return result;
-  }
+    async approveOrder(data) {
+        const requestConfig = {
+            url: "/paypal/orders/capture-order",
+            data,
+        };
+        const result = await request.post(requestConfig);
+        return result;
+    }
 }
 
 export default new BackendConnector();

package/src/shared/requests/hyperpayConnector.js

@@ -4,8 +4,8 @@ import request from "./request.js";
 
 class HyperpayConnector {
     constructor() {
-        this.BASEURL = config.production.HYPERPAY_BASE_URL;
-        this.DEV_BASEURL = config.development.HYPERPAY_BASE_URL;
+        this.BASEURL = config.BACKEND_BASE_URL;
+        axios.defaults.baseURL = config.BACKEND_BASE_URL;
     }
 
     defaultHeaders = (data) => {
@@ -16,37 +16,35 @@ class HyperpayConnector {
 
         return headers;
     };
-    async createHyperpayOrder(data, env) {
+    async createHyperpayOrder(data) {
+        // Create an order and return checkoutID
         const headers = this.defaultHeaders();
         const url = "/hyperpay/orders/create-order";
         const requestConfig = {
             url: url,
-            // baseUrl: env === "development" ? this.DEV_BASEURL : this.BASEURL,
             data,
             headers: headers,
         };
         console.log("requestConfig", requestConfig);
-        const result = await request.post(requestConfig, env);
+        const result = await request.post(requestConfig);
         console.log("result", result);
         return result;
     }
 
-    async getOrderStatus(checkoutId, env = "production") {
+    async getOrderStatus(checkoutId, resourcePath) {
         const headers = this.defaultHeaders();
         const requestConfig = {
-            url: `/hyperpay/orders/get-order/${checkoutId}`,
-            // baseUrl: env === "development" ? this.DEV_BASEURL : this.BASEURL,
+            url: `/hyperpay/orders/get-order/${checkoutId}?resoucePath=${resourcePath}`,
             headers,
         };
         const result = await request.get(requestConfig);
         return result;
     }
 
-    async captureOrder(orderId, env = "production") {
+    async captureOrder(orderId) {
         const headers = this.defaultHeaders();
         const requestConfig = {
             url: `/hyperpay/orders/capture-order/${orderId}`,
-            // baseUrl: env === "development" ? this.DEV_BASEURL : this.BASEURL,
             headers,
         };
         const result = await request.post(requestConfig);

package/src/shared/requests/request.js

@@ -3,88 +3,90 @@ import axios from "axios";
 import config from "../config.js";
 
 class Request {
-  constructor() {}
+    constructor() {}
 
-  async handleRequests(finalConfig, env) {
-    try {
-      axios.defaults.baseURL = config[env].BACKEND_BASE_URL;
-      const response = await axios.request(finalConfig);
-     
-      return response.data;
-    } catch (err) {
-      console.log("err", err);
-      if (err.response) {
-        if (err.response.status === 401) {
-          return (window.location.href = "/login");
-        }
-        return err.response.data;
-      } else if (err.request) {
-        return {
-          success: false,
-          message: "No response received, please try again later.",
-        };
-      } else {
+    async handleRequests(finalConfig) {
+        try {
+            axios.defaults.baseURL = config.BACKEND_BASE_URL;
+            const response = await axios.request(finalConfig);
 
-        return { success: false, message: "An unexpected error occurred." };
-      }
+            return response.data;
+        } catch (err) {
+            console.log("err", err);
+            if (err.response) {
+                if (err.response.status === 401) {
+                    return (window.location.href = "/login");
+                }
+                return err.response.data;
+            } else if (err.request) {
+                return {
+                    success: false,
+                    message: "No response received, please try again later.",
+                };
+            } else {
+                return {
+                    success: false,
+                    message: "An unexpected error occurred.",
+                };
+            }
+        }
     }
-  }
 
-  async post(config, env) {
-    const defaultConfig = {
-      method: "post",
-    };
+    async post(config) {
+        const defaultConfig = {
+            method: "post",
+        };
 
-    const finalConfig = {
-      ...defaultConfig,
-      ...config,
-    };
-    return await this.handleRequests(finalConfig, env);
-  }
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
 
-  async get(config = {}, env) {
-    const defaultConfig = {
-      method: "get",
-    };
-    const finalConfig = {
-      ...defaultConfig,
-      ...config,
-    };
-    return await this.handleRequests(finalConfig, env);
-  }
+    async get(config = {}) {
+        const defaultConfig = {
+            method: "get",
+        };
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
 
-  async put(config, env) {
-    const defaultConfig = {
-      method: "put",
-    };
-    const finalConfig = {
-      ...defaultConfig,
-      ...config,
-    };
-    return await this.handleRequests(finalConfig, env);
-  }
+    async put(config) {
+        const defaultConfig = {
+            method: "put",
+        };
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
 
-  async patch(config, env) {
-    const defaultConfig = {
-      method: "patch",
-    };
-    const finalConfig = {
-      ...defaultConfig,
-      ...config,
-    };
-    return await this.handleRequests(finalConfig, env);
-  }
+    async patch(config) {
+        const defaultConfig = {
+            method: "patch",
+        };
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
 
-  async delete(config, env) {
-    const defaultConfig = {
-      method: "delete",
-    };
-    const finalConfig = {
-      ...defaultConfig,
-      ...config,
-    };
-    return await this.handleRequests(finalConfig, env);
-  }
+    async delete(config) {
+        const defaultConfig = {
+            method: "delete",
+        };
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
 }
 
 export default new Request();