Try our new AI assistant by clicking the chat icon in the lower right corner.
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.
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.
On the Payment Settings page that opens, click Get Started.
Next, in the box that opens, click Productions and then click Continue.
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.
Sign in to Square in the box that opens to continue the process.
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.
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.
Square does NOT support MivaPay, so you will only be able to use one or the other.
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.
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.
Likewise, a customer using your website will also only see “Credit Card” rather than individual card types.
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.
Old User Interface
New User Interface
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.
Template Changes
Below are the template changes required to get the UI above:
On OPAY
Under CSS Resources -> square-payment.css
A diff of changes needed on OPAY can be found here.
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.
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).
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.
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.