@a-tech.jo/atech_payment 1.0.5 → 1.0.6

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-tech.jo/atech_payment",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "description": "A-Tech Payment React Package",
   "source": "index.js",

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,57 @@
+// 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,
+        };
+
+        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();