Open ctsimpouris opened 4 years ago
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 thecreateOrder
prop function, and in case it's empty stop the process.Describe alternatives you've considered
- I Tried
onClick={(e) => {e.preventDefault(); window.alert('Clicked button'); return false;}}
. Function is indeed called and alert box is shown, but an error appearsUncaught TypeError: e.preventDefault is not a function
and PayPal popup still appears.- 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
I have the same problem. Have you solved it
unfortunately no!
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 thecreateOrder
prop function, and in case it's empty stop the process.Describe alternatives you've considered
onClick={(e) => {e.preventDefault(); window.alert('Clicked button'); return false;}}
. Function is indeed called and alert box is shown, but an error appearsUncaught TypeError: e.preventDefault is not a function
and PayPal popup still appears.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.