brian_huang/oem-automation-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ADD: Paypal button functionality

Browse Source
This commit is contained in:
Brian Huang 2021-11-09 19:14:43 -05:00
parent ac970950ac
commit ff6f57d7db
5 changed files with 89 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

50
package-lock.json generated
View File

@ -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=="
}
}
}

1
package.json
View File

@ -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",

1
src/App.js
View File

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

39
src/components/mainPage/paypal.jsx
View File

@ -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>
</>
);