Paypal-checkout-components: Validate form data on button click

[ccmatt02]

So I understand you do not wish to have us create clicks to the button from outside code. How would you recommend performing form validation in that case? If it is placed within the payment() function it will cause the PayPal window begin to load and then cancel out when you do not call paypal.rest.payment.create() which is clunky and ugly. Thanks for your help.

[bluepnume]

Hi @ccmatt02 - you're absolutely right, doing validation inside payment() is the wrong way to go. The reason we don't have a synchronous validate function is because the click happens inside the iframe, which can't communicate synchronously with the parent -- there's a discussion of that here: https://github.com/paypal/paypal-checkout/issues/139

Anyway, we do provide a different way of doing validation, by enabling and disabling the button when the parent page becomes valid/invalid. There's a code example here: https://developer.paypal.com/demo/checkout/#/pattern/validation

Hope that's helpful. Please let me know if I can elaborate on how to use it.

[jlchavez]

Hi @ccmatt02 - you're absolutely right, doing validation inside payment() is the wrong way to go. The reason we don't have a synchronous validate function is because the click happens inside the iframe, which can't communicate synchronously with the parent -- there's a discussion of that here: #139

Anyway, we do provide a different way of doing validation, by enabling and disabling the button when the parent page becomes valid/invalid. There's a code example here: https://developer.paypal.com/demo/checkout/#/pattern/validation

Hope that's helpful. Please let me know if I can elaborate on how to use it.

This "demo" doesn't exists anymore. There should be a validation mechanism.

[Anas96Awan-prog]

Have A look on this, this had solved my issue of Validation Error Popup upon Paypal Button Click

var actionStatus;
        paypal.Buttons({

                onInit:  function(data, actions) {
                    actions.disable();
                    actionStatus = actions;
                  },
                  onClick :  function(){
                    let val =  validateForm(); //returns status from your Custom Validation Checkpoint
                    if(!val){
                        actionStatus.disable();
                    }else {
                        actionStatus.enable();
                    }
                },
            createOrder: function(data, actions) {
                    return actions.order.create({
                        purchase_units: [{
                            amount: {
                                value: '25',
                                currency : 'USD'
                            }
                        }]
                    });

            },

            onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name);
            });
            },

            onError : function(err){
                console.log(err);
            }
        }).render('#paypal-button-container');

Thanks to this : https://developer.paypal.com/docs/checkout/integration-features/

[dani-easydevel]

Thanks to this : https://developer.paypal.com/docs/checkout/integration-features/

God bless you! It was a headache finding that on the documentation itself

[danyilkotenko]

@Anas96Awan-prog Thank you for the solution. But in case of successful validation the user has to double click the paypal button to actually toggle the paypal checkout flow.

[macfiss]

@Anas96Awan-prog Thank you for the solution. But in case of successful validation the user has to double click the paypal button to actually toggle the paypal checkout flow.

Quick solution:

const validateFields = {
  validate($fields, isInvalidate) {
    let isValid = true;

    $fields.each(function () {
      if (!this.validity.valid) {
        isValid = false;
        if (isInvalidate) $(this).trigger('invalid', this.validity);
      }
    });

    return isValid;
  },
  clear($fields) {
    $fields.each(function () {
      $(this).removeClass('is-invalid');
    });
  },
};

const $form = $('[data-billing-form]');
const $fields = $('[name*="_email"], [name*="_phone"]', $form);
const config = {/*....*/};

config.onClick = function () {
  validateFields.validate($fields, true);
};

config.validate = function (actions) {
  const form = $form.get(0);

  if (!validateFields.validate($fields)) {
    actions.disable();
  }

  form.addEventListener('change', function () {
    if (validateFields.validate($fields, true)) {
      actions.enable();
      validateFields.clear($fields);
    } else {
      actions.disable();
    }
  }, true);
};

paypal.Button.render(config, buttonEl);

[TangLiang]

@danyilkotenko I still facing this problem.do you fixed this?

thanks

[connectifyuser]

Have A look on this, this had solved my issue of Validation Error Popup upon Paypal Button Click

var actionStatus;
        paypal.Buttons({

                onInit:  function(data, actions) {
                    actions.disable();
                    actionStatus = actions;
                  },
                  onClick :  function(){
                    let val =  validateForm(); //returns status from your Custom Validation Checkpoint
                    if(!val){
                        actionStatus.disable();
                    }else {
                        actionStatus.enable();
                    }
                },
            createOrder: function(data, actions) {
                    return actions.order.create({
                        purchase_units: [{
                            amount: {
                                value: '25',
                                currency : 'USD'
                            }
                        }]
                    });

            },

            onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name);
            });
            },

            onError : function(err){
                console.log(err);
            }
        }).render('#paypal-button-container');

Thanks to this : https://developer.paypal.com/docs/checkout/integration-features/

in case of successful validation, the user has to double click the PayPal button can you please help methis.

[connectifyuser]

@Anas96Awan-prog Thank you for the solution. But in case of successful validation the user has to double click the paypal button to actually toggle the paypal checkout flow.

Why no one has this error I am facing the same. you have any solution?

[ABHI12800]

in case of successful validation, the user has to double click the PayPal button can you please help methis.

we can add an EventListener onchange and enable or disable the action according to that.
For example here I add a event listener on input fields, so when some one try to payment without filling inputs it wont allow to proceed and give alert message and when all fields are filled it enable the actions, so we did not need to click two times.

paypal.Buttons({
                 onInit:  function(data, actions) {
                    actions.disable();
                    document.querySelectorAll("input").forEach(i=>{
                        i.addEventListener("change",()=>{
                          if (validateForm()) {
                            actions.enable();
                          } else {
                            actions.disable();
                          }
                        });
                     });
                  },
                  onClick :  function(){
                      if( !validateForm()){
                          alert("Fill all input field's");
                      }
                },
            createOrder: function(data, actions) {
                    return actions.order.create({
                        purchase_units: [{
                            amount: {
                                value: '25',
                                currency : 'USD'
                            }
                        }]
                    });
            },

            onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name);
            });
            },

            onError : function(err){
                console.log(err);
            }
        }).render('#paypal-button-container');