solidus_stripe 2.1.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b4105fb7ad047aa377a29ebc364dc19d861ce07e4bbcb264fb5494fcf9bbb8f1
-  data.tar.gz: 43fa8a0106162cd0c26f7ff1e6fc65da2547137d98a1e4650aff04d639daae7d
+  metadata.gz: d9e6ec7ddfb05d802b145edb2e2e50d58510148be740c085dd0a7eb99a8e367b
+  data.tar.gz: c6598070cbe6c6e18504f27ab999ef0ca6d1b331ecdee9e1838434c261fe699d
 SHA512:
-  metadata.gz: 2c891474a71412e3a03443ece9b16be6e49a0e7c6c1f6b6ad69f56d09608976fdc816211e779ce45556cfbc573c380334a65f7747170a3071763cb65b768dad6
-  data.tar.gz: cf52ef3d344bb3335f795b6e708d1b35151b80159e6a52ced595c09b0339c47b85a2bbf89932d14ff8661b35a3cbd22fb8da0b1cebcb8a95736221e6645609e8
+  metadata.gz: 8faba0fdc2be35b90a936273a8d3aedf2411a10e8c01489c5a66b5859fbbcccb38ffcfec3e9d2a34dcdbf065228396b3047210cdbcbb0818c495ff2abf76f098
+  data.tar.gz: 82f01e68ff9a5fa8bcc74c759c3974d78cf05411b83cb732ca0ef32553d62d920697093db371a174c826d3391ca19908f0e4a35a4ae152863c61a94ae595f2c4

data/README.md

@@ -133,6 +133,80 @@ payment method configured for Stripe via the local variable
 Of course, the rules listed in the Payment Intents section (adding the stripe
 country config value, for example) apply also for this feature.
 
