Initial set up for pay pal

package.json

@@ -15,7 +15,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@holonym-foundation/utils": "^1.0.1",
     "@holonym-foundation/zokrates-js-fork": "1.1.42",
-    "@paypal/react-paypal-js": "^7.8.2",
+    "@paypal/react-paypal-js": "^8.1.3",
     "@tanstack/react-query": "^4.22.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",

src/components/issuance/GovernmentIDIssuance/GovIDPayment.tsx

@@ -3,14 +3,17 @@ import { tokenSymbolToCurrency } from "../../../constants";
 import CryptoPaymentScreen from "./CryptoPaymentScreen";
 import PaymentOptions from "./PaymentOptions";
 import { SupportedChainIdsForIDVPayment } from "../../../types";
+import PayPalPaymentScreen from "./PayPalPaymentScreen";
 
 const GovIDPayment = ({ 
-  onPaymentSuccess 
+  onPaymentSuccess,
+  onPayPalSyuccess
 }: { 
   onPaymentSuccess: (data: { chainId?: number, txHash?: string}) => void 
+  onPayPalSyuccess: (data: { username?: string; txId?: string }) => void
 }) => {
   const [selectedPage, setSelectedPage] = useState<"options" | "fiat" | "crypto">("options");
-  const [selectedToken, setSelectedToken] = useState<"ETH" | "FTM">();
+  const [selectedToken, setSelectedToken] = useState<"ETH" | "FTM" | "FIAT">();
   const [selectedChainId, setSelectedChainId] = useState<SupportedChainIdsForIDVPayment>();
 
   return (
@@ -34,6 +37,13 @@ const GovIDPayment = ({
         />
       )}
 
+      {selectedPage === "fiat" && selectedToken && (
+        <PayPalPaymentScreen
+          onPaymentSuccess={onPayPalSyuccess}
+          onBack={() => setSelectedPage("options")}
+        />
+      )}
+
     </>
   );
 };

src/components/issuance/GovernmentIDIssuance/PayPalPaymentScreen.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
+
+const PayPalPaymentScreen = (props: {
+  onPaymentSuccess: (data: { username?: string; txId?: string }) => void;
+  onBack: () => void;
+}) => {
+
+  return (
+    <>
+      <div
+        className="x-wrapper small-center"
+        style={{
+          display: "flex",
+          height: "95%",
+          width: "80%",
+          alignItems: "stretch",
+          justifyContent: "stretch",
+          flexDirection: "column",
+          gap: "50px",
+        }}
+      >
+        <h1>Payment Options</h1>
+        <PayPalScriptProvider options={{clientId: "test"}}>
+          <PayPalButtons />
+        </PayPalScriptProvider>
+
+        <div
+          style={{
+            marginTop: "20px",
+            marginBottom: "20px",
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <button
+            className="export-private-info-button"
+            onClick={(event) => {
+              event.preventDefault();
+              props.onBack();
+            }}
+          >
+            Back
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PayPalPaymentScreen;

src/components/issuance/GovernmentIDIssuance/PaymentOptions.tsx

@@ -17,7 +17,7 @@ const PaymentOptions = ({
 }: {
   onSelectOption: (
     fiat: boolean, 
-    symbol: "ETH" | "FTM", 
+    symbol: "ETH" | "FTM" | "FIAT", 
     chainId: SupportedChainIdsForIDVPayment
   ) => void;
 }) => {
@@ -74,8 +74,12 @@ const PaymentOptions = ({
           })
         </a>
         <a
-          className="x-button-blue greyed-out-button"
+          className="x-button-blue"
           style={{ width: "100%", fontSize: "20px" }}
+          onClick={(event) => {
+            event.preventDefault();
+            onSelectOption(true, "FIAT", 0);
+          }} 
         >
           Pay In Fiat (coming soon)
         </a>

src/constants/index.ts

@@ -85,6 +85,10 @@ export const tokenSymbolToCurrency = {
     name: "Fantom",
     symbol: "FTM",
   },
+  FIAT: {
+    name: "PayPal",
+    symbol: "FIAT",
+  }
 }
 
 export const stateAbbreviations = {

src/types.d.ts

@@ -292,4 +292,4 @@ export type Currency = {
   symbol: string;
 };
 
-export type SupportedChainIdsForIDVPayment = 10 | 250 | 420
+export type SupportedChainIdsForIDVPayment = 10 | 250 | 420 | 0

yarn.lock

@@ -2344,19 +2344,19 @@
   dependencies:
     mirada "^0.0.15"
 
-"@paypal/paypal-js@^5.1.6":
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-5.1.6.tgz#8ec59f4cc016addb3de41511f70950fd0359ffdb"
-  integrity sha512-1upF06pv0AUtTftRVSra44p8ibqGa3ruKLArvdhpZla25zcrND7R+nDUIMrJ0iteVYZowhujZStFs6NoruExfg==
+"@paypal/paypal-js@^7.0.0":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-7.0.2.tgz#d45e13781be30fcfd707a8a44289d4db67c33b4a"
+  integrity sha512-ZCOS5P3syfA9MYEq501N93pKpr8ZsXw9jun/rLNS7WNphao0ckfreqTCO5EoXcdceZVPS66H0IgG7PKn/jbBKQ==
   dependencies:
     promise-polyfill "^8.3.0"
 
-"@paypal/react-paypal-js@^7.8.2":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@paypal/react-paypal-js/-/react-paypal-js-7.8.3.tgz#a5ca30a6db6a16776a447976c168f6b7438b1fb9"
-  integrity sha512-7sD5JFA0IH9kysyGFv5DTmtPn54vLWZ0DLhdjUvsjqZnoEs11mJJJlTsTA7MkIO3jBAJOWlfoA4wLYzmy68C4g==
+"@paypal/react-paypal-js@^8.1.3":
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/@paypal/react-paypal-js/-/react-paypal-js-8.1.3.tgz#2a46bd864eee02efada370ca50fab5a5bf38f4ff"
+  integrity sha512-hEm27iYP/UHS3XPBhDdiK2U4PH1FxrOD5O3f9tstAVLJd82l/laCjq751HiESSm63PVOoFeKE41Fe1mYGab+oA==
   dependencies:
-    "@paypal/paypal-js" "^5.1.6"
+    "@paypal/paypal-js" "^7.0.0"
     "@paypal/sdk-constants" "^1.0.122"
 
 "@paypal/sdk-constants@^1.0.122":