- Miva Docs
- Miva 10 Square
Miva 10 Square
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
- Configuration
- Token Renewal Scheduled Task
- Payment Method Rules
- Upgrading to 10.06.00
- Credit Card Styles
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.
On the Payment Settings page that opens, click Get Started.
Next, in the box that opens, click Productions and then click Continue.
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.
Sign in to Square in the box that opens to continue the process.
Configuration
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.
Likewise, a customer using your website will also only see “Credit Card” rather than individual card types.
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
- It's important that you install 10.06.00 prior to 3/15/2023. After that date the older APIs will cease to work which will break your ability to accept payments from Square on your Miva store.
- As part of the upgrade process, your existing Square integration will get updated to the latest version. This will happen automatically as part of the upgrade process.
- Your existing API connection to Square via OAUTH will continue to work with the new integration. No action needed on your part.
- Any open authorization that was done prior to you updating can be captured just as you normally would have. The same applies for refunds. This will just work like it always has.
- The User Interface the customer sees during checkout to enter in their credit card data will be changing as show below.
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
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:
- Message - icon
- Message - test
- Input
- Input::placeholder
- Input - container
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.