Stripe & Plaid Node Integration

If you are trying to get Stripe and Plaid to work for your ACH verification, I have a few pointers and some code you can checkout.

Tl;dr: https://github.com/Threde/stripe-plaid-ui
This code assumes you’ve already made your customer’s account on stripe’s back-end. And that you are passing the the param ‘customer’ in the hosted url.
ex: https:localhost.com/?customer=cus_ANjLfuBWFXthGb

Stripe & Plaid Documentation

When I had to build a payment portal for Threde, I discovered trying to hookup Plaid with Stripe wasn’t as simple as I might have thought. I truly thought it was as simple as getting the right keys and I would be good to go, but that’s not the case.

To start off, you want to obviously get a stripe and plaid account. On the plaid side, you will need to hook it up to your stripe account. After doing so, if you are like me ( a small startup), to get the plaid access, I suggest you email them directly to get in. We, at Threde, don’t do a lot of ACH transactions so it didn’t make sense for us to do a monthly payment thingy. So by emailing them and asking if they have something for us, they upgraded our account. Thanks Plaid! 😀

But yeah, after you get the keys, I discovered that the documentation wasn’t very straight forward on Plaid’s side. For Stripe, it wasn’t straight forward on how to get the right token for a transaction for Plaid. After hours of digging, I was finally able to figure out how to really hook the two up.

So, there are two parts to this that you need to do. You have to make an api that can talk to stripe & plaid api at the same time and you have to have the plaid-link with the correct version of stripe on the client-side.

for the server-side, code go here:
https://github.com/Threde/stripe-plaid-ui/blob/master/index.js

for the client-side code, go here:
https://github.com/Threde/stripe-plaid-ui/blob/master/views/index.ejs

( don’t judge, I know it’s shit but I haven’t had time to clean it)

here’s the step process:

1. get customer’s id & info from the url param ‘customer’ and save that as a global on the server-side via /get_customer_info
2. customer clicks on plaid-link and we send the plaid token to the server-side to get the bank access token via /get_access_token
3. customer clicks on verify to verify the bank account to link to the ‘customer’ id on the server-side via /verify_bank
4. customer adds the bank account via stripe’s client on the server-side.

The important thing about this process, that wasn’t mentioned clearly in the documentation in stripe or plaid, is that you have to use the plaid access token + account id to get the stripe bank account token….sounds confusing but in a gist, what I am trying to say is you use the plaid access token inside of plaid’s createProcessorToken(ACCESS_TOKEN, ACCOUNT_ID) to get the stripe bank account token for using stripe’s
stripe.customers.createSource(CUSTOMER_ID, { source: STRIPE_BANK_ACCOUNT_TOKEN})

The README file has links to all the docs. Also, I left comments with some links in the code to explain where to find the documentation for the different methods from Stripe and Plaid.

Anyhoo, if you have questions let me know.

 

Advertisement

How to write a Custom React Component Library UMD

In this article, I will show you simple steps on how to create a React Component Library with any css design frame work of your choice. For this example, I will be using Webpack for compilation.

Also, I will be writing this pretty straight forward so it’s not “tl;dr”, with the assumption that you guys know some basic cmd line. So, you should be able to just C&P the commands and be on your way 😉 .

To skip this read and just go straight to the code, go here (highly suggested because wordpess keeps breaking my code examples):
https://github.com/michaelguild13/react-umd-boilerplate

Initial Setup

The first thing we will want to do is get all the tools we will need to do this. We will want Node for our package management and Webpack for our export of our UMD ( Universal Module Definition ).

mkdir react-component-library
cd react-component-library
npm init

For the “npm init”, feel free to put whatever you want.

npm i -D webpack webpack-dev-server css-loader sass-loader node-sass 

Webpack for our compiling and webpack’s dev server for testing & sass loading

 npm i -D babel-loader babel-core babel-preset-es2015 babel-preset-react 

Babel for using es2015/es6 and react javascript coding

npm i -D react react-dom 

React & React-Dom for obvious reasons…I mean, why else would you be here…Now that we have all the tools we need, it’s time to hook them all up.

Babel Setup

Create a new file in your root directory called “.babelrc“. In that file, copy and paste this code.

