Square Payment Form

Square Payment Form problems

Troubleshoot problems with the Square payment form.

The 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. See the HTTPS Overview for help getting HTTPS enabled for your site.

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

SqPaymentForm will 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 1 of the following is likely true:

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

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

  • The application ID is incorrectly set with an access token (e.g., 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 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 will 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 may not be triggered in single-page web applications when the form is initialized after the DOMContentLoaded event has fired.

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 will log 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 webpage. These listeners go away when control is passed to a new page, but if you have a single-page web application, those listeners might remain longer than you want.

Solution:

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

paymentForm.destroy();