@a-tech.jo/atech_payment 1.0.5 → 1.0.7

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/example/hyperpay/requests/createOrder.json

@@ -0,0 +1,37 @@
+{
+		"entityId":"8a8294174d0595bb014d05d82e5b01d2",
+		"amount":"0.00",
+		"paymentType":"PA",
+		"createRegistration":"true",
+		"currency":"EUR",
+		"testMode":"EXTERNAL",
+		"paymentBrand":"VISA",
+		"card.number":"4242426505984705",
+		"card.holder":"John Smith",
+		"card.expiryMonth":"12",
+		"card.expiryYear":"2026",
+		"card.cvv":"123",
+		"customer.email":"john.smith@gmail.com",
+		"customer.givenName":"Smith",
+		"customer.ip":"192.168.0.0",
+		"customer.surname":"John",
+		"customer.language":"DE",
+		"billing.city":"MyCity",
+		"billing.country":"DE",
+		"billing.postcode":"712121",
+		"billing.state":"DE",
+		"billing.street1":"MyStreet",
+		"standingInstruction.type":"RECURRING",
+		"standingInstruction.mode":"INITIAL",
+		"standingInstruction.source":"CIT",
+		"standingInstruction.recurringType":"SUBSCRIPTION",
+		"threeDSecure.eci":"05",
+		"threeDSecure.authenticationStatus":"Y",
+		"threeDSecure.version":"2.2.0",
+		"threeDSecure.dsTransactionId":"c75f23af-9454-43f6-ba17-130ed529507e",
+		"threeDSecure.acsTransactionId":"2c42c553-176f-4f08-af6c-f9364ecbd0e8",
+		"threeDSecure.verificationId":"MTIzNDU2Nzg5MDEyMzQ1Njc4OTA=",
+		"threeDSecure.amount":"19.99",
+		"threeDSecure.currency":"EUR",
+		"threeDSecure.flow":"challenge"
+	}

package/index.js

@@ -7,27 +7,21 @@ 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 />;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-tech.jo/atech_payment",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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

@@ -0,0 +1,98 @@
+import { useEffect, useState } from "react";
+import hyperpayConnector from "../shared/requests/hyperpayConnector.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;
+            }
+
+            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>;
+    }
+
+    if (isLoading) {
+        return <p>Loading...</p>;
+    }
+
+    if (checkoutId) {
+        return (
+            <form
+                action={redirectUrl}
+                className="paymentWidgets"
+                data-brands="VISA MASTER AMEX"
+            ></form>
+        );
+    }
+
+    return (
+        <div>
+            <p>No order</p>
+        </div>
+    );
+};
+
+export default HyperpayOrder;

package/src/paypal/buttonWrapper.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";
+import backendConnector from "../shared/requests/backendConnector.js";
+
+const Spinner = () => <div className="spinner">Processing payment...</div>;
+
+const ButtonWrapper = ({
+  order,
+  onChange = () => {},
+  onStatusChange = () => {},
+  env,
+}) => {
+  if (env !== "production" && env !== "development") {
+    return <div>Invalid Env</div>;
+  }
+  const [{ isPending }] = usePayPalScriptReducer();
+
+  const createOrderOrSubscription = async () => {
+    try {
+      const response = await backendConnector.createPaypalOrder(order, env);
+      onChange({ event: "createOrder", data: response });
+      return response.id;
+    } catch (error) {
+      console.error("Error creating PayPal transaction:", error);
+      throw new Error("Transaction creation failed");
+    }
+  };
+
+  const handleApproval = async (data, actions) => {
+    try {
+      console.log(data);
+      const captureData = {
+        orderId: data?.orderID || undefined,
+        subscriptionId: data?.subscriptionID || data?.id,
+        type: order.type,
+      };
+
+      await backendConnector.approveOrder(captureData, env);
+      if (order.type == "order") {
+        return actions.order.capture().then(function (details) {
+          onStatusChange(true);
+          onChange({ event: "approveOrder", data: data });
+
+          console.log(
+            "Transaction completed by " + details.payer.name.given_name
+          );
+        });
+      }
+      onStatusChange(true);
+      onChange({ event: "approveOrder", data: data });
+    } catch (error) {
+      console.error("Error capturing PayPal transaction:", error);
+    }
+  };
+
+  return (
+    <>
+      {isPending ? <Spinner /> : null}
+      <PayPalButtons
+        style={{ layout: "vertical" }}
+        disabled={false}
+        fundingSource={undefined}
+        createOrder={
+          order.type === "order" ? createOrderOrSubscription : undefined
+        }
+        createSubscription={
+          order.type === "subscription" ? createOrderOrSubscription : undefined
+        }
+        onError={(err) => console.log(err)}
+        onApprove={handleApproval}
+      />
+    </>
+  );
+};
+
+export default ButtonWrapper;

