braintree-react

Braintree React Component

This is a React component that wraps the Drop-In integration from braintree-web. For issues and information concerning braintree-web in general, please see that repo.

Disclaimer: this is not an official Braintree module.

Install

npm install braintree-react

Drop-In

If you're using CommonJS (browserify or Webpack):

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

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

Props

clientToken

The client token used to perform the transaction.

onNonceReceived

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 braintree={braintree} onNonceReceived={nonceReceived} />

onReady

A callback triggered when the DropIn iFrame has been written to the DOM, i.e. it's fully rendered and visible to the user.

onError

See JS SDK documentation

rootClassName

The class name of the outer DOM container.

Default: __braintree-react__

Notes

• Drop-In is currently the only supported integration method.
  • If there is sufficient interest, we can start building out the custom integration. (Note that as of January 2015, using anything other than DropIn means you can no longer be SAQ A).