In this new blog series, 2Checkout explores the developments and features of its brand new Payment API, currently in BETA. To see the new 2Checkout Payment API BETA and use it as your new checkout, apply here.
We know that all of the input fields in this form are required to create the token, so the first attributes we want to add to each are the “required” and “title” attributes.
If a field is left empty, this will display a callout with the field title attribute.
But what if HTML5 is not supported?
Most modern desktop and mobile browsers — such as the latest versions of Chrome, Firefox, and IE10+ — already support HTML5 form attributes. Unfortunately, HTML5 attributes aren’t yet supported on the default android browser, Mobile Safari, or any version of Internet Explorer below IE10. Fortunately, there are some battle tested polyfills available such as h5Validate and Webshims which can utilized to add HTML5 validation support to these unsupported browsers.
Displaying API errors
The API can also return it’s own validation errors based on the values entered. In the `errorCallback` function above, you can see that we are alerting a message if an error occurs when creating the token. This will work adequately, but it’s more customary to display error messages above the payment form and clear out the sensitive input fields.
So to finish up this example, let’s add some logic to our `errorCallback` function to clear the credit card fields and display our error message above the form.