Squareup не загружает фреймы для Waterfox / IE11, Silent Error

Question

Я подтвердил, что код Square теперь работает со страницами, обслуживаемыми как application/xhtml+xml, и с точно таким же кодом Chrome работает, хотя Waterfox (и Firefox) не загружают фреймы для полей формы. Я подтвердил это в DOM (они не скрыты, оригинальные элементы-заполнители все еще там).

• Chrome запрашивает файл f.js, браузеры Gecko - нет.
• Элементы-заполнители, которые элементы iframe должны заменить, все еще находятся в DOM.
• Нет сообщений об ошибках в консолях разработчика в Waterfox 56, Firefox 64, Chrome 71 или Opera 12.1.
• Я отключил прототипы для тестирования.
• Браузеры дают одинаковые результаты для локального и живого тестирования.
• Объект var sqPaymentForm = new SqPaymentForm(...); отличается для браузеров Gecko.

Что есть у Геккона для sqPaymentForm:

• _handleDomContentLoaded
• clientController
• окр
• errorLogger
• опции

Что Gecko не имеет для sqPaymentForm:

• сборка
• _handleDomContentLoaded

Как ни странно, у меня ограниченный доступ к IE11. У меня не будет времени настроить Mac до позднего вечера в пятницу. Вот пара обрезанных скриншотов:

Firefox 56

IE 11

Вот объект sqPaymentForm (с очевидным базовым запутыванием):

var sqPaymentForm = new SqPaymentForm(
{
 applicationId: 'sandbox-abc',
 locationId: 'CBASEE123',
 applePay: {elementId: 'sq-apple-pay'},
 callbacks:
 {
  methodsSupported: function (methods)
  {
   if (methods.applePay && methods.applePay === true) {var element = document.getElementById('pay-button-area'); element.style.display = 'block';}
  },
  cardNonceResponseReceived: function(errors, nonce, cardData)
  {
   if (errors)
   {
    var errorDiv = document.getElementById('errors');
    errorDiv.innerHTML = '';
    errors.forEach(function(error) {var p = document.createElement('p'); p.innerHTML = error.message; errorDiv.appendChild(p);});
   }
   else
   {
    id_('card-nonce-submit').setAttribute('disabled','true');
    id_('card_brand').value = cardData.card_brand;
    id_('cc_end').value = cardData.last_4;
    id_('cc_month').value = cardData.exp_month;
    id_('cc_year').value = cardData.exp_year;
    id_('zip').value = cardData.billing_postal_code;
    document.getElementById('card-nonce').value = nonce;
    payment_submit();
   }
  },
  unsupportedBrowserDetected: function() {console.log('Error: unsupported browser.');},
  createPaymentRequest: function ()
  {
   return {currencyCode: 'USD', countryCode: 'US', requestShippingAddress: false, total: {amount: '1.00', label: 'JAB Creations', pending: false},lineItems: [{amount: '1.00', label: 'Subtotal', pending: false},{amount: '0.00', label: 'Tax', pending: false}]};
  },
 },
 cardNumber: {elementId: 'sq-card-number', placeholder: '0000 0000 0000 0000'},
 cvv: {elementId: 'sq-cvv', placeholder: 'CVV'},
 env: {},
 excludeCanvas: {},
 expirationDate: {elementId: 'sq-expiration-date', placeholder: 'MM/YY'},
 inputClass: 'sq-input',
 inputStyles: [
 // Because this object provides no value for mediaMaxWidth or mediaMinWidth, these styles apply for screens of all sizes, unless overridden by another/ input style below.
 {
  backgroundColor: 'transparent',
  color: ($('input[type="text"]').length > 0) ? window.getComputedStyle($('input[type="text"]')[0]).getPropertyValue('color') : '#fff',
  fontFamily: 'sans-serif',//localStorage.getItem('input_style_font-family')
  fontSize: '18px',//localStorage.getItem('input_style_font-size'),
  fontWeight: 'bold',//localStorage.getItem('input_style_font-weight')
  lineHeight: '18px',//localStorage.getItem('input_style_line-height'),
  padding: '0'
 },
 // These styles are applied to inputs ONLY when the screen width is 400px
 // or smaller. Note that because it doesn't specify a value for padding,
 // the padding value in the previous object is preserved.
 {
  mediaMaxWidth: '400px',
  fontSize: '48px',
  lineHeight: '18px'
 }],
 maxTouchPoints: {},
 inputEventReceived: function(inputEvent)
 {
  switch (inputEvent.eventType)
  {
   case 'focusClassAdded':
   // Handle as desired
   console.log(document.getElementsByClassName('sq-input--focus')[0]);
   break;

   case 'focusClassRemoved':
   // Handle as desired
   console.log(document.getElementsByClassName('sq-input--focus')[0]);
   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;
  }
 },
 postalCode: {elementId: 'sq-postal-code', placeholder: 'Postal Code'}
});

Как заставить другие браузеры загружать поля формы iframe? Это, безусловно, похоже на ошибку, и я рад сообщить любую информацию, которая поможет с устранением неполадок.

---

Обновление 1

Запуск for (i in SqPaymentForm) {console.log('SqPaymentForm.'+i);} показывает объект SqPaymentForm в другом свете. Функция SqPaymentForm.isSupportedBrowser возвращает f() (из единственного (JavaScript) запроса от сервера Square), однако другие браузеры возвращают следующее:

SqPaymentForm.isSupportedBrowser
()
​length: 0
​name: "bound "
​<prototype>: function ()

Я сосредотачиваю свои усилия на определении того, как браузеры «поддерживаются» замысловато свернутым кодом из Square.

---

Обновление 2

Функция SqPaymentForm.isSupportedBrowser() возвращает true в Chrome и Waterfox. Исходя из этой документации (https://docs.connect.squareup.com/payments/sqpaymentform/setup#step-4-render-sqpaymentform) я получаю следующую ошибку:

paymentForm не определен.

Существует некоторая двусмысленность в устранении неполадок, которые я сделал, хотя примерно через час я решил использовать setTimeout:

setTimeout(function()
{
 sqPaymentForm.build();
 sqPaymentForm.recalculateSize();
},2000);

... и это сработало. Таким образом, очевидно, что либо разработчики Square, специально тестирующие Chrome и / или Chrome, либо подождут, пока метод будет существовать, и выполнят его, либо время его загрузки будет как-то лучше.

Итак, я хотел бы сейчас спросить: как мне настроить мой код на , а не , требуя полагаться на setTimeout?