Square

The Square payment gateway allows you to accept credit card payments using Square on your Miva store. You can also fully manage payments within the Miva admin by voiding, capturing and refunding funds through Miva.

On this Page

Installation and Setup

To use Square, the Square module must be installed on the Miva admin. To begin, click Settings in the lower left corner of the admin, then click Modules. Search for Square or scroll down to the Square module and click Install.

square_pic1.png

On the Payment Settings page that opens, click Get Started.

square_pic2.png

Next, in the box that opens, click Productions and then click Continue.

square_pic3.png

Important

At this point of installation, a pop up window will open where you will sign into your Square account, or create one if you don’t already have one. If pop ups are blocked by your browser, you will need to allow them in order to see the pop up and continue the installation process.

square_pic4.png

Sign in to Square in the box that opens to continue the process.

Configuration

square_pic8.png

Once setup, you have the option to change the location Miva is mapped to, or enable delayed capture, which means it will authorize the card at the time the order is placed and you’ll need to capture the funds later, usually when you ship.

The default setting, without this option enabled, will do both the authorization and capture at the time the order is placed.

Switch Square Accounts

There is also an option to link Miva to a different Square account. Clicking this button will force you to login into your new Square account.

Important

Square does NOT support MivaPay, so you will only be able to use one or the other.

Token Renewal Scheduled Task

When you install the Square module, a Scheduled Task is automatically created to renew the Square access token. By default, these tokens expire after 30 days. The scheduled task will renew the token prior to it expiring and runs once every 20 days. There is no manual action needed to renew the token, other than ensuring the scheduled task does not get removed or deactivated from the store.

Payment Method Rules

When using Square, your site automatically accepts all four major card types (American Express, Discover, Mastercard and Visa). The Square payment iframe automatically detects the correct card type, and passes this through to the gateway.

Because of this, under Payment Method Rules, there is only a single option for “Credit Card” rather than individual card types.

square_pic10.png

Likewise, a customer using your website will also only see “Credit Card” rather than individual card types.

square_pic9.png

Upgrading to 10.06.00

The SqPaymentForm API Miva used for our Square integration has been retired by Square. Miva 10.06.00 has a completely updated Square integration which use their latest Web Payments SDK and Payments API.

For Customers Currently Using Square

Old User Interface

square_pic5.png

New User Interface

square_pic6.png

For new installs of Square on Shadows version 10.06.00 or above there is additional styling applied to the credit card fields. To get these changes on your upgraded store they require some additional template changes to achieve. These changes include a gray background and a larger “Place Order” Button.

square_pic7.png

Template Changes

Below are the template changes required to get the UI above:

On OPAY


Under CSS Resources -> square-payment.css

Diff of OPAY Changes

A diff of changes needed on OPAY can be found here.

Credit Card Styles

Square gives you limited access to pass in certain styles to customize the payment form. There are five areas that can be styled:

Details on this can be found in the Square Payments Form Style: https://developer.squareup.com/docs/web-payments/customize-styles

Default for this Field is { } (empty). An example of the JSON syntax can be found below.

Note

For stores using the Shadows theme, there is a separate CSS file under CSS Resource Management named “square-payment” which has other Square layout styles (not the credit card form fields).

Single Line vs Stacked Card Input Fields

Square supports both a single or stacked (2 lines) credit card input fields. This is determined by if the containing div has a fixed width of less than 480 pixels, the form is rendered as two lines. If the <div> is declared with minimum and maximum widths that let the buyer resize the page, then the form reacts to a wider <div> container by rendering as a single line.

Caution

Older versions of Shadows used pollyfill.js to add moddern browser features to IE 11. This file will conflict with the Square JS and should be removed from OPAY before upgrading to 10.06.00.

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2021 Miva©, Miva Merchant©, MivaPay©, MivaCon© Miva, Inc. All Rights Reserved.