braintree-react

Braintree React Component

Easier than sticking cash into a dirty envelope and mailing it to a company.

Usage

First, install via npm:

npm install braintree-react

Drop-In

If you're using CommonJS (browserify or Webpack)

var DropIn = require('braintree-react').DropIn;

React.render(
  <DropIn />,
  document.getElementById('react-root')
);

If you're not using a module loader

<script src="node_modules/braintree-react/dist/braintree-react-standalone.js"></script>
<script>
var DropIn = braintreereact.DropIn;

React.render(
  <DropIn />,
  document.getElementById('react-root')
);
</script>

By default, once Drop-In receives a credit card nonce it submits the outer form. To intercept any nonce, use this callback:

var nonceReceived = function(event, nonce) {
  console.log(nonce);
};
<DropIn onNonceReceived={nonceReceived} />

View example integrations here.

Notes

• The use of jsx is not required. Both <Dropin /> and DropIn() are valid.
• Drop-In is currently the only supported integration method.
  • If there is sufficient interest, we can start building out the custom integration. (Note that since January 2015, using anything other than DropIn means you can no longer be SAQ-A).

To-Dos

• Testing (sort of)
• Allow arbitrary configuration via props
• Add Braintree integrations beyond Drop-In (PayPal, Coinbase, etc)