我有Vue组件,而我的Vue组件之一是Square付款表单。在我的mounted()
中,我拥有所有的Square逻辑,并将表单制作为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);
}