reactjs - 更改金额后 PayPal React 显示额外按钮

Question

没有react-paypal-button-v2 ~~~开销为60KB

类似问题here但他们建议react-paypal-button-v2

我正在尝试制作一个 React PayPal 按钮，该按钮可以更改 Prop 更改时的账单金额。

我用 Prop 价格调用以下组件，每次价格变化时我想重新渲染按钮以更新实际价格。 没有react-paypal-button-v2

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>
  );
};

一切正常，除了在每次 Prop 更改时都会创建一个新按钮并将其添加到旧按钮的底部。我想要用新按钮替换旧按钮。 不使用react-paypal-button-v2

Answer 1

类似于:

useEffect(() => {
    if(window.myButton) window.myButton.close();
    window.myButton = 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);
        }
      });
    window.myButton.render(paypalRef.current);

但是，您实际上不需要在价格变化时重新呈现按钮!

您可以执行 value: document.getElementById('...').value 或类似操作(或您需要的任何变量或函数调用)

在您的示例中，如果单击按钮时 props.price 返回(新/当前)所需值，则将使用该值。

基本上，在单击按钮之前不会调用 createOrder 函数。