[FEATURE REQUEST] createOrder should check return value

[ctsimpouris]

Is your feature request related to a problem? Please describe. Currently we would like to make a last-minute validation before clicking the PayPal button, and in case a problem arises stop the process and show a message showing for instance "Please fill all fields before proceeding".

Describe the solution you'd like I don't know if it will work as expected, but it would be nice for createOrder at index.tsx:184 to check the return of the createOrder prop function, and in case it's empty stop the process.

Describe alternatives you've considered

1. I Tried onClick={(e) => {e.preventDefault(); window.alert('Clicked button'); return false;}}. Function is indeed called and alert box is shown, but an error appears Uncaught TypeError: e.preventDefault is not a function and PayPal popup still appears.

2. What we have done is do our validation checks within createOrder, and return null if it doesn't validate. This shows the PayPal popup briefly and closes immediatelly. It's far from ideal but it does the trick for the time being.

   
   /*
   * Handles the front-end behavior after paypal returns error
   */
   onError = (error) => {
   // TODO: We need to test this. Haven't found a way in sandbox
   // https://developer.paypal.com/docs/checkout/integration-features/handle-errors/
   if (error.message.indexOf('Expected an order id to be passed') >= 0)
     return;
   
   return this.handleError(error.message, error);
   };
   
   /*
   * Main render function
   */
   render() {
   return (
         <PayPalButton
           createOrder={(data, actions) => {
             // This will produce a Console error, unfortunately
             if (!this.props.prePayCheck())
               return;
   
             this.setState({ in_progress: true });
   
             return actions.order.create(PaypalOrder);
           }}
           onApprove={this.onApprove}
           onCancel={this.onCancel}
           onError={this.onError}
           options={....}
         />
   );
   }
   }

[x1aodingdang]

Is your feature request related to a problem? Please describe. Currently we would like to make a last-minute validation before clicking the PayPal button, and in case a problem arises stop the process and show a message showing for instance "Please fill all fields before proceeding".

Describe the solution you'd like I don't know if it will work as expected, but it would be nice for createOrder at index.tsx:184 to check the return of the createOrder prop function, and in case it's empty stop the process.

Describe alternatives you've considered

1. I Tried onClick={(e) => {e.preventDefault(); window.alert('Clicked button'); return false;}}. Function is indeed called and alert box is shown, but an error appears Uncaught TypeError: e.preventDefault is not a function and PayPal popup still appears.
2. What we have done is do our validation checks within createOrder, and return null if it doesn't validate. This shows the PayPal popup briefly and closes immediatelly. It's far from ideal but it does the trick for the time being.

  /*
   * Handles the front-end behavior after paypal returns error
   */
  onError = (error) => {
    // TODO: We need to test this. Haven't found a way in sandbox
    // https://developer.paypal.com/docs/checkout/integration-features/handle-errors/
    if (error.message.indexOf('Expected an order id to be passed') >= 0)
      return;

    return this.handleError(error.message, error);
  };

  /*
   * Main render function
   */
  render() {
    return (
          <PayPalButton
            createOrder={(data, actions) => {
              // This will produce a Console error, unfortunately
              if (!this.props.prePayCheck())
                return;

              this.setState({ in_progress: true });

              return actions.order.create(PaypalOrder);
            }}
            onApprove={this.onApprove}
            onCancel={this.onCancel}
            onError={this.onError}
            options={....}
          />
    );
  }
}

I have the same problem. Have you solved it

[ctsimpouris]

I have the same problem. Have you solved it

unfortunately no!