solidus_braintree 2.0.0 → 3.0.0

data/lib/generators/solidus_braintree/install/install_generator.rb

@@ -1,12 +1,41 @@
 # frozen_string_literal: true
 
+require 'rails/generators/app_base'
+
 module SolidusBraintree
   module Generators
-    class InstallGenerator < Rails::Generators::Base
-      class_option :auto_run_migrations, type: :boolean, default: false
+    class InstallGenerator < Rails::Generators::AppBase
+      argument :app_path, type: :string, default: Rails.root
+
+      class_option :migrate, type: :boolean, default: true
+      class_option :backend, type: :boolean, default: true
+      class_option :frontend, type: :string, default: 'starter'
+
+      # This is only used to run all-specs during development and CI,  regular installation limits
+      # installed specs to frontend, which are the ones related to code copied to the target application.
+      class_option :specs, type: :string, enum: %w[all frontend], default: 'frontend', hide: true
+
       source_root File.expand_path('templates', __dir__)
 
-      def setup_initializer
+      def normalize_components_options
+        @components = {
+          backend: options[:backend],
+          starter_frontend: options[:frontend] == 'starter',
+          classic_frontend: options[:frontend] == 'classic',
+        }
+      end
+
+      def add_test_gems
+        gem_group :test do
+          ['vcr', 'webmock'].each do |gem_name|
+            gem gem_name unless Bundler.locked_gems.dependencies[gem_name]
+          end
+        end
+
+        bundle_command 'install'
+      end
+
+      def setup_initializers
         legacy_initializer_pathname =
           Pathname.new(destination_root).join('config/initializers/solidus_paypal_braintree.rb')
 
@@ -17,57 +46,128 @@ module SolidusBraintree
             "SolidusPaypalBraintree.configure do |config|\n",
             "SolidusBraintree.configure do |config|\n"
         else
-          template 'initializer.rb', 'config/initializers/solidus_braintree.rb'
+          directory 'config/initializers', 'config/initializers'
         end
       end
 
-      def setup_javascripts
-        gsub_file 'vendor/assets/javascripts/spree/frontend/all.js',
-          "//= require spree/frontend/solidus_paypal_braintree\n", ''
-
-        append_file 'vendor/assets/javascripts/spree/frontend/all.js', "//= require spree/frontend/solidus_braintree\n"
+      def run_migrations
+        rake 'railties:install:migrations FROM=solidus_braintree'
+        run 'bin/rails db:migrate' if options[:migrate]
+      end
 
-        gsub_file 'vendor/assets/javascripts/spree/backend/all.js',
-          "//= require spree/backend/solidus_paypal_braintree\n", ''
+      def mount_engine
+        gsub_file 'config/routes.rb',
+          "mount SolidusPaypalBraintree::Engine, at: '/solidus_paypal_braintree'\n", ''
 
-        append_file 'vendor/assets/javascripts/spree/backend/all.js', "//= require spree/backend/solidus_braintree\n"
+        route "mount SolidusBraintree::Engine, at: '/solidus_braintree'"
       end
 
-      def setup_stylesheets
-        gsub_file 'vendor/assets/stylesheets/spree/frontend/all.css',
-          " *= require spree/frontend/solidus_paypal_braintree\n", ''
+      def install_solidus_backend_support
+        support_code_for(:backend) do
+          gsub_file 'vendor/assets/javascripts/spree/backend/all.js',
+            "//= require spree/backend/solidus_paypal_braintree\n", ''
 
-        inject_into_file 'vendor/assets/stylesheets/spree/frontend/all.css',
-          " *= require spree/frontend/solidus_braintree\n", before: %r{\*/}, verbose: true
+          append_file 'vendor/assets/javascripts/spree/backend/all.js',
+            "//= require spree/backend/solidus_braintree\n"
 
-        gsub_file 'vendor/assets/stylesheets/spree/backend/all.css',
-          " *= require spree/backend/solidus_paypal_braintree\n", ''
+          gsub_file 'vendor/assets/stylesheets/spree/backend/all.css',
+            " *= require spree/backend/solidus_paypal_braintree\n", ''
 
