Customize Payment Form Behavior
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 explores some of the advanced features of the payment form library.
To integrate a payment form in your website, use the
SqPaymentForm instance by setting some of the configuration fields (such as
postal code, and
expirationDate), provide implementation for a callback (cardNonceResponseReceived), and call the library functions (such as requestCardNonce) to generate a payment token.
This topic also explores other
SqPaymentForm features to customize the payment form. You should complete the walkthrough exercise so that you can test these
For processing credit cards for a seller in the United States (US), Canada (CA), and the United Kingdom (GB), the postal code (
postalCode) is a required payment field. For sellers taking payments in Japan, you can remove the postal code requirement by setting the
postalCode configuration field to
false in the
SqPaymentForm initialization as shown:
SqPaymentForm loads, the
paymentFormLoaded callback runs your custom code. You can use this callback to take actions, such as:
setPostalCodefunction to set the postal code value for the convenience of the buyer, using information previously entered (for example, from a billing address).
focusfunction to set the input focus on a particular
For example, this code fills the postal code with the buyer's billing address code and then sets the input focus on the payment card number field:
Note the following:
You can only call the
setPostalCodefunction inside the
A successful call to the
setPostalCodefunction generates the
postalCodeChangedevent causing the inputEvenReceived callback to execute.
To preserve PCI compliance and ensure that credit card information is collected securely, you cannot programmatically fill the card number, CVV, or expiration date.
SqPaymentForm library provides the
isSupportedBrowser function to detect unsupported host browsers before you instantiate the
SqPaymentForm library. When a host browser is not supported, the callback runs your custom logic to tell the buyer that the payment form cannot be loaded in the unsupported browser.