Using Braintree

We use Braintree as our payment processing platform for non-Affiliate orders.

With an account under our Umbrella Gateway you can utilize your existing merchant account or have one provided to you by Braintree. Contact our Sales team to get started today.

We recommend using Braintree’s Drop-In UI or Hosted Fields to generate a token or nonce representing the customer‘s credit card and then sending either payment_method_token or payment_method_nonce when you create your order.

Implementing the Braintree Drop-In UI Javascript SDK

When following the Braintree Drop-In UI guide follow the instructions that include generating a client token (not the tokenization key instructions).

Step 1: Install the Braintree JavaScript v3 SDK

Braintree provides documentation of several different ways to install their JavaScript v3 SDK.

Step 2: Get a Client Token from our API

Because generating a client token is done server side we provide the Clients / Braintree Client Token endpoint which will return the client token (a signed JWT) which gets provided to the Javascript front-end. The Client Token endpoint requires a client_id of a Client you have already created and our servers will use Braintree’s API to create a Braintree Customer matching your Client and pass that Customer’s ID to Braintree when we create the client token required by the JavaScript SDK.

Step 3: Create the Checkout UI and include the Client Token

Drop-In UI

var button = document.querySelector('#submit-button');

braintree.dropin.create({
  authorization: 'CLIENT_TOKEN_RECEIVED_VIA_API',
  selector: '#dropin-container'
}, function (err, instance) {
  button.addEventListener('click', function () {
    instance.requestPaymentMethod(function (err, payload) {
      // Submit payload.nonce in your order payload as payment_method_nonce
    });
  })
});

Hosted Fields

braintree.dropin.create({
  authorization: 'CLIENT_TOKEN_RECEIVED_VIA_API',
  selector: '#dropin-container'
}, function (err, instance) {
  button.addEventListener('click', function () {
    instance.requestPaymentMethod(function (err, payload) {
      // Submit payload.nonce in your order payload as payment_method_nonce
    });
  })
});


braintree.client.create({
  authorization: 'CLIENT_TOKEN_RECEIVED_VIA_API',
}, function(err, clientInstance) {
  if (err) {
    console.error(err);
    return;
  }

  braintree.hostedFields.create({
    preventAutofill: false,
    client: clientInstance,
    fields: {
      cardholderName: {
        selector: '#cc-name',
      },
      number: {
        selector: '#cc-number',
      },
      cvv: {
        selector: '#cc-cvv',
      },
      expirationDate: {
        selector: '#cc-expiration',
      }
    }
  }, 
                        
hostedFieldsInstance.on('validityChange', function (event) {
    submit.addEventListener('click', function () {
      if (err) {
        console.error(err);
        return;
      }
      // Submit payload.nonce in your order payload as payment_method_nonce
    });
  });
});

There is more code involved with the hosted fields since it allows us to change how the fields look.

Step 4: Create the Order

The Drop-In UI will return to you a payment method nonce which needs to be included in the POST to Orders / Create.