Right now, for some reason, the buttons to check out are appearing twice for some strange reason. I know its not any of my browser settings or plugins because this also happens on a private window that doesn't load in any of that. Also, whenever I click on them, they try to open a pop up that closes immediately after opening, even when I open the localhost on a private window. Here's the code on PayPalCheckout.js import { useState } from "react";
import { Button } from "reactstrap";
import Paypal from "./PayPal";
const PaypalCheckout = () => {
const [checkout, setCheckout] = useState(false);
return (
<div>
{checkout ? (
<Paypal />
) : (
<Button
onClick={() => {
setCheckout(true);
}}
>
Checkout
</Button>
)}
</div>
);
};
export default PaypalCheckout; And here is the code from Paypal.js import { useEffect, useRef } from "react";
const Paypal = () => {
const paypal = useRef();
useEffect(() => {
window.paypal.Buttons({
createOrder: (data, actions, error) => {
return actions.order.createOrder({
intent: "CAPTURE",
purchase_units: [
{
description: 'ENTER DESC', //TODO: Order descriptions
amount: {
currency_code: "USD",
value: 650.00 //TODO: Change this number based on charge
}
}
]
})
},
onApprove: async (data, actions) => {
const order = await actions.order.capture;
console.log(order);
},
onError: (err) => {
console.log(err);
}
}).render(paypal.current)
}, [])
return (
<div>
<div ref={paypal}></div>
</div>
);
};
export default Paypal;
... View more
