Client SDK
Setup
Braintree's JavaScript SDK lets you easily accept payments while maintaining PCI compliance.
The SDK lets you accept payments from credit cards, PayPal, and many other payment methods. Each of these payment methods is its own component, so you only need to pull in the files you need.
Our JavaScript SDK can be initialized with one of two integrations:
Drop-in | Hosted Fields |
---|---|
Include a pre-formatted payment form with a sleek UI in just a few simple lines of code. | Using a custom integration, you can take advantage of Hosted Fields to preserve your user experience while maintaining SAQ A compliance. |
Integrate with Drop-in, or continue reading for details on a Hosted Fields integration.
Loading the SDK
The JavaScript SDK is split into a number of components. You can load these components directly from our servers:
- HTML
<!-- Load the required client component. -->
<script src="https://js.braintreegateway.com/web/3.109.0/js/client.min.js"></script>
<!-- Load additional components when required. -->
<!-- Use the components. We'll see usage instructions next. -->
<script>
braintree.client.create(/* ... */);
</script>
It goes without saying, but we’ll say it anyway: we always recommend using the latest versions of our SDKs.
Other ways to install
We also publish these packages in a few other ways.
npm
We ship an npm package to be used with tools like Browserify or Webpack. Install it as you would any other npm package:
- Bash
npm install --save braintree-web
You can then include each component as needed.
- Callbacks
- Promises
var client = require('braintree-web/client');
var hostedFields = require('braintree-web/hosted-fields');
client.create({
authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
hostedFields.create(/* ... */);
});
Bower
We also publish the SDK to Bower. Install it like any other package:
- Bash
bower install --save braintree-web#3.92.1
And load the components you need:
- HTML
<!-- Load the required client component. -->
<script src="path/to/bower_components/braintree-web/client.js"></script>
<!-- Load additional components if desired. -->
<script src="path/to/bower_components/braintree-web/hosted-fields.js"></script>
<script src="path/to/bower_components/braintree-web/paypal.js"></script>
<script src="path/to/bower_components/braintree-web/data-collector.js"></script>
<!-- Use the components. We'll see usage instructions next. -->
<script>
braintree.client.create(/* ... */);
</script>
AMD (using Require.js)
You can also use the JavaScript SDK with AMD just like any other library.
- HTML
<script
data-main="main.js"
src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"
></script>
You can require only the components that you need, which can reduce the file size of your code.
- Callbacks
- Promises
// Inside main.js:
require.config({
paths: {
braintreeClient: 'https://js.braintreegateway.com/web/3.109.0/js/client.min',
hostedFields: 'https://js.braintreegateway.com/web/3.109.0/js/hosted-fields.min'
}
});
require(['braintreeClient', 'hostedFields'], function (client, hostedFields) {
client.create({
authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
hostedFields.create(/* ... */);
});
});
Once you have access to the braintree
namespace, you can initialize your integration.
For more specifics about each integration, see the documentation for Drop-in or Hosted Fields.