Handle Card Entry Errors
This component is deprecated. See below for guidance about what to use instead.
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.
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:
Open mySqPaymentForm.css in the root folder of the Node.js project.
Add the following class to the file:
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
cardNonceResponseReceived callback code as shown to add error messages to a list and display the list in the error messages box.