Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Firefox XML Parser Iframe not working #86

Closed
jabcreations opened this issue Oct 10, 2017 · 4 comments
Closed

Firefox XML Parser Iframe not working #86

jabcreations opened this issue Oct 10, 2017 · 4 comments

Comments

@jabcreations
Copy link

jabcreations commented Oct 10, 2017 •
edited

For now I've gone the cheap route and am sticking the form in an iframe element though it does make my code much more convoluted and I am unable to properly integrate the credit card iframe elements in to my code properly. IE and Chrome display the iframe elements just fine.

I code everything in XHTML5 now (HTML5 + XML parser). I prefer the XML parser because it's strict and will spawn error messages if I get sloppy. The Gecko rendering engine (Firefox though I'm forced to migrate to Waterfox due to Mozilla committing suicide come mid-November) handles XML errors best.

The fourth line in the code below sends the XML parse header. If you comment it out when testing Firefox will work however I can not degrade my entire platform because of such a specific bug.

I'm not sure why this bug is triggering. It happens on both local and live test environments (e.g. 127.0.0.1, localhost and example.com). There seems to be some issue popping up in the web console. If you guys need any additional information please let me know.

The code below is the same found on this page however I've attempted to minimize it while still keeping it reasonable readable.

<?php
if (stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
}
?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Square Payment Form Test</title>
<style type="text/css">
iframe {margin: 10px; outline: #f0f solid 10px;}
.sq-input {border: 1px solid rgb(223, 223, 223); outline-offset: -2px; margin-bottom: 5px;}
.sq-input--focus {outline: 5px auto rgb(59, 153, 252);}
.sq-input--error {outline: 5px auto rgb(255, 97, 97);}
.button-apple-pay {background-color: black; background-image: -webkit-named-image(apple-pay-logo-white); background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% 60%; border-radius: 5px; display: none; max-height: 64px; min-height: 40px; min-width: 200px; padding: 0;}
</style>
<script type="application/javascript" src="https://js.squareup.com/v2/paymentform"></script>
<script type="application/javascript">
//<![CDATA[
var applicationId = 'REPLACE_ME';
var locationId = 'REPLACE_ME';

if (applicationId == '') {alert('You need to provide a value for the applicationId variable.');}

var paymentForm = new SqPaymentForm({
 applicationId: applicationId,
 locationId: locationId,
 inputClass: 'sq-input',
 inputStyles: [{fontSize: '15px'}],
 cardNumber: {elementId: 'sq-card-number', placeholder: '•••• •••• •••• ••••'},
 cvv: {elementId: 'sq-cvv', placeholder: 'CVV'},
 expirationDate: {elementId: 'sq-expiration-date', placeholder: 'MM/YY'},
 postalCode: {elementId: 'sq-postal-code'},
 applePay: {elementId: 'sq-apple-pay'},
 callbacks: {methodsSupported: function (methods) {if (methods.applePay === true) {var element = document.getElementById('sq-apple-pay'); element.style.display = 'inline-block';}},
  createPaymentRequest: function () { return { requestShippingAddress: true, currencyCode: 'USD', countryCode: 'US', total: { label: '{{ MERCHANT NAME }}', amount: '{{TOTAL AMOUNT}}', pending: false, }, lineItems: [ { label: 'Subtotal', amount: '{{SUBTOTAL AMOUNT}}', pending: false, }, { label: 'Shipping', amount: '{{SHIPPING AMOUNT}}', pending: true, }, { label: 'Tax', amount: '{{TAX AMOUNT}}', pending: false,}]};},
  cardNonceResponseReceived: function(errors, nonce, cardData) {if (errors) {console.log('Encountered errors:'); errors.forEach(function(error) {console.log(' ' + error.message);}); return;} else {alert('Nonce received: ' + nonce); document.getElementById('card-nonce').value = nonce; document.getElementById('nonce-form').submit(); submitPayment(nonce);}},
  unsupportedBrowserDetected: function() {},
  inputEventReceived: function(inputEvent) {switch (inputEvent.eventType) {case 'focusClassAdded': break; case 'focusClassRemoved': break; case 'errorClassAdded': break; case 'errorClassRemoved': break; case 'cardBrandChanged': break; case 'postalCodeChanged': break;}},
  paymentFormLoaded: function() {}
 }
 });
function requestCardNonce(event) {event.preventDefault(); paymentForm.requestCardNonce();}
//]]>
</script>
</head>

<body>

<button id="sq-apple-pay" class="button-apple-pay"></button>

<label>Card Number</label>
<div id="sq-card-number"></div>
<label>CVV</label>
<div id="sq-cvv"></div>
<label>Expiration Date</label>
<div id="sq-expiration-date"></div>
<label>Postal Code</label>
<div id="sq-postal-code"></div>

<form id="nonce-form" novalidate="true" action="REPLACE_ME" method="post">
<fieldset>
<input type="hidden" id="card-nonce" name="nonce" />
<input type="submit" onclick="requestCardNonce(event)" />
</fieldset>
</form>

</body>
</html>
@jabcreations
Copy link
Author

jabcreations commented Nov 22, 2017 •
edited

This URL is on a secondary domain I operate. The only difference is that the page is served as application/xhtml+xml and there is an XML declaration. The PHP code otherwise calls all the exact same code.

Again, this only breaks in Firefox and there is the error in the console, "Error: Permission denied to access property "sq-card-number-iframe""

  • Edit, removed link to prevent search engine errors.

This bug forces me to load the form in an iframe / prevents me from being able to implement the form directly. Could I please get some insight in to any action to resolve this bug? About the only difference between the HTML and XML parsers is that you should use .nodeName.toLowerCase() with the HTML parser (A br element in HTML is "BR" while the same element is "br" in XML) when referencing elements.

To clarify, this issue is about the iframes not loading using the XML parser in Gecko browsers (e.g. Firefox, Waterfox), not about submitting the form.

This was referenced Nov 27, 2017
Closed
Closed
@brettstimmerman
Copy link

Hi @jabcreations we recently deployed a change that should resolve issues with the XHTML content type, and should eliminate the need for workarounds.

@jabcreations
Copy link
Author

I love it! Thank you! I am curious, what was (or were) the issues that prevented the XML parser from working in Gecko/Firefox?

@brettstimmerman
Copy link

Hi @jabcreations the issue boiled down to minor DOM API differences in Firefox when the content type is application/xhtml+xml.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brettstimmerman @jabcreations