How to Reset Credit Card Form after Submit the Form in Square Connect

Question

In Square Connect, I am creating Credit Card Nonce using sqPaymentForm. Once I submit the form and create the Nonce, I would like to reset form/clear all textboxes. I am using Angular 7 and FormGroup doesn't work with the sqPaymentForm. so how can I reset my form on form Submit?

this.paymentForm = new SqPaymentForm({

        // Initialize the payment form elements
        applicationId: this.applicationId,
        locationId: this.locationId,
        autoBuild: false,
        inputClass: 'sq-input',
        // Initialize the credit card placeholders
        cardNumber: {
          elementId: 'sq-card-number',
          placeholder: 'Valid Card Number'
        },
        cvv: {
          elementId: 'sq-cvv',
          placeholder: 'CVV'
        },
        expirationDate: {
          elementId: 'sq-expiration-date',
          placeholder: 'Expiration'
        },
        postalCode: {
          elementId: 'sq-postal-code',
          placeholder: 'Zip Code'
        },
        // SqPaymentForm callback functions
        callbacks: {
          /*
           * callback function: methodsSupported
           * Triggered when: the page is loaded.
           */

          /*
           * callback function: cardNonceResponseReceived
           * Triggered when: SqPaymentForm completes a card nonce request
           */
          cardNonceResponseReceived: (errors, nonce, cardData) => {
            if (errors) {
              // Log errors from nonce generation to the Javascript console
              console.log("Encountered errors:");
              errors.forEach(function (error) {
                console.log('  ' + error.message);
              });
              return;
            }

            this.updateCustomerCard(nonce, cardData.billing_postal_code);
          },

          /*
           * callback function: paymentFormLoaded
           * Triggered when: SqPaymentForm is fully loaded
           */
          paymentFormLoaded: function () {
            /* HANDLE AS DESIRED */
          }
        }
      });

      this.paymentForm.build();
    }

Answer 1

There's no way to directly edit any of the fields, so you won't be able to reset the fields one-by-one. However, you do have the ability to call destroy() on the payment form, and then call build() to rebuild the form (which would essentially reset all of the fields).