.babelrc

{
  presets[es2015,react]
}

Tell babel to use es2015 and react presets for compiling es6 to native vanilla javascript
For more info. on babel setup go here

 

Webpack Setup

First we will have to make three directories ( app, dist, build )
Webpack’s compiler will create directories but we are doing this assuming you don’t know that

mkdir src
mkdir static

src : Application code
static: Compiled UMD for testing on dev server

In the Root directory, create an index.html file:

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Component Library</title>
</head>
<body>
Testing UI
<div id="app"></div>
<script src="index.js"></script>
 <script src="static/bundle.js"></script>
</body>
</html>

Here we are including the UMD library that webpack creates and our app bundle that webpack’s dev server creates so that we can test out the library

In the root directory create a “webpack.config.js” file:

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
 entry: [
 'webpack-dev-server/client?http://localhost:1337',
 'webpack/hot/dev-server',
 './src/index'
 ],
 output: {
 path: __dirname,
 filename: 'bundle.js',
 publicPath: '/static/'
 },
 module: {
 loaders: [
 { test: /\.js$/, loaders: ['babel'], include: path.join(__dirname, 'src') },
 { test: /\.json$/, loader: 'json' },
 { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader?sourceMap' }
 ]
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoErrorsPlugin()
 ]
};

This is the configuration file for webpack.

In this file we are telling it to use babel’s config presents for compiling our javascript. We are also letting webpack know what plugin’s to include. The two plugins are for the webpack’s dev server and for the hot reloader. The hot reloader watches files and reloads the server. for more info go here.
Now all we have to do is setup npm’s package with the scripts we need to get webpack to do it’s thingy. Inside of the package.js file, add the follow lines in the script object.

Server.js

// Webpack
var webpack = require('webpack');
var config = require('./webpack.dev.config');
var WebpackDevServer = require('webpack-dev-server');

// Dev Server for testing
new WebpackDevServer(webpack(config), {
 publicPath: config.output.publicPath,
 hot: true,
 historyApiFallback: true
}).listen(1337, 'localhost', function (err, result) {
 if (err) {
 console.log(err);
 }
 console.log('Listening at localhost:1337');
});

Node Setup

The next thing we need to do is setup our testing webpack dev server to run with our webpack setup.

"scripts": {
"start": "npm run watch & node server.js",
"watch": "webpack --watch src/build.js index.js --output-library ReactUMD --output-library-target umd",
"build": "webpack ./src/build.js index.js --output-library ReactUMD --output-library-target umd",
"build-min": "webpack -p src/build.js dist/reactUMD.min.js --output-library ReactUMD --output-library-target umd",
"build-css": ""
}

Looking at the following commands, it’s pretty straight forward on what does what.

npm start – builds & watches the UMD.
npm run build – builds only the UMD file. File is exported as index.js in root for including as a Node Package.
npm run build-min – builds the UMD minified file and is exported as reactUMD.min.js in the root directory.

I am stopping this tutorial prematurely due to my frustration of wordpress’ wysiwyg breaking my code snippets. Just clone the repo and feel free to shoot me questions or issues on that repository: https://github.com/michaelguild13/react-umd-boilerplate

 

 

Fuck Yeah! Front-end Development

