时间戳

首页 > 解决方案 > React 中的智能 PayPal 按钮，禁用该按钮

reactjs - React 中的智能 PayPal 按钮，禁用该按钮

问题描述

我在 React 中实现了PayPal 智能按钮：

function PayPalButtonComponent(props: PayPalButtonProps) {
  const [show, set_show] = useState(false);
  const [error, set_error] = useState<string>();

  const create_order = (_: any, actions: any) => {
    return actions.order.create({
      purchase_units: [
        {
          amount: {
            currency: props.currency || "EUR",
            value: props.total
          }
        }
      ]
    });
  };
  const handle_approve = (_: any, actions: any) => {
    return actions.order.capture().then((details: any) => {
      if (props.onSuccess) props.onSuccess(details);
    });
  };
  const handle_cancel = () => {
    if (props.onCancel) props.onCancel();
  };
  const handle_error = () => {
    if (props.onError) props.onError();
  };
  const render_button = () => {
    const Button = paypal.Buttons.driver("react", { React, ReactDOM });
    return (
      <Button
        style={{
          layout: "horizontal",
          size: "responsive",
          shape: "rect",
          color: "gold",
          tagline: false
        }}
        funding={{
          allowed: [paypal.FUNDING.CARD, paypal.FUNDING.PAYPAL],
          disallowed: [paypal.FUNDING.CREDIT]
        }}
        createOrder={create_order}
        onApprove={handle_approve}
        onError={handle_error}
        onCancel={handle_cancel}
      />
    );
  };

  useEffect(() => {
    if (props.isScriptLoaded) {
      if (props.isScriptLoadSucceed) set_show(true);
      else set_error("Unable to load the paypalscript");
    }
  }, [props.isScriptLoaded, props.isScriptLoadSucceed]);

  if (error) return <p>{error}</p>;
  if (!show) return <FakeButton />;

  return render_button();
}

由于没有文档，我一直在努力在反应中实现这些按钮，我从这里找到并复制了一些代码并试图猜测其他东西。但我不明白如何禁用该按钮。

在本指南中，他们声明可以在操作对象上调用 disable() 方法，但无法弄清楚如何通过我的配置来实现这一点。

你有没有尝试过类似的东西？您知道可以遵循的任何文档吗？

编辑

我想要完成的是在付款期间将按钮设置为禁用状态。我知道有 paypal 覆盖，但是当交易完成时，我更改了应用程序路由，并且由于它在调用 onSuccess 时发生，由于 actions.order.capture() 的明显异步性质，这不能立即发生，所以有一段时间可以再次单击贝宝按钮。如果我可以禁用按钮，我已经解决了问题。

onInit 实现允许您在单击按钮之前禁用/启用按钮，这对于结帐前的某种验证（如检查的条款）很有用，但不适用于我的情况。我也尝试过调用 actions.disable() ，create_order但这会破坏按钮。

标签： reactjstypescriptpaypalpaypal-buttons

解决方案

这里有同样的情况，文档中的 onInit 示例并不像某些人认为的那么简单......您需要在付款时创建隐藏输入并为其分配 somsort 变量，以实现在付款后禁用按钮。糟糕的是没有人解决这个问题。

推荐阅读