braintree-rxjs.js

import * as braintree from 'braintree-web';
import {Subject} from 'rxjs/Subject.js';
import 'rxjs/add/operator/do.js';
import 'rxjs/add/operator/filter.js';
import 'rxjs/add/operator/map.js';
import 'rxjs/add/operator/publish.js';
/**
 * Abstract the setup of briantree hosted fields to simply give the form what it needs.
 * @param $http
 * @param $q
 */
export default function BraintreeHostedFieldsService($http, $q, environment, Alerts, $timeout, $exceptionService) {
  'ngInject';
  const ERRORS = {
    cannotGetToken: 'There was an error connecting to the secure payment system. Please refresh the page.',
  };

  let teardownFn;

  let configuration = {
    hostedFields: {
      styles: {
        'input': {
          'font-size': '12px',
          'font-weight': '100',
          'color': 'rgba(0,0,0,.75)',
          'font-family': 'sans-serif'
        }
      },
      /**
       * Fires on any evnt on the hosted inputs
       * @param e
       */
      onFieldEvent: function (e) {
        var elem = e.target.container;
        var invalidClass = "braintree-hosted-fields-invalid";
        var validClass = "braintree-hosted-fields-valid";
        var awayInvalid = !e.isEmpty && !e.isValid && !e.isFocused;
        var potenInvalid = !e.isPotentiallyValid;
        if (awayInvalid || potenInvalid || e.isInvalid) {
          elem.classList.add(invalidClass);
        }
        if (e.isValid) {
          elem.classList.remove(invalidClass);
        }
      },
      number: {
        selector: "#card-number",
        placeholder: 'Card Number'
      },
      cvv: {
        selector: "#cvv",
        placeholder: 'CVV'
      },
      expirationDate: {
        selector: "#expiration-date",
        placeholder: 'MM/YYYY'
      }
    }
  };

  function fetchToken() {
    let defer = $q.defer();
    let req = $http.get(`${environment.api.baseUrl}/ecourses/token`);
    let error = () => {
      Alerts.add({
        type: 'danger',
        message: ERRORS.cannotGetToken
      });
      $exceptionService.captureException(new Error(ERRORS.cannotGetToken));
      defer.reject(ERRORS.cannotGetToken);
    };
    let success = (response) => {
      defer.resolve(response.data.token);
    };
    req.then(success, error);
    return defer.promise;
  }

  function initialize(formId) {
    let stream = new Subject();
    fetchToken().then((token) => {
      braintree.setup(token, "custom", Object.assign({id: formId}, configuration, {
          /**
           * Configuration errors will stop the observation and end the observable, but validation errors come through as an event.
           * @param e
           */
          onError: function (e) {
            if (e.type === 'CONFIGURATION') stream.error({type: 'config', payload: e.message});
            else {
              stream.next({type: 'validation_error', payload: e});
            }
          },
          /**
           * When the payment method is ready
           * @param e
           */
          onPaymentMethodReceived: function (e) {
            stream.next({type: 'nonce', payload: e});
          },
          /**
           * The braintree connection is ready.
           * @param e
           */
          onReady: function (e) {
            teardownFn = e.teardown;
            stream.next({type: 'ready', payload: e});
          }
        }
        )
      );
    });
    return stream.publish();
  }

  function teardown() {
    teardownFn();
  }

  return {
    initialize,
    teardown
  };
}