Square Payment Module for Zen Cart [Support Thread]

[Maynards]

This is such a great plugin. I can't believe how easy it was for me to add it to my site with my limited knowledge of how payment plugins work. Extremely handier than my old processing way.

[Northfur]

I'm getting this error:

"We could not initiate your transaction because of a problem with the card data you entered. Please correct the card data, or report this error to the Store Owner: SQ-NONCE-FAILURE"

It's installed in the proper folders, and token is set up, but I can't figure out this error. It might be Java Script errors from my template that was explained on page 1 and 2, but I'm unsure where to start looking.

[DrByte]

Yes, those javascript errors will prevent the page's javascript from operating properly, including the payment portion.

It looks like all the javascript-validation logic on your page has been altered to inject a bunch of button and aria and other code which also uses double-quotes that are conflicting with the double-quotes used to display validation messages. You've probably injected all this extra HTML into your language files.

ie:

  alert("<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>This form has already been submitted. Please press OK and wait for this process to be completed.");

[Northfur]

The template I've been using is the Shopfast zencart theme for 1.5.4
I guess they programmed it pretty crapily -_-

[dbltoe]

Anyone had a go with the addition of Apple Pay? https://medium.com/square-corner-blo...s-1f85cb6fe433

It appears that the two javascript files used are combined into jscript_square.php file. My attempt at adding the required info resulted in messing up the form.

I changed jscript_square.php to

<?php/**
 * Javascript to prep functionality for Square payment module
 *
 * @package square
 * @copyright Copyright 2003-2017 Zen Cart Development Team
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: Author: Chris Brown <[email protected]> New in v1.5.6 $
 */
if (!defined(MODULE_PAYMENT_SQUARE_STATUS) || MODULE_PAYMENT_SQUARE_STATUS != 'True' || (!defined('MODULE_PAYMENT_SQUARE_APPLICATION_ID') || MODULE_PAYMENT_SQUARE_ACCESS_TOKEN == '')) {
    return false;
}
?>
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>




<script type="text/javascript">
    var cardNonce;
    var paymentForm = new SqPaymentForm({
        //
        locationId: locationId
        //
        applicationId: '<?php echo MODULE_PAYMENT_SQUARE_APPLICATION_ID; ?>',
        inputClass: 'paymentInput',
        inputStyles: [
            {
                fontSize: '14px',
                padding: '7px 12px',
                backgroundColor: "white"
            }
        ],
        cardNumber: {
            elementId: 'square_cc-number',
            placeholder: '•••• •••• •••• ••••'
        },
        cvv: {
            elementId: 'square_cc-cvv',
            placeholder: 'CVV'
        },
        expirationDate: {
            elementId: 'square_cc-expires',
            placeholder: 'MM/YY'
        },
        postalCode: {
            elementId: 'square_cc-postcode',
            placeholder: '11111'
        },
        callbacks: {
            cardNonceResponseReceived: function (errors, nonce, cardData) {
                if (errors) {
                    console.error("Encountered errors:");
                    var error_html = ""
                    errors.forEach(function (error) {
                        console.error('  ' + error.message);
                        error_html += "<li> " + error.message + " </li>";
                    });
                    document.getElementById('card-errors').innerHTML = '<ul>' + error_html + '</ul>';
                    $('#paymentSubmitButton').disabled = false;
                } else {
                    // success
                    $('#paymentSubmitButton').disabled = true;
                    $("#card-errors").empty()
                    document.getElementById('card-nonce').value = nonce;
                    document.getElementById('card-type').value = cardData.card_brand;
                    document.getElementById('card-four').value = cardData.last_4;
                    document.getElementById('card-exp').value = ('0'+cardData.exp_month.toString()).substr(-2) + cardData.exp_year.toString().substr(-2);
                    document.getElementsByName('checkout_payment')[0].submit();
                }


            },
            unsupportedBrowserDetected: function () {
                document.getElementById('card-errors').innerHTML = '<p class="error alert">This browser is not supported for Square Payments. Please contact us to let us know!  Meanwhile, please pay using an alternate method; or shop using a different browser such as FireFox or Chrome.</p>';
                paymentForm.destroy();
            },


            inputEventReceived: function (inputEvent) {
                switch (inputEvent.eventType) {
                    case 'focusClassAdded':
                        methodSelect('pmt-square');
                        break;
                    case 'cardBrandChanged':
                        document.getElementById('sq-card-brand').innerHTML = inputEvent.cardBrand;
                        break;
                }
            },
            methodsSupported: function (methods) {
 								if (methods.applePay === true) {
 									// Show apple pay button
  								var element = document.getElementById('sq-apple-pay');
  								element.style.display = 'inline-block';
 								}
						}
						paymentFormLoaded: function () {
                paymentForm.setPostalCode('<?php echo $order->billing['postcode']; ?>');
            }
        }
    });
