时间戳

首页 > 解决方案 > Squareup 没有为 Waterfox/IE11 加载 iframe，静默错误

square-connect - Squareup 没有为 Waterfox/IE11 加载 iframe，静默错误

问题描述

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

Gecko 有什么用途sqPaymentForm：

Gecko所没有的sqPaymentForm：

具有讽刺意味的是，我对 IE11 的访问权限有限。直到周五下午晚些时候，我才有时间设置 Mac。这是几个裁剪的屏幕截图：

火狐 56 Firefox 56 Square 不加载 iframe 表单字段

即 11 IE 11 Square 未加载 iframe 表单字段

这是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？

标签： square-connectsquare

解决方案

推荐阅读