react/redux reference implementation of braintree's drop-in credit card payment UI
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
actions
assets
components
reducers
style
.babelrc
.gitignore
README.md
index-html.ejs
index.js
package.json
server.dev.js
server.prod.js
webpack.config.js
webpack.config.prod.js

README.md

brainforest

Braintree provides a suite of tools to enable easy payment processing in an application, including a drop-in UI that validates credit card info and integrates with PayPal. The simplest version of that UI uses query selectors to insert a pre-built form into the DOM. If your view code is already manipulating the DOM imperatively, the drop-in UI is a great fit, but if your application is built with React, using the drop-in UI means losing the power of describing UI as a function of data.

Other projects have already implemented React wrappers around the drop-in UI, but that doesn't really address the core paradigm discrepancy.

This project is (currently) a reference implementation for adding Braintree to a React/Redux app, and aims to eventually be a set of higher order components you can use that take advantage of React's component lifecycle hooks and declarative syntax.

overview

brainforest is essentially a direct tokenization implementation of Braintree's client SDK, powered by a Node server that integrates with Braintree's gateway via their server SDK. It uses some of Braintree's other open source projects, specifically card-validator, to handle (you guessed it) credit card validation, and also borrows heavily from Braintree's drop-in UI CSS.

features

  • Live validation
  • Dynamic input formatting
  • Credit card validation with card type logos

usage

First, you'll need a Braintree account. I won't pretend to be able to explain the application steps as well as Braintree themselves, so instead will just refer to their instructions.

After setting up an account, you'll need to configure your Sandbox account and obtain your merchandId, publicKey, and privateKey.

To run the demo locally:

git clone https://github.com/ellismarkf/brainforest.git
cd brainforest
npm install

In server.dev.js, swap the placeholder values with your corresponding merchantId, publicKey, and privateKey.

Start the server with npm run start:dev, then visit http://localhost:3000 in your browser.

Et voila!

To use brainforest in your project:

Study (copy) the source code and implement (paste) as necessary. It's my goal to eventually publish this as an npm module, such that it can be imported into a project and "Just Work", but it's not at that stage yet.