-        inject_into_file 'vendor/assets/stylesheets/spree/backend/all.css',
-          " *= require spree/backend/solidus_braintree\n", before: %r{\*/}, verbose: true
+          inject_into_file 'vendor/assets/stylesheets/spree/backend/all.css',
+            " *= require spree/backend/solidus_braintree\n", before: %r{\*/}, verbose: true
+        end
       end
 
-      def add_migrations
-        rake 'railties:install:migrations FROM=solidus_braintree'
+      def install_solidus_starter_frontend_support
+        support_code_for(:starter_frontend) do
+          directory 'app', 'app'
+
+          inject_into_file 'vendor/assets/javascripts/spree/frontend/all.js',
+            "//= require jquery3\n",
+            before: '//= require rails-ujs',
+            verbose: true
+
+          gsub_file 'vendor/assets/javascripts/spree/frontend/all.js',
+            "//= require spree/frontend/solidus_paypal_braintree\n", ''
+
+          append_file 'app/assets/javascripts/solidus_starter_frontend.js',
+            "//= require spree/frontend/solidus_braintree\n"
+
+          gsub_file 'vendor/assets/stylesheets/spree/frontend/all.css',
+            " *= require spree/frontend/solidus_paypal_braintree\n", ''
+
+          inject_into_file 'app/assets/stylesheets/solidus_starter_frontend.css',
+            " *= require spree/frontend/solidus_braintree\n", before: %r{\*/}, verbose: true
+
+          inject_into_class 'app/controllers/checkouts_controller.rb',
+            'CheckoutsController',
+            "  helper SolidusBraintree::BraintreeCheckoutHelper\n\n",
+            verbose: true
+
+          inject_into_class 'app/controllers/carts_controller.rb',
+            'CartsController',
+            "  helper SolidusBraintree::BraintreeCheckoutHelper\n\n",
+            verbose: true
+
+          inject_into_file 'app/views/orders/_payment_info.html.erb',
+            "        <li><%= render 'payments/braintree_payment_details', payment: payment %></li>\n",
+            after: "<li><%= payment.payment_method.name %></li>\n",
+            verbose: true
+
+          spec_paths =
+            case options[:specs]
+            when 'all' then %w[spec]
+            when 'frontend'
+              %w[
+                spec/solidus_braintree_helper.rb
+                spec/system/frontend
+                spec/support
+                spec/fixtures
+              ]
+            end
+
+          spec_paths.each do |path|
+            if engine.root.join(path).directory?
+              directory engine.root.join(path), path
+            else
+              template engine.root.join(path), path
+            end
+          end
+        end
       end
 
-      def mount_engine
-        gsub_file 'config/routes.rb',
-          "mount SolidusPaypalBraintree::Engine, at: '/solidus_paypal_braintree'\n", ''
-
-        route "mount SolidusBraintree::Engine, at: '/solidus_braintree'"
+      def alert_no_classic_frontend_support
+        support_code_for(:classic_frontend) do
+          message = <<~TEXT
+            For solidus_frontend compatibility, please use version 2.x.
+            The new version of this extension only supports Solidus Starter Frontend.
+            No frontend code has been copied to your application.
+          TEXT
+          say_status :error, set_color(message.tr("\n", ' '), :red), :red
+        end
       end
 
-      def run_migrations
-        run_migrations = options[:auto_run_migrations] ||
-          ['', 'y', 'Y'].include?(ask('Would you like to run the migrations now? [Y/n]'))
+      private
 
-        if run_migrations
-          rake 'db:migrate'
+      def support_code_for(component_name, &block)
+        if @components[component_name]
+          say_status :install, "[#{engine.engine_name}] solidus_#{component_name}", :blue
+          shell.indent(&block)
         else
-          puts 'Skipping bin/rails db:migrate, don\'t forget to run it!' # rubocop:disable Rails/Output
+          say_status :skip, "[#{engine.engine_name}] solidus_#{component_name}", :blue
         end
       end
+
+      def engine
+        SolidusBraintree::Engine
+      end
+
+      def bundle_command(command, env = {})
+        # Make `bundle install` less verbose by skipping the "Using ..." messages
+        super(command, env.reverse_merge('BUNDLE_SUPPRESS_INSTALL_USING_MESSAGES' => 'true'))
+      ensure
+        Bundler.reset_paths!
+      end
     end
   end
 end

data/{app → lib/generators/solidus_braintree/install/templates/app}/assets/javascripts/spree/frontend/paypal_button.js