+Customizing the V3 API javascript
+---------------------------------
+
+Stripe V3 JS code is now managed via Sprockets. If you need to customize the JS,
+you can simply override or/and add new methods to the relevant object prototype.
+Make sure you load your customizations after Stripe initalization code from
+`spree/frontend/solidus_stripe`.
+
+For example, the following code adds a callback method in order to print a debug
+message on the console:
+
+```js
+SolidusStripe.CartPageCheckout.prototype.onPrButtonMounted = function(id, result) {
+  if (result) {
+    $('#' + id).parent().show();
+    console.log('Payment request button is now mounted on element with id #' + id);
+  } else {
+    console.log('Payment request button failed initalization.');
+  }
+}
+```
+
+Styling Stripe Elements
+-----------------------
+
+The Elements feature built in this gem come with some standard styles. If you want
+to customize it, you can override the `SolidusStripe.Elements.prototype.baseStyle`
+method and make it return a valid [Stripe Style](https://stripe.com/docs/js/appendix/style)
+object:
+
+```js
+SolidusStripe.Elements.prototype.baseStyle = function () {
+  return {
+    base: {
+      iconColor: '#c4f0ff',
+      color: '#fff',
+      fontWeight: 500,
+      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
+      fontSize: '16px',
+      fontSmoothing: 'antialiased',
+      ':-webkit-autofill': {
+        color: '#fce883',
+      },
+      '::placeholder': {
+        color: '#87BBFD',
+      },
+    },
+    invalid: {
+      iconColor: '#FFC7EE',
+      color: '#FFC7EE',
+    }
+  }
+};
+```
+
+You can also style your element containers directly by using CSS rules like this:
+
+```css
+  .StripeElement {
+    border: 1px solid transparent;
+  }
+
+  .StripeElement--focus {
+    box-shadow: 0 1px 3px 0 #cfd7df;
+  }
+
+  .StripeElement--invalid {
+    border-color: #fa755a;
+  }
+
+  .StripeElement--webkit-autofill {
+    background-color: #fefde5 !important;
+  }
+```
 
 Migrating from solidus_gateway
 ------------------------------

data/app/assets/javascripts/spree/frontend/solidus_stripe.js

@@ -0,0 +1,6 @@
+//= require ./solidus_stripe/stripe-payment
+//= require ./solidus_stripe/stripe-elements
+//= require ./solidus_stripe/stripe-payment-intents
+//= require ./solidus_stripe/stripe-cart-page-checkout
+//= require ./solidus_stripe/stripe-payment-request-button-shared
+//= require ./solidus_stripe/stripe-init

data/app/assets/javascripts/spree/{stripe-payments → frontend/solidus_stripe}/stripe-elements.js

@@ -19,21 +19,7 @@ SolidusStripe.Elements.prototype.init = function() {
 
 SolidusStripe.Elements.prototype.initElements = function() {
   var buildElements = function(elements) {
-    var style = {
-      base: {
-        color: 'black',
-        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-        fontSmoothing: 'antialiased',
-        fontSize: '14px',
-        '::placeholder': {
-          color: 'silver'
-        }
-      },
-      invalid: {
-        color: 'red',
-        iconColor: 'red'
-      }
-    };
+    var style = this.baseStyle();
 
     elements.create('cardExpiry', {style: style}).mount('#card_expiry');
     elements.create('cardCvc', {style: style}).mount('#card_cvc');
@@ -42,7 +28,7 @@ SolidusStripe.Elements.prototype.initElements = function() {
     cardNumber.mount('#card_number');
 
     return cardNumber;
-  };
+  }.bind(this);
 
   this.cardNumber = buildElements(this.elements);
 
@@ -57,6 +43,24 @@ SolidusStripe.Elements.prototype.initElements = function() {
   this.form.bind('submit', this.onFormSubmit.bind(this));
 };
 
+SolidusStripe.Elements.prototype.baseStyle = function () {
+  return {
+    base: {
+      color: 'black',
+      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+      fontSmoothing: 'antialiased',
+      fontSize: '14px',
+      '::placeholder': {
+        color: 'silver'
+      }
+    },
+    invalid: {
+      color: 'red',
+      iconColor: 'red'
+    }
+  };
+};
+
 SolidusStripe.Elements.prototype.showError = function(error) {
   var message = error.message || error;
 

data/app/assets/javascripts/spree/frontend/solidus_stripe/stripe-init.js

@@ -0,0 +1,20 @@
+$(function() {
+  var stripeV3Api = $('[data-v3-api]').data('v3-api');
+
+  if (stripeV3Api) {
+    $.getScript('https://js.stripe.com/v3/')
+      .done(function() {
+        switch (stripeV3Api) {
+          case 'elements':
+            new SolidusStripe.Elements().init();
+            break;
+          case 'payment-intents':
+            new SolidusStripe.PaymentIntents().init();
+            break;
+          case 'payment-request-button':
+            new SolidusStripe.CartPageCheckout().init();
+            break;
+        }
+    });
+  }
+});

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

@@ -5,11 +5,8 @@ module SolidusStripe
     class InstallGenerator < Rails::Generators::Base
       class_option :auto_run_migrations, type: :boolean, default: false
 
-      def add_stylesheets
-        filename = 'vendor/assets/stylesheets/spree/frontend/all.css'
-        if File.file? filename
-          inject_into_file filename, " *= require spree/frontend/solidus_stripe\n", before: '*/', verbose: true
-        end
+      def add_javascripts
+        append_file 'vendor/assets/javascripts/spree/frontend/all.js', "//= require spree/frontend/solidus_stripe\n"
       end
 
       def add_migrations

data/lib/solidus_stripe/engine.rb

@@ -21,7 +21,6 @@ module SolidusStripe
 
     if SolidusSupport.frontend_available?
       paths["app/views"] << "lib/views/frontend"
-      config.assets.precompile += ['spree/stripe-v3-payments.js']
     end
 
     if SolidusSupport.api_available?

data/lib/solidus_stripe/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SolidusStripe
-  VERSION = "2.1.0"
+  VERSION = "3.0.0"
 end

data/lib/views/frontend/spree/checkout/payment/_stripe.html.erb

@@ -1,5 +1,5 @@
 <% if payment_method.v3_elements? %>
-  <%= render 'spree/checkout/payment/v3/stripe', payment_method: payment_method %>
+  <%= render 'spree/checkout/payment/v3/elements', payment_method: payment_method %>
 <% elsif payment_method.v3_intents? %>
   <%= render 'spree/checkout/payment/v3/intents', payment_method: payment_method %>
 <% else %>

data/lib/views/frontend/spree/checkout/payment/v3/_elements.html.erb

@@ -0,0 +1 @@
+<%= render 'spree/checkout/payment/v3/form_elements', payment_method: payment_method, stripe_v3_api: 'elements' %>

data/lib/views/frontend/spree/checkout/payment/v3/_form_elements.html.erb

@@ -1,4 +1,4 @@
-<div id="payment-request-button" data-stripe-config="<%= payment_method.stripe_config(current_order).to_json %>"></div>
+<div id="payment-request-button" data-stripe-config="<%= payment_method.stripe_config(current_order).to_json %>" data-v3-api="<%= stripe_v3_api %>"></div>
 
 <%= image_tag 'credit_cards/credit_card.gif', id: 'credit-card-image' %>
 <% param_prefix = "payment_source[#{payment_method.id}]" %>
@@ -38,5 +38,3 @@
 <% end %>
 
 <%= hidden_field_tag "#{param_prefix}[cc_type]", '', id: "cc_type", class: 'ccType' %>
-
-<script src="https://js.stripe.com/v3/"></script>

data/lib/views/frontend/spree/checkout/payment/v3/_intents.html.erb

@@ -1,9 +1 @@
-<%= render 'spree/checkout/payment/v3/form_elements', payment_method: payment_method %>
-
-<%= javascript_include_tag 'spree/stripe-v3-payments' %>
-
-<script>
-  $(function() {
-    new SolidusStripe.PaymentIntents().init();
-  });
-</script>
+<%= render 'spree/checkout/payment/v3/form_elements', payment_method: payment_method, stripe_v3_api: 'payment-intents' %>

data/lib/views/frontend/spree/checkout/payment/v3/_stripe.html.erb

@@ -1,9 +1,2 @@
-<%= render 'spree/checkout/payment/v3/form_elements', payment_method: payment_method %>
-
-<%= javascript_include_tag 'spree/stripe-v3-payments' %>
-
-<script>
-  $(function() {
-    new SolidusStripe.Elements().init();
-  });
-</script>
+<% ActiveSupport::Deprecation.warn 'Partial `spree/checkout/payment/v3/_stripe.html.erb` is deprecated and will be removed soon. Please use partial `spree/checkout/payment/v3/elements`', caller(1) %>
+<%= render 'spree/checkout/payment/v3/elements', payment_method: payment_method, stripe_v3_api: 'elements' %>

data/lib/views/frontend/spree/orders/_stripe_payment_request_button.html.erb

@@ -1,5 +1,5 @@
 <% if current_order.present? && cart_checkout_payment_method.present? %>
-  <div id="stripe-payment-request" class="stripe-payment-request" style="display:none">
+  <div id="stripe-payment-request" class="stripe-payment-request" data-v3-api="payment-request-button" style="display:none">
     <div id="payment-request-button"
       data-stripe-config="<%= cart_checkout_payment_method.stripe_config(current_order).to_json %>"
       data-order-token="<%= current_order.guest_token %>"
@@ -11,13 +11,4 @@
     <div id="card-errors" class='errorExplanation' role="alert" style="display: none">
     </div>
   </div>
-
-  <script src="https://js.stripe.com/v3/"></script>
-
-  <%= javascript_include_tag 'spree/stripe-v3-payments' %>
-  <script>
-    $(function() {
-      new SolidusStripe.CartPageCheckout().init()
-    });
-  </script>
 <% end %>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: solidus_stripe
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 3.0.0
 platform: ruby
 authors:
 - Solidus Team
@@ -91,12 +91,13 @@ files:
 - LICENSE.md
 - README.md
 - Rakefile
-- app/assets/javascripts/spree/stripe-payments/stripe-cart-page-checkout.js
-- app/assets/javascripts/spree/stripe-payments/stripe-elements.js
-- app/assets/javascripts/spree/stripe-payments/stripe-payment-intents.js
-- app/assets/javascripts/spree/stripe-payments/stripe-payment-request-button-shared.js
-- app/assets/javascripts/spree/stripe-payments/stripe-payment.js
-- app/assets/javascripts/spree/stripe-v3-payments.js
+- app/assets/javascripts/spree/frontend/solidus_stripe.js
+- app/assets/javascripts/spree/frontend/solidus_stripe/stripe-cart-page-checkout.js
+- app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js
+- app/assets/javascripts/spree/frontend/solidus_stripe/stripe-init.js
+- app/assets/javascripts/spree/frontend/solidus_stripe/stripe-payment-intents.js
+- app/assets/javascripts/spree/frontend/solidus_stripe/stripe-payment-request-button-shared.js
+- app/assets/javascripts/spree/frontend/solidus_stripe/stripe-payment.js
 - app/controllers/solidus_stripe/intents_controller.rb
 - app/controllers/solidus_stripe/payment_request_controller.rb
 - app/controllers/spree/stripe_controller.rb
@@ -123,6 +124,7 @@ files:
 - lib/views/frontend/spree/checkout/existing_payment/_stripe.html.erb
 - lib/views/frontend/spree/checkout/payment/_stripe.html.erb
 - lib/views/frontend/spree/checkout/payment/v2/_javascript.html.erb
+- lib/views/frontend/spree/checkout/payment/v3/_elements.html.erb
 - lib/views/frontend/spree/checkout/payment/v3/_form_elements.html.erb
 - lib/views/frontend/spree/checkout/payment/v3/_intents.html.erb
 - lib/views/frontend/spree/checkout/payment/v3/_stripe.html.erb

data/app/assets/javascripts/spree/stripe-v3-payments.js

@@ -1,5 +0,0 @@
-//= require ./stripe-payments/stripe-payment
-//= require ./stripe-payments/stripe-elements
-//= require ./stripe-payments/stripe-payment-intents
-//= require ./stripe-payments/stripe-cart-page-checkout
-//= require ./stripe-payments/stripe-payment-request-button-shared