Checkout buttons appear twice and popups close as soon as they appear (ReactJS)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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;

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Good day @perpetualyWeary,
Thank you for posting to the PayPal community.
Please cross check your PayPal Business account and make sure it is verified and confirmed without any account limitations.
If your still facing issue, please create a MTS ticket via - https://www.paypal-support.com/s/?language=en_US with the detail information and error details.
Sincerely,
Chiranjeevi
PayPal/Braintree MTS
If this post or any other was helpful, please enrich the community by giving kudos or accepting it as a solution.

Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
- PayPal Pay buttons a mysterious process in PayPal Payments Standard
- Lable name of the checkout button. in PayPal Payments Standard
- Integrate PayPal Checkout, code examples not working in Sandbox Environment
- My form has recently stopped sending the quantity info direct to the paypal checkout page. in PayPal Payments Standard
- paypal angular sandbox, receiving not approved order ,when Capture even OnApprove is triggered in Sandbox Environment