javascript react-paypal-js不总是加载内部组件,如何显示错误的paypal按钮点击?

klr1opcd  于 2023-05-27  发布在  Java
关注(0)|答案(1)|浏览(146)

我的react-paypal-js支付网关有2个问题。我在网站的三个部分使用PayPal。一个是一个单一的支付按钮,工作正常(没有商家ID)。然后有2个按钮在一个组件(与商家ID).一个是作为客人订购的,一个是注册用户订购的。
我有时候会遇到这样的问题:“window.paypal.Buttons is undefined”这是一个可以通过在我的App.js中添加另一个PayPalScriptProvider来解决的问题是,它使用商家ID,让我们说单个支付按钮会有同样的问题,并使用App.js中的PayPalScriptProvider,然后钱就花错了人。
所以我的第一个问题是:如何在我的购物车组件中使用react-paypal-js reliable
第二个问题是:如何显示吐司错误,例如不接受服务条款onClick on the PayPal button + not opening the PayPal window.因此,当有错误只显示错误,当没有错误打开贝宝窗口。

const initialOptions = {
  'client-id': 'test',
  // 'merchant-id': 'test',
  currency: 'EUR',
  intent: 'capture',
  'enable-funding': ['sofort', 'giropay'],
  'disable-funding': ['card', 'sepa'],
};

function App() {
  return (
    <PayPalScriptProvider options={initialOptions}>
      <Router>
        <Header />
        <Pages />
        <Footer />
      </Router>
    </PayPalScriptProvider>
  );
}

export default App;

这是我的购物车组件:它有initialOptions并检查一些东西,如:是否接受服务条款?最低金额?等等。

const initialOptions = {
  'client-id': 'test',
  // 'merchant-id': 'test',
  // components: 'buttons',
  currency: 'EUR',
  intent: 'capture',
  'enable-funding': ['sofort', 'giropay'],
  'disable-funding': ['card', 'sepa'],
};

const CartScreen = () => {
  const [paypalErros, setPaypalError] = useState(true);

...

  const paypalTranSuccess = async (payment) => {
    const { paymentID } = payment;
    if (sliderDeliveryValue === '') {
      toast.error(`Choose delivery method`, {
        position: toast.POSITION.BOTTOM_RIGHT,
      });
      setPaypalError(true);
      return false;
    }
      if (!acceptBox) {
        toast.error(`Accept ToS`, {
          position: toast.POSITION.BOTTOM_RIGHT,
        });
        setLoading(false);
        setPaypalError(true);
        return false;
      }
      setPaypalError(false);
    } else {
      setPaypalError(true);
      setLoading(false);
      toast.error(`Mindestbestellwert 2.00€`, {
        position: toast.POSITION.BOTTOM_RIGHT,
      });
    }
  };

<div onClick={paypalTranSuccess}>
   <PayPalButton
     carttotal={carttotal}
     paypalErros={paypalErros}
     paypalTranSuccess={paypalTranSuccess,}
   />
</div>

我的PayPalButton组件

const PayPalFeeButton = ({
  carttotal,
  paypalErros,
  paypalTranSuccess,
}) => {
  const dispatch = useDispatch();

  const [{ isPending }] = usePayPalScriptReducer();
  return (
    <>
      {isPending ? <LoadingMedium /> : null}
      <PayPalButtons
        onClick={(data, actions) => {
          paypalTranSuccess();

          if (!paypalErros) {
            alert("TEST);
            return actions.reject();
          } else {
            return actions.resolve();
          }
        }}
        createOrder={(data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                description: 'Order',
                amount: {
                  value: carttotal,
                  currency_code: 'EUR',
                },
              },
            ]
          });
        }}
        onError={() => {
          //setPaid(false);
          toast.error('Zahlung nicht erfolgreich', {
             position: toast.POSITION.BOTTOM_RIGHT,
          });
        }}
      />
    </>
  );
};

编辑错误:

react-paypal-js.js:417 Uncaught Error: Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined.
To fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:
`<PayPalScriptProvider options={{ components: 'buttons'}}>`.

The above error occurred in the <PayPalButtons> component:

react-paypal-js.js:417 Uncaught Error: Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined.
To fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:
`<PayPalScriptProvider options={{ components: 'buttons'}}>`.

编辑错误2:

I added the components: 'buttons'

Uncaught Error: Attempted to load sdk version 5.0.338 on page, but window.paypal at version undefined already loaded.

To load this sdk alongside the existing version, please specify a different namespace in the script tag, e.g. <script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID" data-namespace="paypal_sdk"></script>, then use the paypal_sdk namespace in place of paypal in your code.

Uncaught Error: Attempted to load sdk version 5.0.338 on page, but window.paypal at version undefined already loaded.

Uncaught Error: Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined.

The above error occurred in the <PayPalButtons> component:

Uncaught Error: Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined.
7eumitmz

7eumitmz1#

“window.paypal.Buttons is undefined”表示JS SDK由于某种原因加载失败。查看您可以在浏览器控制台和网络选项卡中找到有关故障的详细信息
据我所知,SDK商家ID用于按钮资格决策,但如果您希望接收者是APP客户端ID帐户以外的帐户,则仍然需要specify a payee object来创建订单。

相关问题