Handle Card Entry Errors
Deprecated
This component is deprecated. See below for guidance about what to use instead.
Note
The Square payment form is deprecated and replaced by the Web Payments SDK.
You should use the Web Payments SDK to take payments on a web client. The Web Payments SDK uses modern web styling as shown in the following image:
This topic explains how the SqPaymentForm
library returns error information about card entry errors and how you might show the error messages in the UI.
Customize the error UI
When payment token generation fails, the cardNonceResponseReceived callback provides error information using the errors
parameter. You should customize cardNonceResponseReceived
to show the buyer information that explains why the payment was not processed. For example, you might show a message box with the list of errors as shown:
You can update the example walkthrough to show the message box as follows:
Add a CSS class for the error message box.
Open mySqPaymentForm.css in the root folder of the Node.js project.
Add the following class to the file:
Add list bullet points
Add a <ul> element within the existing form container <div> to show a list of error messages.
Open index.html in the root folder of the Node.js project.
Add the following HTML after
<button id="sq-creditcard"...>
.
Update the JavaScript code
Update the cardNonceResponseReceived
callback code as shown to add error messages to a list and display the list in the error messages box.
If you need more assistance, contact Developer Support or ask for help in the Developer Forums.