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 any v.zero JavaScript integration.

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

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
  });
});

Changelog

3.6.2

• American Express
  • Fix bug where additional options were not passed along in getRewardsBalance request
• Hosted Fields
  • Fix a bug where unformatted inputs could not tokenize card numbers with hyphens or spaces
  • Fix a bug where postal codes of length 3 (e.g. in Iceland) were considered invalid
  • Fix input formatting with third party keyboards on Android Chrome