i'm Trying to make react paypal button that change the billing amount on props change

问题

i'm Trying to make react paypal button that changes the billing amount on props change. I call the following component with props price and everytime the price change i would like to rerender the button to update the actual price.

const PaypalForm = props => {
  let paypalRef = useRef();

  useEffect(() => {      
    window.paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                description: "test",
                amount: {
                  currency_code: "USD",
                  value: props.price
                }
              }
            ]
          });
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
          console.log(order);
        },
        onError: err => {
          setError(err);
          console.error(err);
        }
      })
      .render(paypalRef.current);
  }, [props.price]);

  return (
    <Row className="justify-content-center">
      {error && <div>Uh oh, an error occurred! {error.message}</div>}
      <div ref={paypalRef} />
    </Row>
  );
};

Everything is working except that a new button is created and added in the bottom of old one at each props change. I would like my new button to replace the old one.

回答1:

You should really just use react-paypal-button-v2 It updates with props, works as a stateless function and works with SSR such as next.js. It even allows bypassing actions.order.create() so that you can call your own API's.

import { PayPalButton } from "react-paypal-button-v2";

const PaypalButton = ({total, cart}) => {
  return (
    <PayPalButton
    createOrder={(data, actions) => {
      return fetch('/api/paypal/create-transaction', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }, 
        body: JSON.stringify({
            total: total,
            cart: cart,
        })
      })
      .then((response) => {return response.json()})
      .then((data) => {return data.orderID})
      .catch(error => console.log(error))
    }}
    onApprove={(data) => {
      // Capture the funds from the transaction
      return fetch('/api/paypal/capture-transaction', {
        method: 'POST',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({ orderID: data.orderID })
      })
        .then((res) => { return res.json() })
        .then((details) => {
          if(details === 200){
            console.log('success');
          } else {
            console.log('failure');
          }
        })
        .catch(error => {
          console.log(error)
        })
    }}
    options={{
      clientId: process.env.PAYPAL_CLIENT_ID
    }}
  />
  );
}

export default PaypalButton;

来源：https://stackoverflow.com/questions/57826646/im-trying-to-make-react-paypal-button-that-change-the-billing-amount-on-props-c