I am working on a small Ecommerce site, and have to integrate paypal into my nextjs application. I don't have any server and am using a cms. I am using @paypal/react-paypal-js for it, and have pasted the below template code from the docs. Now the paypal button's rendering, I can see the paypal modal too, I fill in the sample sandbox credentials for testing, it logs in and then suddenly I get this message in the popup: "Things don't appear to be working at the moment"However when I click use debit/credit card button below paypal button, that's working.
const PayPalButton: React.FC<PayPalButtonProps> = ({ amount, onSuccess, currency = 'USD'}) => { // Create order function const createOrder = (data: any, actions: any) => { return actions.order.create({ purchase_units: [{ amount: { value: amount, // Use the prop instead of hardcoded value currency_code: currency, // Use the currency prop }, }], }).then((orderID:string)=> { console.log(orderID) ; return orderID ; }) }; const onApprove = (data: any, actions: any) => { return actions.order.capture().then((details: any) => { console.log("Transaction details:", details); // Log details of the successful capture onSuccess(details); // Call your success callback with the details alert('Transaction completed by '+ details.payer.name.given_name); }).catch((error: any) => { console.error("Error capturing payment:", error); // Log any error during capture alert("An error occurred while completing the transaction."); }); }; // Handle errors const onError = (err: any) => { console.error("PayPal error:", err); alert("An error occurred during the payment process."); }; if (!process.env.NEXT_PUBLIC_CLIENT_ID) { console.error("PayPal Client ID is not configured"); return null; } return (<PayPalScriptProvider options={{ clientId: process.env.NEXT_PUBLIC_CLIENT_ID, currency: "USD", intent: "capture", }}><PayPalButtons fundingSource= {FUNDING.PAYPAL} style={{ layout: "vertical" }} createOrder={createOrder} onApprove={onApprove} onError={onError} /></PayPalScriptProvider> );};export default PayPalButton;