1

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たが、それはボタンを壊します。

4

1 に答える 1