Troubleshoot problems with the Square payment form.
Square Payment Form

Troubleshoot Payment Form Problems 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:

A graphic showing the five visual elements of the Card payment method, which are represented as selectors that you specify in a card option styling object.

Troubleshoot problems with the Square payment form.

SqPaymentForm iFrame is not loading Permalink Get a link to this section

Cause:

The hosting site does not have HTTPS enabled or the page is rendering with the payment form in a hidden div.

Solution:

  • Secure your site with TLS to enable HTTPS calls or serve your website on localhost to test. For information about enabling HTTPS for your site, see TLS and HTTPS.

  • If you use the payment form in a hidden div, call SqPaymentForm.recalculateSize() when exposing the div to force SqPaymentForm to rerender the iframes.

SqPaymentForm does not generate form fields on a standard, multi-page web application Permalink Get a link to this section

Cause:

By default, SqPaymentForm automatically generates form fields when it detects a DOMContentLoaded event (when the hosting page finishes loading) and it is properly initialized with a valid application ID and location ID. A failure to load properly typically means one of the following is true:

  • The application ID, location ID, or both are not provided.

  • The application ID and location ID combination is invalid. For example, one of the IDs is a Sandbox ID and one is a production ID.

  • The application ID is incorrectly set with an access token (such as your Sandbox access token or personal access token). These values are not the same as the application ID.

Solution:

Check your initialization information and verify that the values provided are correct.

SqPaymentForm does not generate form fields on a single-page web application Permalink Get a link to this section

Cause:

By default, SqPaymentForm automatically generates form fields when it detects a DOMContentLoaded event (when the hosting page finishes loading) and it is properly initialized with a valid application ID and location ID. The DOMContentLoaded event might not be triggered in single-page web applications when the form is initialized after the DOMContentLoaded event has executed.

Solution:

To manage the payment form initialization manually, set the autoBuild field to false and add the following function call to the page where you want to initialize the payment form:

Calling paymentForm.build() when SqPaymentForm has already rendered the iframe fields logs an error to the JavaScript console.

SqPaymentForm listeners persisting on a single-page web application Permalink Get a link to this section

Cause:

The SqPaymentForm object registers multiple event listeners on your web page. These listeners go away when control is passed to a new page. However, if you have a single-page web application, those listeners might remain longer than you want.

Solution:

To manually remove the listeners from your web page, add the following function call where you want to clean up after the payment form:

If you need more assistance, contact Developer Support or ask for help in the Developer Forums.