createPaymentRequest: function () {
    return {
        requestShippingAddress: true,
        currencyCode: "USD",
        countryCode: "US",
        total: {
            label: "{{ MERCHANT NAME }}",
            amount: "100.00",
            pending: false,
        },
        lineItems: [
            {
                label: "Subtotal",
                amount: "80.00",
                pending: false,
            },
            {
                label: "Shipping",
                amount: "0.00",
                pending: true,
            },
            {
                label: "Tax",
                amount: "10.00",
                pending: false,
            }
        ]
    };
};
// ...
    $(function () {
        $.ajaxSetup({
            headers: {"X-CSRFToken": "<?php echo $_SESSION['securityToken']; ?>"}
        });
        $('form[name="checkout_payment"]').submit(function(e) {
            if($('#pmt-square').is(':checked') || this['payment'].value == 'square' || document.getElementById('pmt-square').checked == true) {
                e.preventDefault();
                paymentForm.requestCardNonce();
            }
        });
    });
</script>
<style>
.paymentInput {display:inline;font-size:1em;margin:0 0.1em 10px 0;height:35px;padding-left:5px;width:50%;}
.paymentInput {background-color: white;border:3px solid #ccc;}
.paymentInput--error {color: red; border-color: red;}
</style>

Done this way, the form is not properly set with input blocks and preset Zip.

[dbltoe]

I would have thought that someone would be interested in adding the ability to accept apple pay to this mod.

[earmsby]

Very excited to try this module. However, I'm getting stuck at the very beginning. The instructions in the plug-in say:

1. Click to create a New Application for your Zen Cart store to access. Give it a name, such as "Webstore", and click Create at the bottom of the page.

Maybe I'm dense but I can't find anywhere in my Square account under "apps" where I can create a "New Application." Any clues for this are greatly appreciated. Will also check in Square's help too but since these directions came from ZenCart, I thought I'd start here.

[wmorris]

Very excited to try this module. However, I'm getting stuck at the very beginning. The instructions in the plug-in say:

1. Click to create a New Application for your Zen Cart store to access. Give it a name, such as "Webstore", and click Create at the bottom of the page.

Maybe I'm dense but I can't find anywhere in my Square account under "apps" where I can create a "New Application." Any clues for this are greatly appreciated. Will also check in Square's help too but since these directions came from ZenCart, I thought I'd start here.

Earmsby,
1. Login to your Squareup account.
2. On your left click on apps.
3. You should see "My Apps"
4. There you should able to find a button "Create New Application".

More info at Square Payment Module

[dbltoe]

They apparently don't use legacy links at Square. You might try logging in and then going to https://connect.squareup.com/apps. That should show any apps you have going and the link for creating an app.

[earmsby]

Earmsby,
1. Login to your Squareup account.
2. On your left click on apps.
3. You should see "My Apps"
4. There you should able to find a button "Create New Application".

This is what I was doing, but I just noticed the small difference in the link on the Square payment module page. It wasn't my regular Square/apps page but the subdomain of "connect" made the difference. There was probably some other way to get to this directly in the Square account but actually following the direction carefully was all I needed in this case.