Payment Form: Cookbook

Customize onLoad behavior for the Square Payment

Call custom JavaScript once the payment form is fully loaded.

Payment Form

The SqPaymentForm.paymentFormLoaded callback function can be used to populate the postal code element or take other actions unrelated to the payment form once the form is fully loaded.

Before you start

Customize paymentFormLoaded()

Use paymentForm.setPostalCode to set the postal code based on information previously entered (e.g., from a billing address). For example:

 1  // SqPaymentForm callback functions
 2  callbacks: {
 4    ...
 6    /*
 7     * callback function: paymentFormLoaded
 8     * Triggered when: SqPaymentForm is fully loaded
 9     */
10    paymentFormLoaded: function() {
11      paymentForm.setPostalCode("POSTAL CODE FROM SHIPPING");
12    }
13  }

Setting postalCode programmatically will make entering payment information more convenient for your customers.

Calling paymentForm.setPostalCode outside paymentFormLoaded will fail, even if the form has fully loaded. A successful call to paymentForm.setPostalCode also triggers the postalCodeChanged input event in the inputEvenReceived callback function.

NOTE: To preserve PCI compliance and ensure credit card information is collected securely, you cannot programmatically populate payment form fields other than the postal code.

For more information on possible input event types, see the Square payment form inputEventReceived function.

Contact Developer Support, join our Slack channel, or ask for help on Stack Overflow