Question

我已经确认，Square的代码现在可以与用作application/xhtml+xml的页面一起使用，并且与Chrome可以使用完全相同的代码一起工作，尽管Waterfox（和Firefox）不会为表单字段加载iframe。我已经在DOM中对此进行了验证（它们未被隐藏，原始的占位符元素仍然存在）。

Chrome浏览器请求f.js文件，而Gecko浏览器不请求。
iframe元素应替换的占位符元素仍在DOM中。
在Waterfox 56，Firefox 64，Chrome 71或Opera 12.1的开发人员控制台中没有错误消息。
我已禁用原型进行测试。
浏览器对于本地和实时测试产生相同的结果。
Gecko浏览器的var sqPaymentForm = new SqPaymentForm(...);对象是不同的。

壁虎对sqPaymentForm有什么看法：

_handleDomContentLoaded
clientController
env
errorLogger
选项

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()（来自Square服务器的唯一（JavaScript）请求），但是其他浏览器返回以下内容：

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

我正在集中精力确定Square令人费解的最小化代码如何“支持”浏览器。

更新2

SqPaymentForm.isSupportedBrowser()函数在Chrome 和 Waterfox中返回true。结束本文档（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？

Squareup无法为Waterfox / IE11加载iframe，出现静默错误

0 个答案: