I am building a basic react integration, and I tested that buttons do work properly, except that about half of the time, they just simply disappear from the webpage after appearing briefly for 100ms or so
import React from 'react';
import "./website1.css"
//import { loadScript } from 'paypal-checkout';
import { PayPalScriptProvider, PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";
import { useEffect } from "react";
class Website1 extends React.Component {
constructor(props) {
super(props);
this.state = {
cartItems: []
};
this.addToCart = this.addToCart.bind(this);
this.removeFromCart = this.removeFromCart.bind(this);
this.handleEmptyCart = this.handleEmptyCart.bind(this);
}
addToCart(item) {
this.setState(prevState => ({
cartItems: [...prevState.cartItems, item]
}));
}
handleEmptyCart() {
this.setState({ cartItems: [] });
}
removeFromCart(index) {
this.setState(prevState => {
const newItems = [...prevState.cartItems];
newItems.splice(index, 1);
return { cartItems: newItems };
});
}
render() {
return (
<div className="website1-container">
<div className="products-container">
<h2>Products</h2>
<ul>
<li>
Product 1
<button onClick={() => this.addToCart("Product 1")}>
Add to cart
</button>
</li>
<li>
Product 2
<button onClick={() => this.addToCart("Product 2")}>
Add to cart
</button>
</li>
<li>
Product 3
<button onClick={() => this.addToCart("Product 3")}>
Add to cart
</button>
</li>
</ul>
</div>
<div className="cart-panel">
<h2>Shopping Cart</h2>
<ul>
{this.state.cartItems.map((item, index) => (
<li key={index}>
{item}
<button onClick={() => this.removeFromCart(index)}>
Remove
</button>
</li>
))}
{/* Check if the cart is not empty */}
{this.state.cartItems.length > 0 && (
<><button className="empty-cart-button" onClick={this.handleEmptyCart}>Empty Cart</button><div className="paypal-buttons-container" id="paypal-button-container">
<PayPalScriptProvider
options={{
"client-id": "myid",
components: "buttons",
currency: "USD"
}}
>
<ButtonWrapper
currency={currency}
showSpinner={true}
>
</ButtonWrapper>
</PayPalScriptProvider>
</div></>
)}
</ul>
</div>
</div>
);
}
}
export default Website1;
// This values are the props in the UI
const amount = "2";
const currency = "USD";
const style = { "layout": "vertical" };
// Custom component to wrap the PayPalButtons and handle currency changes
const ButtonWrapper = ({ currency, showSpinner }) => {
// usePayPalScriptReducer can be use only inside children of PayPalScriptProviders
// This is the main reason to wrap the PayPalButtons in a new component
const [{ options, isPending }, dispatch] = usePayPalScriptReducer();
useEffect(() => {
dispatch({
type: "resetOptions",
value: {
...options,
currency: currency,
},
});
}, [currency, showSpinner]);
return (<>
{(showSpinner && isPending) && <div className="spinner"></div>}
<p>Buttons go here</p>
<PayPalButtons
style={style}
disabled={false}
forceReRender={[amount, currency, style]}
fundingSource={undefined}
createOrder={(data, actions) => {
return actions.order
.create({
purchase_units: [
{
amount: {
currency_code: currency,
value: amount,
},
},
],
})
.then((orderId) => {
// Your code here after create the order
return orderId;
});
}}
onApprove={function (data, actions) {
return actions.order.capture().then(function () {
// Your code here after capture the order
});
}}
/>
</>
);
}
The backend works fine as far as I know
It’s using the server.js from standard-integration
import "dotenv/config"; // loads variables from .env file
import express from "express";
import * as paypal from "./paypal-api.js";
const { PORT = 3000 } = process.env;
const app = express();
app.use(express.static("public"));
// parse post params sent in body in json format
app.use(express.json());
app.post("/my-server/create-paypal-order", async (req, res) => {
try {
const order = await paypal.createOrder();
res.json(order);
} catch (err) {
res.status(500).send(err.message);
}
});
app.post("/my-server/capture-paypal-order", async (req, res) => {
const { orderID } = req.body;
try {
const captureData = await paypal.capturePayment(orderID);
res.json(captureData);
} catch (err) {
res.status(500).send(err.message);
}
});
app.listen(PORT, () => {
console.log(`Server listening at http://localhost:${PORT}/`);
});
Sometimes the buttons are there and sometimes they are not,
When they are not, the iframe just disappears
How can I debug this issue?