@@ -1,4 +1,4 @@
-//= require solidus_braintree/paypal_button
+//= require spree/frontend/solidus_braintree/paypal_button
 
 // This is the PayPal button on the cart page
 $(document).ready(function() {

data/lib/generators/solidus_braintree/install/templates/app/assets/javascripts/spree/frontend/solidus_braintree/ajax.js

@@ -0,0 +1,13 @@
+SolidusBraintree.ajax = function(url, options) {
+  if (typeof url === "object") {
+    options = url;
+    url = undefined;
+  }
+  options = options || {};
+  options = $.extend(options, {
+    headers: {
+      'Authorization': 'Bearer '
+    }
+  });
+  return $.ajax(url, options);
+};

data/{app/assets/javascripts → lib/generators/solidus_braintree/install/templates/app/assets/javascripts/spree/frontend}/solidus_braintree/apple_pay_button.js

@@ -1,4 +1,4 @@
-//= require solidus_braintree/constants
+//= require spree/frontend/solidus_braintree/constants
 /**
  * Constructor for Apple Pay button object
  * @constructor
@@ -94,7 +94,7 @@ SolidusBraintree.ApplepayButton.prototype.tokenize = function (session, payment)
 };
 
 SolidusBraintree.ApplepayButton.prototype._createTransaction = function (session, payment, payload) {
-  Spree.ajax({
+  SolidusBraintree.ajax({
     data: this._transactionParams(payload, payment.shippingContact),
     dataType: 'json',
     type: 'POST',

data/{app/assets/javascripts → lib/generators/solidus_braintree/install/templates/app/assets/javascripts/spree/frontend}/solidus_braintree/checkout.js

@@ -1,4 +1,4 @@
-//= require solidus_braintree/frontend
+//= require spree/frontend/solidus_braintree/frontend
 
 $(function() {
   /* This provides a default error handler for Braintree. Since we prevent
@@ -40,9 +40,9 @@ $(function() {
     $paymentForm.on("submit",function(event) {
       var $field = $(hostedField);
 
-      if ($field.is(":visible") && !$field.data("submitting")) {
+      if ($field.is(":visible") && $field.is(":enabled") && !$field.data("submitting")) {
         var $nonce = $("#payment_method_nonce", $field);
-
+        var $deviceData = $("#device_data", $field);
         if ($nonce.length > 0 && $nonce.val() === "") {
           var client = braintreeForm._merchantConfigurationOptions._solidusClient;
 
@@ -56,6 +56,10 @@ $(function() {
             }
 
             $nonce.val(payload.nonce);
+            
+            if (client._dataCollectorInstance) {
+              $deviceData.val(client._dataCollectorInstance.deviceData);
+            }
 
             if (!client.useThreeDSecure) {
               $paymentForm.submit();
@@ -84,7 +88,7 @@ $(function() {
 
   var $paymentForm = $("#checkout_form_payment");
   var $hostedFields = $("[data-braintree-hosted-fields]");
-  var $submitButton = $("input[type='submit']", $paymentForm);
+  var $submitButton = $("[type='submit']", $paymentForm);
 
   // If we're not using hosted fields, the form doesn't need to wait.
   if ($hostedFields.length > 0) {
@@ -93,8 +97,9 @@ $(function() {
     var fieldPromises = $hostedFields.map(function(index, field) {
       var $this = $(this);
       var id = $this.data("id");
+      var useDataCollector = $this.data("use-data-collector");
 
-      var braintreeForm = new SolidusBraintree.createHostedForm(id);
+      var braintreeForm = new SolidusBraintree.createHostedForm(id, useDataCollector);
 
       var formInitializationSuccess = function(formObject) {
         addFormHook(formObject, field);

data/lib/generators/solidus_braintree/install/templates/app/assets/javascripts/spree/frontend/solidus_braintree/client.js

@@ -0,0 +1,239 @@
+/**
+ * Braintree client interface
+ * @external "braintree.Client"
+ * @see {@link https://braintree.github.io/braintree-web/current/Client.html|Braintree Client Docs}
+**/
+
+/**
+ * Braintree paypal interface
+ * @external "braintree.PayPal"
+ * @see {@link https://braintree.github.io/braintree-web/current/PayPal.html|Braintree Paypal Docs}
+**/
+
+/**
+ * Braintree paypal interface
+ * @external "braintree.ApplePay"
+ * @see {@link https://braintree.github.io/braintree-web/current/ApplePay.html|Braintree Apple Pay Docs}
+**/
+
+/**
+ * Braintree dataCollector interface
+ * @external "braintree.DataCollector"
+ * @see {@link https://braintree.github.io/braintree-web/current/DataCollector.html|Braintree DataCollector Docs}
+**/
+
+/**
+ * jQuery.Deferred interface
+ *
+ * We use this for our promises because ES6 promises are non standard, and because jquery 1/2
+ * promises do not play nicely with them.
+ * @external "jQuery.Deferred"
+ * @see {@link https://api.jquery.com/category/deferred-object/|jQuery Deferred Documentation}
+**/
+
+/**
+ * Represents a wrapper around the braintree js library.
+ *
+ * This class is responsible for fetching tokens from a solidus store and using them
+ * to manage a braintree client. It takes a number of options as capabilities for the client
+ * depending on if you want to use use the data collector or paypal.
+ *
+ * We use this class mostly to hide the token operations for users.
+ *
+ * After creating the class, a call should be made to initialize before using it.
+ * @see initialize
+ *
+ * @constructor
+ * @param {Object} config Initalization options for the client
+ * @param {Boolean} config.useDataCollector Use data collector capabilities for the braintree client
+ * @param {Boolean} config.usePaypal Use Paypal capabilities for the braintree client
+ * @param {requestCallback} config.readyCallback A callback to be invoked when the client is ready to go.
+ * @param {Number} config.paymentMethodId A number indicating a specific payment method to be preferrred.
+ *
+**/
+SolidusBraintree.Client = function(config) {
+  this.paymentMethodId = config.paymentMethodId;
+  this.readyCallback = config.readyCallback;
+  this.useDataCollector = config.useDataCollector;
+  this.usePaypal = config.usePaypal;
+  this.useApplepay = config.useApplepay;
+  this.useVenmo = config.useVenmo;
+  this.flow = config.flow;
+  this.venmoNewTabSupported = config.newBrowserTabSupported
+  this.useThreeDSecure = config.useThreeDSecure;
+
+  this._braintreeInstance = null;
+  this._dataCollectorInstance = null;
+  this._paypalInstance = null;
+  this._venmoInstance = null;
+  this._threeDSecureInstance = null;
+};
+
+/**
+ * Fetches a client token from the backend and initializes the braintree client.
+ * @returns {external:"jQuery.Deferred"} Promise to be invoked after initialization is complete
+**/
+SolidusBraintree.Client.prototype.initialize = function() {
+  var initializationPromise = this._fetchToken().
+    then(this._createBraintreeInstance.bind(this));
+
+  if (this.useDataCollector) {
+    initializationPromise = initializationPromise.then(this._createDataCollector.bind(this));
+  }
+
+  if (this.usePaypal) {
+    initializationPromise = initializationPromise.then(this._createPaypal.bind(this));
+  }
+
+  if (this.useApplepay) {
+    initializationPromise = initializationPromise.then(this._createApplepay.bind(this));
+  }
+
+  if (this.useVenmo) {
+    initializationPromise = initializationPromise.then(this._createVenmo.bind(this));
+  }
+
+  if (this.useThreeDSecure) {
+    initializationPromise = initializationPromise.then(this._createThreeDSecure.bind(this));
+  }
+
+  return initializationPromise.then(this._invokeReadyCallback.bind(this));
+};
+
+/**
+ * Returns the braintree client instance
+ * @returns {external:"braintree.Client"} The braintree client that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getBraintreeInstance = function() {
+  return this._braintreeInstance;
+};
+
+/**
+ * Returns the braintree paypal instance
+ * @returns {external:"braintree.PayPal"} The braintree paypal that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getPaypalInstance = function() {
+  return this._paypalInstance;
+};
+
+/**
+ * Returns the braintree Apple Pay instance
+ * @returns {external:"braintree.ApplePay"} The Braintree Apple Pay that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getApplepayInstance = function() {
+  return this._applepayInstance;
+};
+
+/**
+ * Returns the braintree Venmo instance
+ * @returns {external:"braintree.Venmo"} The Braintree Venmo that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getVenmoInstance = function() {
+  return this._venmoInstance;
+};
+
+/**
+ * Returns the braintree dataCollector instance
+ * @returns {external:"braintree.DataCollector"} The braintree dataCollector that was initialized by this class
+**/
+SolidusBraintree.Client.prototype.getDataCollectorInstance = function() {
+  return this._dataCollectorInstance;
+};
+
+
+SolidusBraintree.Client.prototype._fetchToken = function() {
+  var payload = {
+    dataType: 'json',
+    type: 'POST',
+    url: SolidusBraintree.config.paths.clientTokens,
+    error: function(xhr) {
+      console.error("Error fetching braintree token");
+    }
+  };
+
+  if (this.paymentMethodId) {
+    payload.data = {
+      payment_method_id: this.paymentMethodId
+    };
+  }
+
+  return SolidusBraintree.ajax(payload);
+};
+
+SolidusBraintree.Client.prototype._createBraintreeInstance = function(tokenResponse) {
+  this.paymentMethodId = tokenResponse.payment_method_id;
+
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.client.create, [{
+    authorization: tokenResponse.client_token
+  }]).then(function (clientInstance) {
+    this._braintreeInstance = clientInstance;
+    return clientInstance;
+  }.bind(this));
+};
+
+SolidusBraintree.Client.prototype._invokeReadyCallback = function() {
+  if(this.readyCallback) {
+    this.readyCallback(this._braintreeInstance);
+  }
+
+  return this;
+};
+
+SolidusBraintree.Client.prototype._createDataCollector = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.dataCollector.create, [{
+    client: this._braintreeInstance,
+    paypal: !!this.usePaypal
+  }]).then(function (dataCollectorInstance) {
+    this._dataCollectorInstance = dataCollectorInstance;
+    return dataCollectorInstance;
+  }.bind(this));
+};
+
+SolidusBraintree.Client.prototype._createPaypal = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.paypalCheckout.create, [{
+    client: this._braintreeInstance
+  }]).then(function (paypalInstance) {
+    this._paypalInstance = paypalInstance;
+    return paypalInstance;
+  }.bind(this), function(error) {
+    console.error(error.name + ':', error.message);
+  });
+};
+
+SolidusBraintree.Client.prototype._createApplepay = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.applePay.create, [{
+    client: this._braintreeInstance
+  }]).then(function (applePayInstance) {
+    this._applepayInstance = applePayInstance;
+    return applePayInstance;
+  }.bind(this));
+};
+
+SolidusBraintree.Client.prototype._createVenmo = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.venmo.create, [{
+    client: this._braintreeInstance,
+    allowDesktop: true,
+    paymentMethodUsage: this.flow === 'vault' ? 'multi_use' : 'single_use',
+    allowNewBrowserTab: this.venmoNewTabSupported
+  }]).then(function (venmoInstance) {
+    // Verify browser support before proceeding.
+    if (!venmoInstance.isBrowserSupported()) {
+      console.log('Browser does not support Venmo');
+      return;
+    }
+
+    this._venmoInstance = venmoInstance;
+    return venmoInstance;
+  }.bind(this));
+};
+
+SolidusBraintree.Client.prototype._createThreeDSecure = function() {
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.threeDSecure.create, [{
+    client: this._braintreeInstance,
+    version: 2
+  }]).then(function (threeDSecureInstance) {
+    this._threeDSecureInstance = threeDSecureInstance;
+  }.bind(this), function(error) {
+    console.log(error);
+  });
+};

