Square Payment Form

Troubleshoot Payment Form Problems

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:

// Set the application ID
var applicationId = "REPLACE_ME";

// Set the location ID
var locationId = "REPLACE_ME";

// Create and initialize a payment form object
var paymentForm = new SqPaymentForm({
  ...
});

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:

paymentForm.build();

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:

paymentForm.destroy();