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

xfb7svmp 于 2023-04-20 发布在 React

关注(0)|答案(2)|浏览(174)

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

我一直在努力实现这些按钮，因为没有文档，我已经找到并复制了一些代码从here和试图猜测其他的东西。但我不明白如何禁用按钮。
在this guide中，他们声明可以在actions对象上调用disable（）方法，但不知道如何用我的配置来实现这一点。
你曾经尝试过类似的东西吗？你知道任何可以遵循的文档吗？

编辑

我试图完成的是在支付过程中将按钮设置为禁用状态。我知道有贝宝覆盖，但当交易完成时，我更改应用程序路由，因为它发生在onSuccess被调用时，由于action.order.capture的明显异步性质（）这不可能瞬间发生，所以有一个时刻，当一个人可以再次点击贝宝按钮。如果我可以禁用按钮，我已经解决了这个问题。
onInit实现允许你在点击按钮之前禁用/启用按钮，这对于结账前的某种验证很有用（比如检查术语），但不适用于我的情况。我也尝试在create_order中调用actions.disable（），但这会破坏按钮。

reactjs

来源：https://stackoverflow.com/questions/60635059/smart-paypal-buttons-in-react-disable-the-button

2条答案

按热度按时间

tez616oj1#

在这里有同样的情况和onInit的例子，从文档是不是直向前一些认为...你需要创建隐藏的输入和分配somsort的变量，它支付时，为了实现按钮被禁用后付款。坏没有人解决这个问题。

赞(0）回复(0）举报 2023-04-20

ecr0jaav2#

对于React，我会使用官方的PayPal NPM（@paypal/react-paypal-js）包。他们有一些关于如何使用它的好文档......在你的情况下，只需使用组件，你可以设置它是否被禁用作为属性。
看看他们的代码示例：

import { useEffect } from "react";
import {
    PayPalScriptProvider,
    PayPalButtons,
    usePayPalScriptReducer
} from "@paypal/react-paypal-js";

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

export default function App() {
    return (
        <div style={{ maxWidth: "750px", minHeight: "200px" }}>
            <PayPalScriptProvider
                options={{
                    "client-id": "test",
                    components: "buttons",
                    currency: "USD"
                }}
            >
                <ButtonWrapper
                    currency={currency}
                    showSpinner={false}
                />
            </PayPalScriptProvider>
        </div>
    );
}

赞(0）回复(0）举报 2023-04-20

我来回答

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

2条答案

相关问题

热门标签

最新问答