Happy Business Starts Here

Payment Page 2.0 form fields validation

Valued Scholar

Payment Page 2.0 form fields validation


I am looking for client side validation on all the text input fields on the payment form. Does the zuora client library have any in-built validation to allow / set validation rules on the text input fields such as the phone field ?


if the email field is not in the correct format then the Payament Page 2.0 validates and returns and invalid email in the client side error message (provided the email field was marked as Required).

However it doesn't validate the rest of the text input fields - for instance the phone field can take in invalid phone number or all text and no error returned in the callback.



Re: Payment Page 2.0 form fields validation

Hello @gbordawekar, it looks like you can enable client side validation for Payment Pages 2.0


Client-Side Validation: Select Enable client-side validation to check the required fields for values.

  • If the client-side validation is enabled, you can specify a custom error message for missing required fields in the Error Message field. 
  • Use the variable,  #fieldName, in the error message to include the missing field name. For example, "Please enter a valid #fieldName to continue." 

If you are unable to select or view this feature you may need to put in a suppor ticket to enable it.





Tags (2)
Valued Scholar

Re: Payment Page 2.0 form fields validation

@rjohnson Thanks for addressing my query. We already have implemented these changes (Enable client-side validation is ON with custom error message).


In our  MVC .net app I have implemented the custom error message handling using errorMessageCallback function as defined in https://knowledgecenter.zuora.com/CB_Billing/LA_Hosted_Payment_Pages/B_Payment_Pages_2.0/N_Error_Han...


However Zuora's client side validation returns error messages only when the required fields are not completed or if the CC number fails the checksum ("HostedPageFieldValidationError" errors).  I am looking for assistance in validating the payment form fields on the client side for the correct format.. e.g. phone number format. currently if the phone field is filled in then the Callback function gets called and then I have to validate the phone format by checking the response.phone. but now once the callback function is called, the (inside) zuora diables the Submit button on the the HPP and I don't have a way to re-enable it to allow the user to enter the phone in the correct format and re-submit the Payment. 


Looking for a solution  - 

  1. to validate the payment fields for the correct format (specifically phone field, if email format fails then it's returned as a BusinessValidationError  in the errorMessageCallback function)
  2. enable the submit button (embedded in the iFrame) from the callback function and allowing the user to re-submit.