data/lib/generators/solidus_braintree/install/templates/app/assets/javascripts/spree/frontend/solidus_braintree/constants.js

@@ -0,0 +1,89 @@
+SolidusBraintree = {
+  APPLE_PAY_API_VERSION: 1,
+
+  config: {
+    paths: {
+      clientTokens: Solidus.pathFor('solidus_braintree/client_token'),
+      transactions: Solidus.pathFor('solidus_braintree/transactions')
+    },
+
+    // Override to provide your own error messages.
+    braintreeErrorHandle: function(braintreeError) {
+      BraintreeError.getErrorFromSlug(braintreeError.code);
+      SolidusBraintree.showError(error);
+    },
+
+    classes: {
+      hostedForm: function() {
+        return SolidusBraintree.HostedForm;
+      },
+
+      client: function() {
+        return SolidusBraintree.Client;
+      },
+
+      paypalButton: function() {
+        return SolidusBraintree.PaypalButton;
+      },
+
+      paypalMessaging: function() {
+        return SolidusBraintree.PaypalMessaging;
+      },
+
+      applepayButton: function() {
+        return SolidusBraintree.ApplepayButton;
+      },
+
+      venmoButton: function() {
+        return SolidusBraintree.VenmoButton;
+      }
+    }
+  },
+
+  showError: function(error) {
+    var $contentContainer = $("main");
+    var $flash = $("<div class='flash error'>" + error + "</div>");
+    $contentContainer.before($flash);
+    $flash.show().delay(5000).fadeOut(500);
+  },
+
+  createHostedForm: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.hostedForm(), arguments);
+  },
+
+  createClient: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.client(), arguments);
+  },
+
+  createPaypalButton: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.paypalButton(), arguments);
+  },
+
+  createPaypalMessaging: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.paypalMessaging(), arguments);
+  },
+
+  createApplePayButton: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.applepayButton(), arguments);
+  },
+
+  createVenmoButton: function() {
+    return SolidusBraintree._factory(SolidusBraintree.config.classes.venmoButton(), arguments);
+  },
+
+  _factory: function(klass, args) {
+    var normalizedArgs = Array.prototype.slice.call(args);
+    return new (Function.prototype.bind.apply(klass, [null].concat(normalizedArgs)));
+  }
+};
+
+BraintreeError = {
+  DEFAULT: "Something bad happened!",
+
+  getErrorFromSlug: function(slug) {
+    error = BraintreeError.DEFAULT
+    if (slug in BraintreeError)
+      error = BraintreeError[slug]
+    return error
+  }
+}

