I'm using react-paypal-express-checkout I've to options: Cash and PayPal.

Cash working fine and checks all conditions. But bcs PayPal is a seperate component in my CartScreen component it opens and don't check a single if conditions and opens the PayPal window

The CashButton comes with function "cashTranSuccess" it's the same function as "TranSuccess" just without the paymentID bcs it's only needed for react-paypal-express-checkout

So what I'm looking for is, to check all TranSuccess() conditions before open the PayPal window.

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 one rror = (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}
        one rror={onError}
        shipping={1}
        onSuccess={onSuccess}
        onCancel={onCancel}
        style={style}
      />
    );
  }
}

CartScreen

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>

CodePudding user response：

Consider using the official @paypal/react-paypal-js

An example of validation using onInit and onClick functions and the actions.enable/disable callbacks or returning a promise (actions.resolve/reject) can be found in the developer documentation. Adapt this to check whatever condition you need.