如何在 Square Connect 中提交表格后重置信用卡表格

Question

在 Square Connect 中，我使用 sqPaymentForm 创建信用卡随机数。提交表单并创建 Nonce 后，我想重置 form/clear all 文本框。我正在使用 Angular 7 并且 FormGroup 不适用于 sqPaymentForm。那么如何在提交表单时重置我的表单？

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

无法直接编辑任何字段，因此您将无法重置字段 one-by-one。但是，您确实可以调用 destroy() on the payment form, and then call build() 来重建表单（这实际上会重置所有字段）。