React - 贝宝按钮在没有检查条件的情况下触发

Question

我正在使用 react-paypal-express-checkout 我必须选择：现金和 PayPal。

现金工作正常并检查所有条件。但是 bcs PayPal 是我的 CartScreen 组件中的一个单独组件，它打开并且不检查单个 if 条件并打开 PayPal window

CashButton 带有功能“cashTranSuccess”，它与“TranSuccess”功能相同只是没有 paymentID bcs 它只需要 react-paypal-express-checkout

所以我正在寻找的是，在打开 PayPal window.

之前检查所有 TranSuccess() 条件

PayPalButton.js

import React from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout';

export default class PayPalButton extends React.Component {
  render() {
    const onSuccess = (payment) => {
      // Congratulation, it came here means everything's fine!
      console.log('The payment was succeeded!', payment);
      // You can bind the "payment" object's value to your state or props or whatever here, please see below for sample returned data
      this.props.tranSuccess(payment);
    };

    const onCancel = (data) => {
      // User pressed "cancel" or close Paypal's popup!
      console.log('The payment was cancelled!', data);
      // You can bind the "data" object's value to your state or props or whatever here, please see below for sample returned data
    };

    const onError = (err) => {
      // The main Paypal's script cannot be loaded or somethings block the loading of that script!
      console.log('Error!', err);
      // Because the Paypal's main script is loaded asynchronously from "https://www.paypalobjects.com/api/checkout.js"
      // => sometimes it may take about 0.5 second for everything to get set, or for the button to appear
    };

    let env = 'sandbox'; // you can set here to 'production' for production
    let currency = 'EUR'; // or you can set this value from your props or state
    let carttotal = this.props.carttotal; // same a s above, this is the total amount (based on currency) to be paid by using Paypal express checkout
    // Document on Paypal's currency code: https://developer.paypal.com/docs/classic/api/currency_codes/

    const client = {
      sandbox:
        '',
      production: 'YOUR-PRODUCTION-APP-ID',
    };
    // In order to get production's app-ID, you will have to send your app to Paypal for approval first
    // For sandbox app-ID (after logging into your developer account, please locate the "REST API apps" section, click "Create App"):
    //   => https://developer.paypal.com/docs/classic/lifecycle/sb_credentials/
    // For production app-ID:
    //   => https://developer.paypal.com/docs/classic/lifecycle/goingLive/

    // NB. You can also have many Paypal express checkout buttons on page, just pass in the correct amount and they will work!
    // Style Options: https://developer.paypal.com/docs/checkout/standard/customize/buttons-style-guide/ ; https://wise.com/gb/blog/custom-paypal-button
    let style = {
      size: 'medium',
      color: 'gold',
      label: 'pay',
      tagline: false,
    };

    return (
      <PaypalExpressBtn
        env={env}
        client={client}
        currency={currency}
        total={carttotal}
        onError={onError}
        shipping={1}
        onSuccess={onSuccess}
        onCancel={onCancel}
        style={style}
      />
    );
  }
}

购物车屏幕

const tranSuccess = async (payment) => {
    const { paymentID } = payment;
    // Check time, min amoint, for delivery add delivery fees
    if (timeValidation === true) {
      if (sliderDeliveryValue === 'delivery') {
        if (carttotal > settings[0]?.minDeliveryAmount) {
          await axios.post(
            '/api/payment',
            { cartItems, paymentID, time, sliderDeliveryValue, carttotal },
            {
              headers: { Authorization: token },
            }
          );
          cartItems.map((remove) => {
            dispatch(deleteFromCart(remove));
          });
          //console.log(cartItems.length);
          toast.success(
            'Order successful',
            {
              position: toast.POSITION.TOP_RIGHT,
            }
          );
        } else {
          toast.error(
            `Min amount${settings[0]?.minDeliveryAmount}€`,
            {
              position: toast.POSITION.TOP_RIGHT,
            }
          );
        }
      } else if (sliderDeliveryValue === 'pickup') {
        if (carttotal > 2) {
          await axios.post(
            '/api/payment',
            { cartItems, paymentID, time, sliderDeliveryValue, carttotal },
            {
              headers: { Authorization: token },
            }
          );
          cartItems.map((remove) => {
            dispatch(deleteFromCart(remove));
          });
          //console.log(cartItems.length);
          toast.success(
            'Order successful',
            {
              position: toast.POSITION.TOP_RIGHT,
            }
          );
        } else {
          toast.error(`Min amount 2.00€`, {
            position: toast.POSITION.TOP_RIGHT,
          });
        }
      } else {
        toast.error('Choose delivery method', {
          position: toast.POSITION.TOP_RIGHT,
        });
      }
    } else {
      toast.error('closed', {
        position: toast.POSITION.TOP_RIGHT,
      });
    }
  };


<PayPalButton
  carttotal={carttotal}
  tranSuccess={tranSuccess}
/>

<div onClick={cashTranSuccess}>
 <CashButton />
</div>

Answer 1

考虑使用官方@paypal/react-paypal-js

使用 onInit 和 onClick 函数以及操作的验证示例。enable/disable 回调或返回承诺（操作。resolve/reject）可以在 the developer documentation 中找到。调整它以检查您需要的任何条件。

React - 贝宝按钮在没有检查条件的情况下触发

React - PayPal Button fires without checking conditions

if-statement

paypal

reactjs