PayPal React 在更改金额后显示额外的按钮

Question

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

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

我正在尝试制作一个 React PayPal 按钮来更改道具更改的账单金额。

我用道具价格调用以下组件，每次价格变化时我都想重新渲染按钮以更新实际价格。 没有 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>
  );
};

除了在每次道具更改时创建一个新按钮并将其添加到旧按钮的底部外，一切正常。我想要我的新按钮来替换旧按钮。 不使用 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 returns (new/current) 所需的值，则将使用该值。

基本上，只有单击按钮才会调用 createOrder 函数。

PayPal React 在更改金额后显示额外的按钮

PayPal React shows extra buttons after changing amount

reactjs

paypal

paypal-sandbox

paypal-rest-sdk