braintree-web

What is braintree-web?

The braintree-web npm package is a JavaScript SDK that allows you to integrate Braintree's payment processing services into your web application. It provides a variety of tools to handle different types of payments, including credit cards, PayPal, and more.

What are braintree-web's main functionalities?

Credit Card Payments

This feature allows you to integrate credit card payment forms into your web application using Braintree's hosted fields. The code sample demonstrates how to create a client instance and hosted fields for credit card number, CVV, and expiration date.

const braintree = require('braintree-web');
braintree.client.create({
  authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
  if (err) {
    console.error(err);
    return;
  }
  braintree.hostedFields.create({
    client: clientInstance,
    styles: {
      'input': {
        'font-size': '14px'
      },
      'input.invalid': {
        'color': 'red'
      },
      'input.valid': {
        'color': 'green'
      }
    },
    fields: {
      number: {
        selector: '#card-number',
        placeholder: '4111 1111 1111 1111'
      },
      cvv: {
        selector: '#cvv',
        placeholder: '123'
      },
      expirationDate: {
        selector: '#expiration-date',
        placeholder: '10/2022'
      }
    }
  }, function (err, hostedFieldsInstance) {
    if (err) {
      console.error(err);
      return;
    }
    hostedFieldsInstance.on('validityChange', function (event) {
      var field = event.fields[event.emittedBy];
      if (field.isValid) {
        console.log('Field is valid');
      } else {
        console.log('Field is invalid');
      }
    });
  });
});

PayPal Payments

This feature allows you to integrate PayPal payments into your web application. The code sample demonstrates how to create a client instance and a PayPal instance, and then tokenize a PayPal payment.

const braintree = require('braintree-web');
braintree.client.create({
  authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
  if (err) {
    console.error(err);
    return;
  }
  braintree.paypal.create({
    client: clientInstance
  }, function (err, paypalInstance) {
    if (err) {
      console.error(err);
      return;
    }
    paypalInstance.tokenize({
      flow: 'checkout',
      amount: '10.00',
      currency: 'USD'
    }, function (err, payload) {
      if (err) {
        console.error(err);
        return;
      }
      console.log('PayPal payment tokenized:', payload.nonce);
    });
  });
});

Apple Pay

This feature allows you to integrate Apple Pay into your web application. The code sample demonstrates how to create a client instance and an Apple Pay instance, and then handle the Apple Pay payment process.

const braintree = require('braintree-web');
braintree.client.create({
  authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
  if (err) {
    console.error(err);
    return;
  }
  braintree.applePay.create({
    client: clientInstance
  }, function (err, applePayInstance) {
    if (err) {
      console.error(err);
      return;
    }
    var paymentRequest = applePayInstance.createPaymentRequest({
      total: {
        label: 'Your Label',
        amount: '10.00'
      },
      requiredBillingContactFields: ['postalAddress']
    });
    var session = new ApplePaySession(1, paymentRequest);
    session.onvalidatemerchant = function (event) {
      applePayInstance.performValidation({
        validationURL: event.validationURL,
        displayName: 'Your Store'
      }, function (err, merchantSession) {
        if (err) {
          console.error(err);
          session.abort();
          return;
        }
        session.completeMerchantValidation(merchantSession);
      });
    };
    session.onpaymentauthorized = function (event) {
      applePayInstance.tokenize({
        token: event.payment.token
      }, function (err, payload) {
        if (err) {
          console.error(err);
          session.completePayment(ApplePaySession.STATUS_FAILURE);
          return;
        }
        console.log('Apple Pay payment tokenized:', payload.nonce);
        session.completePayment(ApplePaySession.STATUS_SUCCESS);
      });
    };
    session.begin();
  });
});

Other packages similar to braintree-web

stripe

Stripe is a popular payment processing platform that offers a wide range of tools for handling online payments. It supports various payment methods, including credit cards, Apple Pay, and Google Pay. Compared to braintree-web, Stripe provides a more extensive set of features and a more modern API, but it may be more complex to integrate.

paypal-checkout

PayPal Checkout is a JavaScript SDK that allows you to integrate PayPal payments into your web application. It provides a simple way to add PayPal buttons and handle transactions. While braintree-web also supports PayPal, PayPal Checkout is more focused on providing a streamlined experience for PayPal payments specifically.

square

Square is a payment processing platform that offers tools for handling online and in-person payments. It supports various payment methods, including credit cards and digital wallets. Compared to braintree-web, Square provides a more comprehensive solution for businesses that need both online and offline payment processing capabilities.

