I've come across a reason to delve back in to the code for accepting payments with Square. Previously I ran out of time and could not verify that Firefox/Waterfox worked with XHTML. As of Sunday January 13th, the form works when served on a page of the type application/xhtml+xml. Since my web platform loads as XML (application/xhtml+xml) I decided to merge the payment form on to the page itself (instead of loading it as a text/html page in an iframe).
Unfortunately I've encountered a silent error. Waterfox does not load the iframe "form fields" and I've verified it in Firefox 61 that the form fields do not load in that browser either (both are Gecko browsers). I then tried Chrome 71 and Opera 12.1 as they both have different rendering engines that are likely to help me uncover any bugs. No, I won't test Opera 15+ because that's just another copy of Chrome.
Opera 12.1 does spawn a JavaScript error though still manages to load the iframe form fields.
Chrome 71 doesn't spawn any JavaScript errors and loads the iframe form fields.
To help expedite troubleshooting here are the var sqPaymentForm = new SqPaymentForm(...); for Chrome and Firefox/Waterfox:
Chrome's version of the new SqPaymentForm JavaScript object:
build: ƒ ()
clientController: C {options: {…}, env: {…}, errorLogger: a, callbacks: {…}, formId: "253bcae6-1b4f-9619-fae5-6956e362dcb6", …}
env: {name: "production", googlePayEnv: "PRODUCTION", masterpassJsUrl: "https://static.masterpass.com/integration/merchant.js", jsUrl: ƒ, serviceUrl: ƒ}
errorLogger: a {options: {…}, env: {…}, source: "SqPaymentForm", applicationId: "sandbox-sq0idp-jm0yK1mgWBMyV3lgfW9XIQ", ignoreError: 0, …}
options: {applicationId: "sandbox-sq0idp-jm0yK1mgWBMyV3lgfW9XIQ", locationId: "CBASEEum0KeFu_h-4VA4OWaV3F8gAQ", applePay: {…}, callbacks: {…}, cardNumber: {…}, …}
_handleDomContentLoaded: null
__proto__: Object
Waterfox/Firefox's version of the new SqPaymentForm JavaScript object:
_handleDomContentLoaded: function ()
clientController: Object { options: {…}, formId: "d917ecd5-c085-de21-c041-424226d69515", hash: "eyJzIjoiMzA4YjczMzJjMjk0NzJiMGVjMjc4YTcxMGRjZGMwODNjZDkyZDM0OSJ9", … }
env: Object { name: "production", googlePayEnv: "PRODUCTION", masterpassJsUrl: "https://static.masterpass.com/integration/merchant.js", … }
errorLogger: Object { source: "SqPaymentForm", applicationId: "sandbox-sq0idp-jm0yK1mgWBMyV3lgfW9XIQ", ignoreError: 0, … }
options: Object { applicationId: "sandbox-sq0idp-jm0yK1mgWBMyV3lgfW9XIQ", locationId: "CBASEEum0KeFu_h-4VA4OWaV3F8gAQ", inputClass: "sq-input", … }
<prototype>: Object { build: build()
, destroy: destroy(), requestCardNonce: requestCardNonce(), … }
And the code that created the object itself:
var sqPaymentForm = new SqPaymentForm(
{
applicationId: 'sandbox-123',
locationId: 'CBASE_xyz',
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: localStorage.getItem('input_style_color'),
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'}
});
With a silent error combined with third part code I'm at an impasse. I have some limited time to debug this week and maybe next weekend. Any help would be greatly appreciated.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent