Try our new AI assistant by clicking the chat icon in the lower right corner.

---

• Miva Docs
• Reference Guide
• 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.

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.

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.

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.