README

braintree-web

A suite of tools for integrating Braintree in the browser.

This is the repo to submit issues if you have any problems or questions about a Braintree JavaScript integration.

For a ready-made payment UI, see Braintree Web Drop-in.

Install

npm install braintree-web

bower install braintree-web

Usage

For more thorough documentation, visit the JavaScript client SDK docs.

If you are upgrading from version 2.x, take a look at our migration guide.

Hosted Fields integration

<form action="/" id="my-sample-form">
  <input type="hidden" name="payment_method_nonce" />
  <label for="card-number">Card Number</label>
  <div id="card-number"></div>

  <label for="cvv">CVV</label>
  <div id="cvv"></div>

  <label for="expiration-date">Expiration Date</label>
  <div id="expiration-date"></div>

  <input id="my-submit" type="submit" value="Pay" disabled />
</form>

var submitBtn = document.getElementById("my-submit");
var form = document.getElementById("my-sample-form");

braintree.client.create(
  {
    authorization: CLIENT_AUTHORIZATION,
  },
  clientDidCreate
);

function clientDidCreate(err, client) {
  braintree.hostedFields.create(
    {
      client: client,
      styles: {
        input: {
          "font-size": "16pt",
          color: "#3A3A3A",
        },

        ".number": {
          "font-family": "monospace",
        },

        ".valid": {
          color: "green",
        },
      },
      fields: {
        number: {
          selector: "#card-number",
        },
        cvv: {
          selector: "#cvv",
        },
        expirationDate: {
          selector: "#expiration-date",
        },
      },
    },
    hostedFieldsDidCreate
  );
}

function hostedFieldsDidCreate(err, hostedFields) {
  submitBtn.addEventListener("click", submitHandler.bind(null, hostedFields));
  submitBtn.removeAttribute("disabled");
}

function submitHandler(hostedFields, event) {
  event.preventDefault();
  submitBtn.setAttribute("disabled", "disabled");

  hostedFields.tokenize(function (err, payload) {
    if (err) {
      submitBtn.removeAttribute("disabled");
      console.error(err);
    } else {
      form["payment_method_nonce"].value = payload.nonce;
      form.submit();
    }
  });
}

Advanced integration

To be eligible for the easiest level of PCI compliance (SAQ A), payment fields cannot be hosted on your checkout page. For an alternative to the following, use Hosted Fields.

braintree.client.create(
  {
    authorization: CLIENT_AUTHORIZATION,
  },
  function (err, client) {
    client.request(
      {
        endpoint: "payment_methods/credit_cards",
        method: "post",
        data: {
          creditCard: {
            number: "4111111111111111",
            expirationDate: "10/20",
            cvv: "123",
            billingAddress: {
              postalCode: "12345",
            },
          },
        },
      },
      function (err, response) {
        // Send response.creditCards[0].nonce to your server
      }
    );
  }
);

For more examples, see the reference.

Promises

All the asynchronous methods will return a Promise if no callback is provided.

var submitBtn = document.getElementById("my-submit");
var yourStylesConfig = {
  /* your Hosted Fields `styles` config */
};
var yourFieldsConfig = {
  /* your Hosted Hields `fields` config */
};

braintree.client
  .create({ authorization: CLIENT_AUTHORIZATION })
  .then(function (client) {
    return braintree.hostedFields.create({
      client: client,
      styles: yourStylesConfig,
      fields: yourFieldsConfig,
    });
  })
  .then(function (hostedFields) {
    submitBtn.addEventListener("click", function (event) {
      event.preventDefault();
      submitBtn.setAttribute("disabled", "disabled");

      hostedFields
        .tokenize()
        .then(function (payload) {
          // send payload.nonce to your server
        })
        .catch(function (err) {
          submitBtn.removeAttribute("disabled");
          console.error(err);
        });
    });
  });

Releases

Subscribe to this repo to be notified when SDK releases go out.

Versions

This SDK abides by our Client SDK Deprecation Policy. For more information on the potential statuses of an SDK check our developer docs.

Major version number	Status	Released	Deprecated	Unsupported
3.x.x	Active	August 2016	TBA	TBA
2.x.x	Unsupported	November 2014	February 2022	February 2023

License

The Braintree JavaScript SDK is open source and available under the MIT license. See the LICENSE file for more info.

Changelog

3.112.1

• Venmo
  • Fix a bug where, after redirecting in the mobile web flow, we were passing in a null context ID to a graphql API call. The fix is to set the Venmo instance's venmoPaymentContextId based on resource_id in url.