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