ADD: Paypal button functionality

.gitignore

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 .vscode
+.env
 
 # testing
 /coverage

package-lock.json

@@ -1853,6 +1853,33 @@
         }
       }
     },
+    "@paypal/paypal-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@paypal/paypal-js/-/paypal-js-4.1.0.tgz",
+      "integrity": "sha512-fBPpNBfzIpn4hWgks+EmZmuwKopkkMRBAtvCuEkH0RQIUobH7Dtf3enyFAt1+u8ZdgdIvueSBB58lRCSP2RNkA==",
+      "requires": {
+        "promise-polyfill": "^8.2.0"
+      }
+    },
+    "@paypal/react-paypal-js": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@paypal/react-paypal-js/-/react-paypal-js-7.4.2.tgz",
+      "integrity": "sha512-NYE5SopmMK80h0/hYIr3//iaIjGNHTFxRE9aTo2LzNik75WHu/skUggowHwZHpYWgLi6NYvz7WawRSnesjk6Sw==",
+      "requires": {
+        "@paypal/paypal-js": "^4.1.0",
+        "@paypal/sdk-constants": "^1.0.110"
+      }
+    },
+    "@paypal/sdk-constants": {
+      "version": "1.0.110",
+      "resolved": "https://registry.npmjs.org/@paypal/sdk-constants/-/sdk-constants-1.0.110.tgz",
+      "integrity": "sha512-W/JvynHo68yVbR5+H3xXncFvucbVmt4PSBifBuGGH8NqDUq8kwOFNaHt0xmUIvWoK77pQjtaulYssty3rnztTw==",
+      "requires": {
+        "cross-domain-utils": "^2.0.10",
+        "hi-base32": "^0.5.0",
+        "zalgo-promise": "^1.0.28"
+      }
+    },
     "@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz",
@@ -4638,6 +4665,14 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cross-domain-utils": {
+      "version": "2.0.38",
+      "resolved": "https://registry.npmjs.org/cross-domain-utils/-/cross-domain-utils-2.0.38.tgz",
+      "integrity": "sha512-zZfi3+2EIR9l4chrEiXI2xFleyacsJf8YMLR1eJ0Veb5FTMXeJ3DpxDjZkto2FhL/g717WSELqbptNSo85UJDw==",
+      "requires": {
+        "zalgo-promise": "^1.0.11"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -7239,6 +7274,11 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "hi-base32": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/hi-base32/-/hi-base32-0.5.1.tgz",
+      "integrity": "sha512-EmBBpvdYh/4XxsnUybsPag6VikPYnN30td+vQk+GI3qpahVEG9+gTkG0aXVxTjBqQ5T6ijbWIu77O+C5WFWsnA=="
+    },
     "history": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.1.0.tgz",
@@ -11995,6 +12035,11 @@
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
     },
+    "promise-polyfill": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.1.tgz",
+      "integrity": "sha512-3p9zj0cEHbp7NVUxEYUWjQlffXqnXaZIMPkAO7HhFh8u5636xLRDHOUo2vpWSK0T2mqm6fKLXYn1KP6PAZ2gKg=="
+    },
     "prompts": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
@@ -16320,6 +16365,11 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zalgo-promise": {
+      "version": "1.0.48",
+      "resolved": "https://registry.npmjs.org/zalgo-promise/-/zalgo-promise-1.0.48.tgz",
+      "integrity": "sha512-LLHANmdm53+MucY9aOFIggzYtUdkSBFxUsy4glTTQYNyK6B3uCPWTbfiGvSrEvLojw0mSzyFJ1/RRLv+QMNdzQ=="
     }
   }
 }

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@paypal/react-paypal-js": "^7.4.2",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",

src/App.js

@@ -10,7 +10,6 @@ function App() {
       <div className="content-wrap">
         <Nav />
         
-        {/* Not sure what to put for body content yet */}
         <ShowCase />
         <Purchase />
         <PayPal />

src/components/mainPage/paypal.jsx

@@ -1,10 +1,45 @@
-import React from "react";
+import React, { useState } from "react";
+import { PayPalScriptProvider, PayPalButtons, FUNDING } from "@paypal/react-paypal-js";
+
+const initialOptions = {
+  "client-id": "AfXKJOXmvSNSIIAxR_Vx6sTcmkrKRcVBug-cz2FV7KXEwVGzpISqfdwQHdmfR1pdvQ9Wml75fnoq1MYH",
+  currency: "USD",
+  intent: "capture"
+}
+
 
 const PayPal = () => {
+
+  const createOrder = (data, actions) => {
+    return actions.order.create({
+      purchase_units: [{
+        amount: {
+          currency_code: "USD",
+          value: 55,
+        }
+      }]
+    });
+  }
+  
+  const onApprove = (data, actions) => {
+    return actions.order.capture().then(function(details) {
+      alert('Transaction completed by ' + details.payer.name.given_name);
+    });
+  }
+
   return (
     <>
       <div className="container">
-        <button className="bg-primary"> Pay with PayPal</button>
+        <PayPalScriptProvider options={initialOptions}>
+          <div style={{ maxWidth: "80px" }}>
+            <PayPalButtons
+              fundingSource={FUNDING.PAYPAL}
+              style={{ height: 25 }}
+              createOrder={createOrder}
+              onApprove={onApprove}
+            />
+          </div>
+        </PayPalScriptProvider>
       </div>
     </>
   );