Adding example reference implementations against:

node, with a plain js frontend:
rails, with multiple frontend examples:
JS
JQuery
Angular 1
React
Ember
JS + Bootstrap

connect-examples/v2/README.md

@@ -0,0 +1,12 @@
+
+The project is structured under two folders:
+
+* rails_payment: rails server implementation, within here it also includes frontend implementations for:
+    * plain JS
+    * JQuery
+    * Angular 1
+    * React
+    * Ember
+    * JS + Bootstrap
+* node_payment: node server implementation, within here there is a frontend implementation:
+    * plain JS

connect-examples/v2/node_payment/.gitignore

@@ -0,0 +1,37 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+config.json
+

connect-examples/v2/node_payment/README.rdoc

@@ -0,0 +1,9 @@
+== README
+
+Rename config.json.sample to config.json and fill in values for APP_ID & APP_TOKEN
+
+To get the app running:
+
+* npm install
+
+* npm start

connect-examples/v2/node_payment/app.js

@@ -0,0 +1,58 @@
+var express = require('express');
+var path = require('path');
+var favicon = require('serve-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+
+var routes = require('./routes/index');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'jade');
+
+// uncomment after placing your favicon in /public
+//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+app.use(logger('dev'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', routes);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  var err = new Error('Not Found');
+  err.status = 404;
+  next(err);
+});
+
+// error handlers
+
+// development error handler
+// will print stacktrace
+if (app.get('env') === 'development') {
+  app.use(function(err, req, res, next) {
+    res.status(err.status || 500);
+    res.render('error', {
+      message: err.message,
+      error: err
+    });
+  });
+}
+
+// production error handler
+// no stacktraces leaked to user
+app.use(function(err, req, res, next) {
+  res.status(err.status || 500);
+  res.render('error', {
+    message: err.message,
+    error: {}
+  });
+});
+
+
+module.exports = app;

connect-examples/v2/node_payment/bin/www

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('node-payment:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}

connect-examples/v2/node_payment/config.json.sample

@@ -0,0 +1,10 @@
+{
+  "development": {
+    "squareApplicationId": "dev-application-id-here",
+    "squareAccessToken": "dev-access-token-here"
+  },
+  "production": {
+    "squareApplicationId": "prod-application-id-here",
+    "squareAccessToken": "prod-access-token-here"
+  }
+}

connect-examples/v2/node_payment/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "node-payment",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "*",
+    "cookie-parser": "*",
+    "debug": "*",
+    "express": "*",
+    "jade": "*",
+    "morgan": "*",
+    "serve-favicon": "*",
+    "unirest": "latest"
+  }
+}

connect-examples/v2/node_payment/public/stylesheets/style.css

@@ -0,0 +1,100 @@
+body{
+  font-family: Helvetica;
+}
+
+.no-boot{
+  margin: 10px 10%;
+}
+
+
+.no-boot label{
+  display: block;
+}
+
+/* input styles */
+.no-boot input,
+.no-boot select{
+  width: 100%;
+  height: 24px;
+  margin-bottom: 10px;
+  padding: 4px 10px;
+  font-family: helvetica;
+  font-size: 14px;
+}
+
+.no-boot input{
+  border: none;
+  border-bottom: 1px solid #b6b6b6;
+}
+
+.no-boot input:focus{
+  outline: 0;
+  border-bottom: 1px solid #66afe9;
+  box-shadow: 0 3px 0 #66afe9;
+}
+
+/*  submit button styles */
+.no-boot input[type=submit]{
+  background-color: #62DF49;
+  color: #fff;
+  height: 44px;
+  width: 45%;
+  cursor: pointer;
+}
+
+.no-boot input[type=submit]:hover{
+  background-color: #56FBD2;
+}
+
+.no-boot input[type=submit]:focus{
+  outline: 0;
+  border-bottom: 0;
+  box-shadow: none;
+}
+
+/* disable submit button so no other actions can take place while form goes through */
+.no-boot input[type=submit][disabled]{
+  cursor: not-allowed;
+  background-color: #8CE67A;
+}
+
+/*  Square Fields */
+.sq-input{
+  margin-bottom: 10px;
+  border: none;
+  border-bottom: 1px solid #b6b6b6;
+}
+
+/*  [iFrame class]--focus is added when the square form is focused
+use similar to other form focus style for consistency */
+.sq-input--focus{
+  outline: 0;
+  border-bottom: 1px solid #66afe9;
+  box-shadow: 0 3px 0 #66afe9;
+}
+
+/* [iFrame class]--error is added when the iFrame local check fails
+use similar styling on other forms to ensure consistent error styles */
+.sq-input--error{
+  background-color: #F3C0C0;
+}
+
+/* error messages */
+.no-boot #card-errors li{
+  list-style-type: none;
+  padding: 10px;
+  margin-bottom: 5px;
+  background-color: #E27272;
+  color: white;
+}
+
+/* Success */
+#successNotification{
+  margin: 0;
+  text-align: center;
+  background-image: linear-gradient(-1deg, #72E07B 0%, #56FBD2 100%);
+  border-radius: 4px;
+  padding: 25% 30%;
+  color: white;
+  font-size: 32px;
+}