Braintree PayPal API v3 hidePrettyPayPal

braintree-paypal-api-v3-hide-pp.js

'use strict';

var paypalButton = document.getElementById('paypal');
var paypalEmail = document.getElementById('bt-pp-email');
var paypalCancel = document.getElementById('braintree-paypal-loggedin');

function displayPrettyPayPal(payload) {
  paypalEmail.innerHTML = payload.details.email;
  $('#braintree-paypal-loggedin').fadeIn('slow');
}

function hidePrettyPayPal() {
  $('#braintree-paypal-loggedin').fadeOut('fast', function() {
    paypalEmail.innerHTML = '';
    paypalButton.removeAttribute('disabled');
  });
}

paypalCancel.addEventListener('click', hidePrettyPayPal);

braintree.client.create({
  authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
}, function(clientErr, clientInstance) {
  braintree.paypal.create({
    client: clientInstance
  }, function(paypalErr, paypalInstance) {
    paypalButton.removeAttribute('disabled');

    paypalButton.addEventListener('click', function(event) {
      paypalButton.setAttribute('disabled', true);

      paypalInstance.tokenize({
        flow: 'vault'
      }, function(tokenizeErr, payload) {
        // Stop if there was an error.
        if (tokenizeErr) {
          paypalButton.removeAttribute('disabled');
          return;
        }

        displayPrettyPayPal(payload);
      });
    }, false);
  });
});