Ok, so I started a joke blog after Nick Hudkins, from Bolster Labs, made a “Fuck Yeah!” suggestion. The idea started with me randomly starting to sing the “America, Fuck Yeah!” ( http://www.youtube.com/watch?v=3BN1jSpiyIM&feature ). Immediately after starting to sing the lyrics, all of the guys from Bolster Labs started singing it as well. Which then, Nick started to talk about all the “Fuck Yeah!” tumbler pages he has started and then told me to start fuck-yeah-front-end-development.

And so my journey of writing half bullshit web articles as a joke has started.

http://fuckyeahfrontenddevelopment.tumblr.com/

Responsive design essentials

How to do Responsive Design and Media Queries:
http://www.alistapart.com/articles/responsive-web-design/ 

How to do Media Queries with Compass ( Sass ):
https://github.com/chriseppstein/compass/issues/302

Screen Resolutions:

• Ipad / Tablets 1280 x 800, 1024×768, 1024 x 600,600 x 800
• Iphone / Android 960×640, 480×800, 240×320 

Label Pattern with Just Css for bootstrap

Demo: http://codepen.io/michaelguild13/pen/wMBOBj?editors=010

After reading Brad Frost’s article on the Float Label UI pattern, I started to wonder if it’s possible to do so with just pure css. So, created a codepen with it working.

My requirements are as follows

• only display placeholder text
• on focus, display label
• if the input or text area contains value, keep the label displayed

I kept my markup to match bootstrap and for accessible reasons. When css is disabled, it’s  still usable. By being able to display the label on if input has value, allows the user to never loose context.  The only “Gotchya” is that the only way to display the label if it contains value, is to use the required attribute.

 Html Markup:

Scss Styles:

.label-pattern {
position: relative;
overflow: hidden;
border-bottom: 1px solid grey;

label {
color: blue;
display: block;
font-size: .6rem;
font-weight: bold;
text-align: top;
padding-bottom: 1rem;
}
input, textarea {
position: absolute;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 50px;
border: none;
background-color: #fff;
transition: background-color 200ms linear;
&:focus,
&:valid{
outline: none;
border: none;
background: transparent;
&::-webkit-input-placeholder { color:transparent; }
&:-moz-placeholder { color:transparent; } /* FF 4-18 */
&::-moz-placeholder { color:transparent; } /* FF 19+ */
&:-ms-input-placeholder { color:transparent; } /* IE 10+ */
}
}
}

***btw, don’t ask why I used codepen vs jsfiddle 😛 ***

Formify.js – Contenteditable All the Things!

I’ve been working on a library to make content instantly editable with no extra leg work or dependent files. Formify creates a vitual form model based on the formify class to make nodes “contenteditable”. Do single updates or whole page content updates via form submission though traditional or ajax methods. Build the content view without having to do all the extra work of editable content.

Click here to Demo

http://michaelguild13.github.io/formify/

• Will support json schema generation
• third party tools like formvalidation.io
• is very light weight with no dependancies only at 5k !

Jquery Zoom Plugin simplified

All of those jquery zoom plugin’s, I came across while trying to find a simple plugin, were annoying so I made this POS to do the same job that their 500 lines of code do in less.

http://jsfiddle.net/UaQb4/84/

The Future of Responsive Design

Giving birth to an entirely new future for users using web

Responsive design aims to make web pages compatible with all devices—without relying on the creation of multiple layouts and styles. Because of the explosion of mobile and tablet devices, constructing multiple versions of a site for all possible users is no longer feasible.  Instead of device-specific versions, responsive design relies on flexible layouts, images, and cascading style sheet media queries. Its goal is to detect a user’s screen size and orientation, adjusting those flexible designs accordingly.

The fluidity of responsive design approach comes from a combination of strategies. Layouts are made flexible through proportion-based grids—and percentages, not fixed pixels or points, determine size. Likewise, images always fit properly on the page, since they are designed to display relative to their containing elements. Finally, cascading style sheets work in conjunction with media queries to determine how the page is being accessed and to render it optimally for that device.

Expect to see responsive design supersede traditional fixed approaches over the next few years. It’s a win for both user and site owner–enhancing user experience while cutting design and development costs. As web users become more and more accustomed to switching from laptop to tablet to smartphone, their expectations for seamless transitions between devices increase. Responsive design approaches offer that seamlessness, creating an optimized user experience. Web pages adjust automatically to any screen, without excessive panning, scrolling, and resizing.

This fluid approach to design also cuts costs significantly. Creating one universally adaptable website eliminates the need for a brand-new design and development process each time a tinier tablet, a bigger smartphone, or some other new gadget enters the market.

In June, 2012, Google recommended responsive design as the best configuration for rendering web pages appropriately on smartphones.  And for those with SEO concerns, the search giant made its preference clear: “[With responsive design] Google can discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.”

Google’s recommendations are especially important given that sales of desktop and laptop computers are in decline across nearly all manufacturers. The last half of 2012 represented the worst PC sales since 2001—due to both poor economic conditions and consumers’ increasing reliance on cheaper gadgets for web access.

Indeed, according to the Mobile Marketing Association, mobile web access is expected to surpass PC access in 2013—beating a 2015 “mobile domination” prediction by Morgan Stanley analysts in 2010.

The exponential growth of mobile is redefining web design standards. Mobile users demand fluid display and easy navigation, and business owners and developers can no longer predict what size screens their sites will display on. The flexibility of responsive design makes it a universal approach; and, with Google’s blessing, it is quickly becoming the standard.

When to use Responsive Design

You should use responsive design initially and as often as possible. With the changes of mobile devices and how we interact with them on a daily basis, it’s critical to target a variety of viewports and resolutions. Making sure that your website or web application is cross platform (device) compatible is becoming more important over time and equally important as cross browser compatible. In other words responsive design is now mainstream.

“Google is now suggesting developers use responsive design tools like media queries to handle the variety of screens now accessing the web.” – http://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html

Responsive Design in it’s early stages was mainly the practice of doing a one size fits all solution for everything, browser and platform alike. But if we just take the core concepts of responsive design, we can use it with other best practices to greater fit our need. Like, using a mobile site and creating a responsive design for that vs using it as a layer for the main site.

When initializing or integrating Responsive Design the following topics need to be thoroughly reviewed for the best solution:

The our considerations prior to implementation are:

• Some content needs to be packed differently
• Other content needs to be a smaller or less bulky
• And what content do you leave behind

Our goals with implementing responsive design is to do the following:

• Our purpose stays the same
• Our strategy changes
• The solution is a mix of what we already have plus some new things
• The more we become familiar with the constraint, the better our solution

The Benefits with using responsive design:

• Creates more engaging user experiences
• Benefits SEO
  http://www.seroundtable.com/google-mobile-seo-official-15264.html

Is Accessible in benefiting disabled users?
http://www.tsw-systemsolutions.com/blog/mobile-website-design/responsive-web-design-accessibility-using-all-web-channels/

Phonegap, Terminal, Android SDK beginner tutorial “hello world”

So due to the nature of trying to get going on phonegap and the lack of strait information out there, I thought I would do a quick write up on how to do the following:

• Install android SDK on Mac
• start an android project
• put phonegap into your app.
• do a “hello world”

( I am also doing this because I prefer to use Sublime Text vs Eclipse )

INSTALLING ANDROID SDK ON MAC

So the first thing we need to do is get the Android SDK.
http://developer.android.com/sdk/index.html

Now unzip it, open up your terminal and cd to the dir where you unzipped it. You will now have to mv it to your ( /usr/local/bin/ )

mv android-sdk-macosx/ /usr/local/bin/android-sdk-macosx

once moved, you will need to add it to your tools $PATH (aka .profile). This is typically located at (.) . So you can use whatever editor you want to add the line. I will show you how to do it with vim. cd so that you are in your home dir.

vim .profile

once in there press “i” , to edit, and add copy&paste the following line anywhere in the file on its own separate line.

export PATH=/usr/local/bin/android-sdk-macosx/platform-tools:/usr/local/bin/android-sdk-macosx/platforms:/usr/local/bin/android-sdk-macosx/tools:$PATH

now exit and save by hitting “escape” and typing

:wq

(wq means write and quit, in otherwords save and exit)

Now you should be able to use the android cmd.

you should be able to type in the following cmd which will open up the android SDK Manager:

android

now that the SDK manager is open, you will have to download and install the following that is checked in the check box. I am downloading the latest android version because I don’t really care about older versions in this tutorial.

Android SDK

once you are done downloading and installing all of that stuff we can get to the fun part of starting and android app!

STARTING AN ANDROID APP

So we are going to do this all though terminal, on command line. To create a new project, first goto the directory where you want your project. Make a new directory for your app and go into it

mkdir MyFirstApp

cd MyFirstApp

Now we have to see what versions of android you have that we should build this project on. Run the following cmd:

android list targets

you should now see what versions you have like the following. Take note of were it says ” id: “. The number that is being use will be used to target that platform. I will be using id: 1 because that is latest and the one I want to use for this tutorial. To build the project we will need to run the following cmd:

android create project –target 1 –name MyFirstApp –path . –activity MainActivity –package com.MyFirstApp

Here is the break down of the following cmd:

• create project – cmd for creating a new project
• target – which id number to use that corresponds with the android platform you want to use.
• name – name of your project
• path – the location where your files should be put/created. i used (.) because I was already in the directory.
• activity – is the name of the app that is displayed
• package – your package name has to be unique across all packages installed on the android system so the best practice is to use your organization as the entity. for this example we are using com.MyFirstApp

For more details go here:
http://developer.android.com/training/basics/firstapp/creating-project.html

Ok, so we have created a project. The next thing we will have to do is setup the emulator to test our app.

SETTING UP ANDROID EMULATOR

To do this all you need to do is run the following cmd:

android avd

Now create a new virtual android machine.

For more details on this go here:
http://developer.android.com/training/basics/firstapp/running-app.html#Emulator

now that we have the emulator open and running, we will have to open a new terminal window and compile/install our app on to the virtual android machine.

RUN ANDROID APP

To run our app, we first have to compile and debug our app by running the following cmd:

ant debug

(apache ant is installed on all macs so this should work)

ant debug compiles and debugs your app in to your /bin dir. To install your app on to your vm you use the following cmd:

adb install -r bin/MyFirstApp-debug.apk

adb install -r , deletes/removes your app and reinstalls it on to your vm. So in a nutshell, those two cmd’s are the most important cmd’s you will need to know and remember. If this installs smoothly, you will see your app in the app’s section of your emulator. The app name should be “MainActivity“. Open it and you will see basic text.

( the file that the text is coming from is located at res/layout/main.xml )
For more information on android’s mvc file system go here:
http://developer.android.com/training/basics/firstapp/running-app.html

For more details go here:
http://developer.android.com/training/basics/firstapp/running-app.html

Assuming that everything has gone smoothly to this point. We can now get into the fun that Phonegap has to offer!

USING PHONEGAP WITH ANDROID SDK

We will now have to go and download phonegap:

http://phonegap.com/download/

Once downloaded and unzipped, we will have to put phonegap in place. Make a new directory called ” libs ” in the root of your directory and a the following “assets/www” .

mkdir libs

mkdir assets

mkdir assets/www

now that the new directories have been created, we can start putting phonegap in place.

move cordova-2.0.0.js to assets/www
move cordova-2.0.0.jar to libs/
copy the xml directory into res/

We will now have to edit some files to get everything else going.

Goto src/com/MyFirstApp/

and edit the MainActivity.java file

• add import org.apache.cordova.*; after import android.os.Bundle;
• Change Activity to DroidGap
• Replace setContentView(R.layout.main); with super.loadUrl(“file:///android_asset/www/index.html”);

Goto bin/ and edit the AndroidManifest.xml

Add the following after the “manifest” tag.

<supports-screens
android:largeScreens=”true”
android:normalScreens=”true”
android:smallScreens=”true”
android:resizeable=”true”
android:anyDensity=”true” />

<uses-permission android:name=”android.permission.VIBRATE” />
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” />
<uses-permission android:name=”android.permission.READ_PHONE_STATE” />
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.RECEIVE_SMS” />
<uses-permission android:name=”android.permission.RECORD_AUDIO” />
<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” />
<uses-permission android:name=”android.permission.READ_CONTACTS” />
<uses-permission android:name=”android.permission.WRITE_CONTACTS” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.GET_ACCOUNTS” />
<uses-permission android:name=”android.permission.BROADCAST_STICKY” />

Our next step is to create the index.html file.

Goto assets/www and create index.html.

paste the following:

<!–DOCTYPE html>–>
<html>
<head>
<title>My First App</title>
// <!–[CDATA[–>
javascript” charset=”utf-8″ src=”cordova-2.0.0.js”>
// ]]>
</head>
<body>
<h1>Hello World This is my first app!</h1>
</body>
</html>

Now run:

ant debug

adb install -r bin/MyFirstApp-debug.apk

and test your app!

From here you can do all of your js, css and etc.

For more information go here:
http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

If you have any questions or would like to point out any of my mistakes, please leave a comment, thank you.