Frontend Engineer: Technical Challenge PayPal Button

Task

Take a look at the component PayPalButton, located in /src/PayPalButton.tsx.

What issues with it can you spot?

Answer: ...
Re-factor the class component into a functional component, while applying improvements regarding the problems you noted before and any other optimizations.
Bonus: Get rid of the HOC connect component (perhaps by utilising other available APIs).
Bonus: There is an issue with running the current implementation in React.StrictMode - the PayPal button will be duplicated, how would you go about solving this problem?

Answer: ...

The component uses PayPal SDK. Keep in mind that due to the mock returning a fake value, onAccept will never be executed in this demo and the expected result is the SDK failing with 500 while trying to call https://www.sandbox.paypal.com/smart/api/payment/fake_paypal_token/ectoken
The component also utilises formik as form/state management library.

You can provide your solution either

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
public		public
src		src
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmrc		.npmrc
.prettierrc		.prettierrc
README.md		README.md
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts