Overview
The Square Web Payments SDK is a JavaScript browser-client SDK that provides a secure payment-card entry method, along with other secure payment methods. The SDK is the client part of the client/server Square payment solution. The SDK produces a secure one-time-use payment token that the application web client sends to the backend, where it is processed as a payment with the Square Payments API. Within Aspenware Commerce you will see this change in the card-entry checkout module. The payment module now dynamically changes according to input fields. See below for examples of the payment module changes and admin changes, as well as upgrade and implementation requirements.
Feature Detail
Dynamic Input Validation
Validation for each input field is processed by Square on keystroke, providing real-time feedback to the customer when input errors are detected.
Single Credit Card Element
The Web Payments SDK provides a single credit card element for all credit card inputs. Square no longer supports the positioning of individual credit card fields. Square has found that the single credit card element results in a higher conversion to payment.
Dynamic Postal Code Behavior
The Web Payments SDK shows a postal code input field on the payment form after the SDK determines the country that issued the buyer's credit card. The Web Payments SDK displays the proper form label for the postal code based on the country:
For US, the form displays "ZIP".
For CA, the form displays "Postal Code".
For UK, the form displays "Postcode".
If the payment form displays the postal code field, then the payment requires a postal code for the buyer to proceed. The Web Payments SDK enforces input field validation for the postal code depending on the country.
Configuration Guide
Setup Checklist
This section is a comprehensive and high level summary of all tasks and prerequisites required for this feature to function properly. This section is purposed for use after an administrator is familiar with configuring this feature as an “audit” checklist. For detailed set-up instructions, jump down to “Prerequisite Tasks” and “Detailed Setup Guide” and then follow up with this checklist to ensure all steps are completed.
1. COMMERCE TASKS | |
|---|---|
| DETAILED SETUP |
Prerequisite Tasks
This section describes all requirements that must be completed before you can begin setting up this feature. Once these tasks are complete continue to the next section.
POS Tasks
POS Task that must be completed first
Infrastructure Tasks
Infrastructure Task that must be completed first. Remove section if not required
Commerce Tasks
AW Commerce task that must be completed first
Settings, Language Strings and/or HTML Widgets for this Feature
This feature may require updates to the following settings, language strings and/or HTML Widgets. Learn more about how to update and create Settings, Language Strings, and HTML widgets follow the links to the respective section.
Settings
AW Commerce Settings that must first be completed
Language Strings
AW Commerce Language Strings that must first be completed
HTML Widgets
AW Commerce HTML Widgets that must first be completed
Detailed Setup Guide
Confirm Square Plugin Configuration.
Obtain Access Token (if in a stage environment)
Check Location ID and Update if needed
Switch to the production environment
This SDK Upgrade may require steps to be taken by the resort while deploying and in communication with your Aspenware Service Representative (support@aspenware.com).
1. Confirm Square Plugin Configuration
Go to Configuration > Payment methods in Commerce Admin
Select Configure in the Square Payment Gateway plugin.
2. Obtain Access Token (if in a stage environment)
Follow the instructions for “Obtain Access Token” in this document.
Click APPROVE when requested to “Accept New API”.
3. Check Location ID and Update if needed
If your location ID is no longer present, do the following:
Go to https://developer.squareup.com/apps Application > Open > Location
Copy Location ID and Paste into the Location ID field in the Aspenware Commerce Dashboard
3. Switch to the Production Environment
Common Troubleshooting Guide
Q: My credit card input UI looks different and I no longer see the zip code field.
A: The new credit card module is dynamic, which means depending on the resort location and the credit card provider and location, different fields will be shown. The best practice would be to test with credit cards from different locations.