package/src/paypal/paypalOrder.js

@@ -0,0 +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 = () => {},
+}) => {
+    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

@@ -0,0 +1,20 @@
+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://payment.staging.a-tech.dev/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/paypalService.js

@@ -0,0 +1,16 @@
+// Services
+import backendConnector from "./requests/backendConnector";
+
+class PaypalService {
+    async createOrder(data) {
+        const result = await backendConnector.createPaypalOrder(data);
+        if (result?.id) return result?.id;
+    }
+
+    async onApprove(data) {
+        const result = await backendConnector.approveOrder(data);
+        return result;
+    }
+}
+
+export default new PaypalService();

package/src/shared/requests/backendConnector.js

@@ -0,0 +1,24 @@
+// Services
+import request from "./request.js";
+
+class BackendConnector {
+    async createPaypalOrder(data) {
+        const requestConfig = {
+            url: "/paypal/orders/create-order",
+            data,
+        };
+        const result = await request.post(requestConfig);
+        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

@@ -0,0 +1,54 @@
+// Services
+import config from "../config.js";
+import request from "./request.js";
+
+class HyperpayConnector {
+    constructor() {
+        this.BASEURL = config.HYPERPAY_BASE_URL;
+        this.DEV_BASEURL = config.HYPERPAY_BASE_URL;
+    }
+
+    defaultHeaders = (data) => {
+        const headers = {
+            "Content-Type": "application/x-www-form-urlencoded",
+            "Content-Length": data?.length,
+        };
+
+        return headers;
+    };
+    async createHyperpayOrder(data) {
+        const headers = this.defaultHeaders();
+        const url = "/hyperpay/orders/create-order";
+        const requestConfig = {
+            url: url,
+            data,
+            headers: headers,
+        };
+        console.log("requestConfig", requestConfig);
+        const result = await request.post(requestConfig);
+        console.log("result", result);
+        return result;
+    }
+
+    async getOrderStatus(checkoutId) {
+        const headers = this.defaultHeaders();
+        const requestConfig = {
+            url: `/hyperpay/orders/get-order/${checkoutId}`,
+            headers,
+        };
+        const result = await request.get(requestConfig);
+        return result;
+    }
+
+    async captureOrder(orderId) {
+        const headers = this.defaultHeaders();
+        const requestConfig = {
+            url: `/hyperpay/orders/capture-order/${orderId}`,
+            headers,
+        };
+        const result = await request.post(requestConfig);
+        return result;
+    }
+}
+
+export default new HyperpayConnector();

package/src/shared/requests/request.js

@@ -0,0 +1,92 @@
+import axios from "axios";
+// CONFIG
+import config from "../config.js";
+
+class Request {
+    constructor() {}
+
+    async handleRequests(finalConfig) {
+        try {
+            axios.defaults.baseURL = config.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 {
+                return {
+                    success: false,
+                    message: "An unexpected error occurred.",
+                };
+            }
+        }
+    }
+
+    async post(config) {
+        const defaultConfig = {
+            method: "post",
+        };
+
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
+
+    async get(config = {}) {
+        const defaultConfig = {
+            method: "get",
+        };
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
+
+    async put(config) {
+        const defaultConfig = {
+            method: "put",
+        };
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
+
+    async patch(config) {
+        const defaultConfig = {
+            method: "patch",
+        };
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
+
+    async delete(config) {
+        const defaultConfig = {
+            method: "delete",
+        };
+        const finalConfig = {
+            ...defaultConfig,
+            ...config,
+        };
+        return await this.handleRequests(finalConfig);
+    }
+}
+
+export default new Request();