Payment Form: Cookbook

Automatically Focus Payment Form Fields

Use JavaScript to set the focus on a payment form input field.

Payment Form

Once the payment form is loaded, you can use paymentForm.focus('FIELD') to focus a particular field. For example, you might want to automatically focus the card number field as soon as the form is ready.

Before you start

  • You have integrated the payment form into your web application.

Programatically focus form fields

The following example sets the focus on the payment form field that is named as an argument of the focus function.

  callbacks: {
    ...
    /*
     * callback function: paymentFormLoaded
     * Triggered when: SqPaymentForm is fully loaded
     */
    paymentFormLoaded: function() {
      paymentForm.focus("cardNumber");
    }
  }
});

Focusable PaymentForm fields

You can call .focus() on cardNumber, cvv, expirationDate, and postalCode. Calling .focus() on any other form field will return an error.

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