@a-tech.jo/atech_payment 1.0.1

package/.babelrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["@babel/syntax-dynamic-import"],
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

package/README.md

@@ -0,0 +1,20 @@
+# my-webpack-project
+
+A React component that integrates PayPal payments into your application.
+
+## Steps for Usage
+
+1. **Build the Package**  
+   Run `npm run build` in your package directory to build the project.
+
+2. **Local Testing**  
+   To test the package locally:
+
+   - First, link the package by running `npm link` in the package directory.
+   - Then, in the app where you want to use the package, link it using `npm link my-webpack-project`.
+   - Last, make sure `atech_payment_backend` is running at port 5000.
+
+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 install my-webpack-project`

package/documentation/hyperpay.md

@@ -0,0 +1,18 @@
+
+Test cards:
+https://wordpresshyperpay.docs.oppwa.com/reference/parameters#test-accounts
+
+
+
+Purchase a product:
+References:
+https://wordpresshyperpay.docs.oppwa.com/integrations/widget
+
+
+
+
+
+Subscribe:
+References:
+
+

package/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Webpack App</title>
+    </head>
+    <body>
+        <h1>Hello world!</h1>
+        <h2>Tip: Check your console</h2>
+    </body>
+    
+</html>

package/index.js

@@ -0,0 +1,36 @@
+import HyperpayOrder from "./src/hyperpay/hyperpayOrder.js";
+import PaypalOrder from "./src/paypal/paypalOrder.js";
+
+const PymentOrder = ({
+    provider = "hyperpay",
+    order = {},
+    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 <div />;
+};
+
+export { PymentOrder };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@a-tech.jo/atech_payment",
+  "version": "1.0.1",
+  "type": "module",
+  "description": "A-Tech Payment React Package",
+  "source": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.module.js",
+  "unpkg": "dist/index.umd.js",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "build": "webpack --mode=production --node-env=production",
+    "dev": "microbundle watch",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "main": "lib/index.js",
+    "build:dev": "webpack --mode=development",
+    "build:prod": "webpack --mode=production --node-env=production",
+    "watch": "webpack --watch",
+    "serve": "webpack serve"
+  },
+  "author": "A-Tech",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=15.0.1",
+    "react-dom": ">=15.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.7",
+    "@webpack-cli/generators": "^3.0.7",
+    "babel-loader": "^9.1.3",
+    "dotenv-webpack": "^8.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "prettier": "^2.8.4",
+    "react": ">=15.0.1",
+    "react-dom": ">=15.0.1",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  },
+  "dependencies": {
+    "@paypal/react-paypal-js": "^8.7.0",
+    "axios": "^1.7.7",
+    "dotenv": "^16.4.5"
+  },
+  "directories": {
+    "example": "example"
+  }
+}

package/src/hyperpay/hyperpayOrder.js

@@ -0,0 +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();
+    }
+  }, [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.");
+    }
+  };
+
+  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);
+      };
+    }
+  }, [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,32 @@
+import React from "react";
+import { PayPalScriptProvider } from "@paypal/react-paypal-js";
+import ButtonWrapper from "./buttonWrapper.js";
+
+const PaypalOrder = ({
+  currency = "USD",
+  clientId = "test",
+  order = {},
+  onChange = () => {},
+  onStatusChange = () => {},
+  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,12 @@
+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/",
+    },
+};
+
+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, env) {
+    const requestConfig = {
+      url: "/paypal/orders/create-order",
+      data,
+    };
+    const result = await request.post(requestConfig, env);
+    return result;
+  }
+
+  async approveOrder(data, env) {
+    const requestConfig = {
+      url: "/paypal/orders/capture-order",
+      data,
+    };
+    const result = await request.post(requestConfig, env);
+    return result;
+  }
+}
+
+export default new BackendConnector();

package/src/shared/requests/hyperpayConnector.js

@@ -0,0 +1,59 @@
+// Services
+import config from "../config.js";
+import request from "./request.js";
+
+class HyperpayConnector {
+    constructor() {
+        this.BASEURL = config.production.HYPERPAY_BASE_URL;
+        this.DEV_BASEURL = config.development.HYPERPAY_BASE_URL;
+    }
+
+    defaultHeaders = (data) => {
+        const headers = {
+            "Content-Type": "application/x-www-form-urlencoded",
+            "Content-Length": data?.length,
+            // Authorization:
+            //     "Bearer OGFjN2E0Yzc5Mzk0YmRjODAxOTM5NzM2ZjFhNzA2NDF8enlac1lYckc4QXk6bjYzI1NHNng=",
+        };
+
+        return headers;
+    };
+    async createHyperpayOrder(data, env) {
+        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);
+        console.log("result", result);
+        return result;
+    }
+
+    async getOrderStatus(checkoutId, env = "production") {
+        const headers = this.defaultHeaders();
+        const requestConfig = {
+            url: `/hyperpay/orders/get-order/${checkoutId}`,
+            // baseUrl: env === "development" ? this.DEV_BASEURL : this.BASEURL,
+            headers,
+        };
+        const result = await request.get(requestConfig);
+        return result;
+    }
+
+    async captureOrder(orderId, env = "production") {
+        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);
+        return result;
+    }
+}
+
+export default new HyperpayConnector();

package/src/shared/requests/request.js

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

package/webpack.config.js

@@ -0,0 +1,46 @@
+// webpack.config.js
+import path from "path";
+import Dotenv from "dotenv-webpack";
+
+const isProduction = process.env.NODE_ENV === "production";
+
+const config = {
+  entry: "./index.js",
+  output: {
+    path: path.resolve("build"),
+    filename: "index.js",
+  },
+  devServer: {
+    open: true,
+    host: "localhost",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/i,
+        loader: "babel-loader",
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+        type: "asset",
+      },
+    ],
+  },
+  plugins: [
+    new Dotenv({
+      path: "./.env",
+      // Use `true` for production mode (only load .env)
+      // Use `false` for development mode (load .env and .env.local)
+      safe: isProduction ? true : false,
+    }),
+  ],
+};
+
+export default () => {
+  if (isProduction) {
+    config.mode = "production";
+  } else {
+    config.mode = "development";
+  }
+  return config;
+};