data/lib/generators/solidus_braintree/install/templates/app/assets/javascripts/spree/frontend/solidus_braintree/frontend.js

@@ -0,0 +1,15 @@
+// This is a manifest file that'll be compiled into including all the files listed below.
+// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
+// be included in the compiled file accessible from http://example.com/assets/application.js
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+//= require spree/frontend/solidus_braintree/constants
+//= require spree/frontend/solidus_braintree/ajax
+//= require spree/frontend/solidus_braintree/promise
+//= require spree/frontend/solidus_braintree/client
+//= require spree/frontend/solidus_braintree/hosted_form
+//= require spree/frontend/solidus_braintree/paypal_button
+//= require spree/frontend/solidus_braintree/paypal_messaging
+//= require spree/frontend/solidus_braintree/apple_pay_button
+//= require spree/frontend/solidus_braintree/venmo_button

data/lib/generators/solidus_braintree/install/templates/app/assets/javascripts/spree/frontend/solidus_braintree/hosted_form.js

@@ -0,0 +1,48 @@
+SolidusBraintree.HostedForm = function(paymentMethodId, useDataCollector) {
+  this.paymentMethodId = paymentMethodId;
+  this.useDataCollector = useDataCollector;
+  this.client = null;
+};
+
+SolidusBraintree.HostedForm.prototype.initialize = function() {
+  this.client = SolidusBraintree.createClient({
+    paymentMethodId: this.paymentMethodId,
+    useThreeDSecure: (typeof(window.threeDSecureOptions) !== 'undefined'),
+    useDataCollector: this.useDataCollector,
+  });
+
+  return this.client.initialize().
+    then(this._createHostedFields.bind(this));
+};
+
+SolidusBraintree.HostedForm.prototype._createHostedFields = function () {
+  if (!this.client) {
+    throw new Error("Client not initialized, please call initialize first!");
+  }
+
+  var opts = {
+    _solidusClient: this.client,
+    client: this.client.getBraintreeInstance(),
+
+    fields: {
+      number: {
+        selector: "#card_number" + this.paymentMethodId,
+        placeholder: placeholder_text["number"]
+      },
+
+      cvv: {
+        selector: "#card_code" + this.paymentMethodId,
+        placeholder: placeholder_text["cvv"]
+      },
+
+      expirationDate: {
+        selector: "#card_expiry" + this.paymentMethodId,
+        placeholder: placeholder_text["expirationDate"]
+      }
+    },
+
+    styles: credit_card_fields_style
+  };
+
+  return SolidusBraintree.PromiseShim.convertBraintreePromise(braintree.hostedFields.create, [opts]);
+};