Блог

У меня есть компоненты Vue, и одним из моих компонентов Vue является форма оплаты Square. По моему mounted() , у меня есть вся квадратная логика и создание формы как paymentForm . После создания платежа мне нужно выполнить paymentForm.build() . Как я могу это сделать, не используя setTimeout?

 mounted() {

      this.paymentForm = new SqPaymentForm({
              // Initialize the payment form elements
            autoBuild: false,
            applicationId: applicationId,
            locationId: locationId,
            inputClass: 'form-control',

            // Customize the CSS for SqPaymentForm iframe elements
            inputStyles: [{
                fontSize: '14px',
            }],

            // Initialize the credit card placeholders
            cardNumber: {
                elementId: 'sqCardNumber',
                placeholder: 'Card Number'
            },
            cvv: {
                elementId: 'sqCvCode',
                placeholder: 'CVV'
            },
            expirationDate: {
                elementId: 'sqExp',
                placeholder: 'MM/YY'
            },
            postalCode: {
                elementId: 'sqPostalCode',
                placeholder: 'Postal Code'
            },
      // SqPaymentForm callback functions
      callbacks: {
        methodsSupported: function (methods) {},

        createPaymentRequest: function () {},

        cardNonceResponseReceived: function(errors, nonce, cardData) {
            debugger

            if (errors) {
                cardNonceError(errors);
                return;
            }

            cardNonceReceived(nonce);
        },

        unsupportedBrowserDetected: function() {
            alert('Sorry, your browser is not supported!');
        },
        inputEventReceived: function(inputEvent) {
            switch (inputEvent.eventType) {
                case 'focusClassAdded':
                    // HANDLE AS DESIRED
                    break;
                case 'focusClassRemoved':
                    // HANDLE AS DESIRED
                    break;
                case 'errorClassAdded':
                    // HANDLE AS DESIRED
                    break;
                case 'errorClassRemoved':
                    // HANDLE AS DESIRED
                    break;
                case 'cardBrandChanged':
                    // HANDLE AS DESIRED
                    break;
                case 'postalCodeChanged':
                    // HANDLE AS DESIRED
                    break;
            }
        },

       paymentFormLoaded: function() {

           paymentForm.setPostalCode(postalCode);

           formDisplayHandler();
       }
      }
    });

    // setTimeout(() => {
        this.paymentForm.build()

    // }, 500);
}