solidus_stripe 2.0.0 → 3.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20cb6dc5a1a623991ffb0903a8135ef20993fa54858bf1f58c19eaf5fefdea35
-  data.tar.gz: 823bc46c1d66e7f6a85a7c7b50bee7ffa978e3e0daaf4454a2b2d89130595f59
+  metadata.gz: 7a9c4fef33f8a78362d726cdd997b494a5127c0dd5ae3a7298fda3e5e7a8efb1
+  data.tar.gz: a7ef47465e84012d7c9e1f873381ce3f761bb65810d997ac2eae4ef04f5d1428
 SHA512:
-  metadata.gz: e6820bf570104f254774f6504ebb7ce0a1d3ed8a9f35d0a09f2c38e9d00a41006f94d89ed774ecf8f9ddcb58d7947cfa12433bc03d11c6df603280094c744a4b
-  data.tar.gz: e4ad550366c57a70990576c1c17257bea819b2a89154cdb6e4fa0cad1d1254d84ea716a72d18232b3102070b02b323f656c08437ad6df1d94c3358361961ff56
+  metadata.gz: 72f01baad84dfb2e9ebe654e0fbb4f5fa8d8f00b8debf04caab1deb94b48a1dc6c2dcde4508b5c195c4f6a30b24abe6292f5f500c922d562a2a19eeb83aa1fef
+  data.tar.gz: 2bc6f12bd539f13b17a7c754b9259aa0fd3110b2db2abd938a1558b733c15bd133efd80be78964964b83f600d6eeb434214c4387a8862d70689b887d99d1e442

data/CHANGELOG.md

@@ -2,7 +2,56 @@
 
 ## [Unreleased](https://github.com/solidusio/solidus_stripe/tree/HEAD)
 
-[Full Changelog](https://github.com/solidusio/solidus_stripe/compare/v1.2.0...HEAD)
+[Full Changelog](https://github.com/solidusio/solidus_stripe/compare/v3.0.0...HEAD)
+
+**Fixed bugs:**
+
+- Duplicates charges with Payment Intents [\#44](https://github.com/solidusio/solidus_stripe/issues/44)
+- Create a single charge when using Stripe Payment Intents [\#45](https://github.com/solidusio/solidus_stripe/pull/45) ([spaghetticode](https://github.com/spaghetticode))
+
+**Closed issues:**
+
+- Stripe Elements submit button stuck in disabled state. [\#39](https://github.com/solidusio/solidus_stripe/issues/39)
+- Visa credit card type is blank [\#36](https://github.com/solidusio/solidus_stripe/issues/36)
+- Pay with Apple Pay from cart page [\#23](https://github.com/solidusio/solidus_stripe/issues/23)
+
+**Merged pull requests:**
+
+- Custom Stripe Elements field options [\#42](https://github.com/solidusio/solidus_stripe/pull/42) ([stuffmatic](https://github.com/stuffmatic))
+- Improve the way Stripe Elements validation errors are displayed [\#40](https://github.com/solidusio/solidus_stripe/pull/40) ([stuffmatic](https://github.com/stuffmatic))
+- Fix stripe-to-solidus card type mapping [\#38](https://github.com/solidusio/solidus_stripe/pull/38) ([stuffmatic](https://github.com/stuffmatic))
+- Add hook to provide custom Stripe Elements options [\#37](https://github.com/solidusio/solidus_stripe/pull/37) ([stuffmatic](https://github.com/stuffmatic))
+- Change order description that we pass to Stripe [\#35](https://github.com/solidusio/solidus_stripe/pull/35) ([kennyadsl](https://github.com/kennyadsl))
+
+## [v3.0.0](https://github.com/solidusio/solidus_stripe/tree/v3.0.0) (2020-03-11)
+
+[Full Changelog](https://github.com/solidusio/solidus_stripe/compare/v2.1.0...v3.0.0)
+
+**Implemented enhancements:**
+
+- Rename v3/stripe partial as v3/elements [\#30](https://github.com/solidusio/solidus_stripe/pull/30) ([spaghetticode](https://github.com/spaghetticode))
+
+**Merged pull requests:**
+
+- Allow to customize Stripe Elements styles via JS [\#34](https://github.com/solidusio/solidus_stripe/pull/34) ([spaghetticode](https://github.com/spaghetticode))
+- Stop injecting css in host app while installing [\#33](https://github.com/solidusio/solidus_stripe/pull/33) ([kennyadsl](https://github.com/kennyadsl))
+- Manage Stripe V3 JS code via Sprokets [\#32](https://github.com/solidusio/solidus_stripe/pull/32) ([spaghetticode](https://github.com/spaghetticode))
+
+## [v2.1.0](https://github.com/solidusio/solidus_stripe/tree/v2.1.0) (2020-03-11)
+
+[Full Changelog](https://github.com/solidusio/solidus_stripe/compare/v2.0.0...v2.1.0)
+
+**Closed issues:**
+
+- Preference :stripe\_country is not defined on Spree::PaymentMethod::StripeCreditCard \(RuntimeError\) [\#27](https://github.com/solidusio/solidus_stripe/issues/27)
+
+**Merged pull requests:**
+
+- Refactor Stripe V3 Intents, Elements and cart checkout JS code [\#31](https://github.com/solidusio/solidus_stripe/pull/31) ([spaghetticode](https://github.com/spaghetticode))
+
+## [v2.0.0](https://github.com/solidusio/solidus_stripe/tree/v2.0.0) (2020-03-03)
+
+[Full Changelog](https://github.com/solidusio/solidus_stripe/compare/v1.2.0...v2.0.0)
 
 **Implemented enhancements:**
 

data/README.md

@@ -13,7 +13,7 @@ Installation
 In your Gemfile:
 
 ```ruby
-gem 'solidus_stripe', '~> 1.0.0'
+gem 'solidus_stripe', '~> 3.0'
 ```
 
 Then run from the command line:
@@ -73,10 +73,20 @@ Using Stripe Payment Intents API
 --------------------------------
 
 If you want to use the new SCA-ready Stripe Payment Intents API you need
-to change the `v3_intents` preference from the code above to true and,
-if you want to allow also Apple Pay and Google Pay payments, set the
-`stripe_country` preference, which represents the two-letter country
-code of your Stripe account:
+to change the `v3_intents` preference from the code above to true.
+
+Also, if you want to allow Apple Pay and Google Pay payments using the
+Stripe  payment request button API, you only need to set the `stripe_country`
+preference, which represents the two-letter country code of your Stripe
+account. Conversely, if you need to disable the button you can simply remove
+the `stripe_country` preference.
+
+Please refer to Stripe official
+[documentation](https://stripe.com/docs/stripe-js/elements/payment-request-button)
+for further instructions on how to make this work properly.
+
+The following configuration will use both Payment Intents and the
+payment request button API on the store payment page:
 
 
 ```ruby
@@ -120,8 +130,122 @@ payment method configured for Stripe via the local variable
 <%= render 'stripe_payment_request_button', cart_checkout_payment_method: Spree::PaymentMethod::StripeCreditCard.first %>
 ```
 
-Of course, rules stated in the paragraph above (remember to add the stripe country
-config value, for example) apply also for this payment method.
+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.');
+  }
+}
+```
+
+Customizing Stripe Elements
+-----------------------
+
+### Styling input fields
+
+The default style this gem provides for Stripe Elements input fields is defined in `SolidusStripe.Elements.prototype.baseStyle`. You can override this method to return your own custom style (make sure it returns 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;
+  }
+```
+
+### Customizing individual input fields
+
+If you want to customize individual input fields, you can override these methods 
+
+* `SolidusStripe.Elements.prototype.cardNumberElementOptions`
+* `SolidusStripe.Elements.prototype.cardExpiryElementOptions`
+* `SolidusStripe.Elements.prototype.cardCvcElementOptions`
+
+and return a valid [options object](https://stripe.com/docs/js/elements_object/create_element?type=cardNumber) for the corresponding field type. For example, this code sets a custom placeholder and enables the credit card icon for the card number field 
+
+```js
+SolidusStripe.Elements.prototype.cardNumberElementOptions = function () {
+  return {
+    style: this.baseStyle(),
+    showIcon: true,
+    placeholder: "I'm a custom placeholder!"
+  }
+}
+```
+
+### Passing options to the Stripe Elements instance
+
+By overriding the `SolidusStripe.Payment.prototype.elementsBaseOptions` method and returning a [valid options object](https://stripe.com/docs/js/elements_object/create), you can pass custom options to the Stripe Elements instance. 
+
+Note that in order to use web fonts with Stripe Elements, you must specify the fonts when creating the Stripe Elements instance. Here's an example specifying a custom web font and locale:
+
+```js
+SolidusStripe.Payment.prototype.elementsBaseOptions = function () {
+  return {
+    locale: 'de',
+    fonts: [
+      {
+        cssSrc: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600'
+      }
+    ]
+  };
+};
+```
 
 
 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/frontend/solidus_stripe/stripe-cart-page-checkout.js

@@ -0,0 +1,88 @@
+SolidusStripe.CartPageCheckout = function() {
+  SolidusStripe.Payment.call(this);
+
+  this.errorElement = $('#card-errors');
+};
+
+SolidusStripe.CartPageCheckout.prototype = Object.create(SolidusStripe.Payment.prototype);
+Object.defineProperty(SolidusStripe.CartPageCheckout.prototype, 'constructor', {
+  value: SolidusStripe.CartPageCheckout,
+  enumerable: false,
+  writable: true
+});
+
+SolidusStripe.CartPageCheckout.prototype.init = function() {
+  this.setUpPaymentRequest({requestShipping: true});
+};
+
+SolidusStripe.CartPageCheckout.prototype.showError = function(error) {
+  this.errorElement.text(error).show();
+};
+
+SolidusStripe.CartPageCheckout.prototype.submitPayment = function(payment) {
+  var showError = this.showError.bind(this);
+
+  $.ajax({
+    url: $('[data-submit-url]').data('submit-url'),
+    headers: {
+      'X-Spree-Order-Token': $('[data-order-token]').data('order-token')
+    },
+    type: 'PATCH',
+    contentType: 'application/json',
+    data: JSON.stringify(this.prTokenHandler(payment.paymentMethod)),
+    success: function() {
+      window.location = $('[data-complete-url]').data('complete-url');
+    },
+    error: function(xhr,status,error) {
+      showError(xhr.responseJSON.error);
+    }
+  });
+};
+
+SolidusStripe.CartPageCheckout.prototype.onPrPayment = function(result) {
+  var handleServerResponse = this.handleServerResponse.bind(this);
+
+  fetch('/stripe/update_order', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      shipping_address: result.shippingAddress,
+      shipping_option: result.shippingOption,
+      email: result.payerEmail,
+      name: result.payerName,
+      authenticity_token: this.authToken
+    })
+  }).then(function(response) {
+    response.json().then(function(json) {
+      handleServerResponse(json, result);
+    })
+  });
+};
+
+SolidusStripe.CartPageCheckout.prototype.onPrButtonMounted = function(buttonId, success) {
+  var container = document.getElementById(buttonId).parentElement;
+
+  if (success) {
+    container.style.display = '';
+  } else {
+    container.style.display = 'none';
+  }
+};
+
+SolidusStripe.CartPageCheckout.prototype.prTokenHandler = function(token) {
+  return {
+    order: {
+      payments_attributes: [
+        {
+          payment_method_id: this.config.id,
+          source_attributes: {
+            gateway_payment_profile_id: token.id,
+            last_digits: token.card.last4,
+            month: token.card.exp_month,
+            year: token.card.exp_year
+          }
+        }
+      ]
+    }
+  }
+};

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

@@ -0,0 +1,148 @@
+SolidusStripe.Elements = function() {
+  SolidusStripe.Payment.call(this);
+
+  this.form = this.element.parents('form');
+  this.errorElement = this.form.find('#card-errors');
+  this.submitButton = this.form.find('input[type="submit"]');
+};
+
+SolidusStripe.Elements.prototype = Object.create(SolidusStripe.Payment.prototype);
+Object.defineProperty(SolidusStripe.Elements.prototype, 'constructor', {
+  value: SolidusStripe.Elements,
+  enumerable: false,
+  writable: true
+});
+
+SolidusStripe.Elements.prototype.init = function() {
+  this.initElements();
+};
+
+SolidusStripe.Elements.prototype.initElements = function() {
+  var cardExpiry = this.elements.create('cardExpiry', this.cardExpiryElementOptions());
+  cardExpiry.mount('#card_expiry');
+
+  var cardCvc = this.elements.create('cardCvc', this.cardCvcElementOptions());
+  cardCvc.mount('#card_cvc');
+
+  this.cardNumber = this.elements.create('cardNumber', this.cardNumberElementOptions());
+  this.cardNumber.mount('#card_number');
+
+  this.form.bind('submit', this.onFormSubmit.bind(this));
+
+  // Listen for errors from each input field.
+  // Adapted from https://github.com/stripe/elements-examples/blob/master/js/index.js
+  var savedErrors = {};
+  [cardExpiry, cardCvc, this.cardNumber].forEach(function(element, idx) {
+    element.on('change', function(event) {
+      if (event.error) {
+        savedErrors[idx] = event.error.message;
+        this.showError(event.error.message);
+      } else {
+        savedErrors[idx] = null;
+
+        // Loop over the saved errors and find the first one, if any.
+        var nextError = Object.keys(savedErrors)
+          .sort()
+          .reduce(function(maybeFoundError, key) {
+            return maybeFoundError || savedErrors[key];
+          }, null);
+
+        if (nextError) {
+          // Now that they've fixed the current error, show another one.
+          this.showError(nextError);
+        } else {
+          // The user fixed the last error; no more errors.
+          this.errorElement.hide().text('');
+        }
+      }
+    }.bind(this));
+  }.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.cardNumberElementOptions = function () {
+  return {
+    style: this.baseStyle()
+  }
+}
+
+SolidusStripe.Elements.prototype.cardExpiryElementOptions = function () {
+  return {
+    style: this.baseStyle()
+  }
+}
+
+SolidusStripe.Elements.prototype.cardCvcElementOptions = function () {
+  return {
+    style: this.baseStyle()
+  }
+}
+
+SolidusStripe.Elements.prototype.showError = function(error) {
+  var message = error.message || error;
+
+  this.errorElement.text(message).show();
+  this.submitButton.removeAttr('disabled').removeClass('disabled');
+};
+
+SolidusStripe.Elements.prototype.onFormSubmit = function(event) {
+  if (this.element.is(':visible')) {
+    event.preventDefault();
+
+    var onTokenCreate = function(result) {
+      if (result.error) {
+        this.showError(result.error.message);
+      } else {
+        this.elementsTokenHandler(result.token);
+        this.form[0].submit();
+      }
+    };
+
+    this.stripe.createToken(this.cardNumber).then(onTokenCreate.bind(this));
+  }
+};
+
+SolidusStripe.Elements.prototype.elementsTokenHandler = function(token) {
+  var mapCC = function(ccType) {
+    if (ccType === 'MasterCard' || ccType === 'mastercard') {
+      return 'mastercard';
+    } else if (ccType === 'Visa' || ccType === 'visa') {
+      return 'visa';
+    } else if (ccType === 'American Express' || ccType === 'amex') {
+      return 'amex';
+    } else if (ccType === 'Discover' || ccType === 'discover') {
+      return 'discover';
+    } else if (ccType === 'Diners Club' || ccType === 'diners') {
+      return 'dinersclub';
+    } else if (ccType === 'JCB' || ccType === 'jcb') {
+      return 'jcb';
+    } else if (ccType === 'Unionpay' || ccType === 'unionpay') {
+      return 'unionpay';
+    }
+  };
+
+  var baseSelector = `<input type='hidden' class='stripeToken' name='payment_source[${this.config.id}]`;
+
+  this.element.append(`${baseSelector}[gateway_payment_profile_id]' value='${token.id}'/>`);
+  this.element.append(`${baseSelector}[last_digits]' value='${token.card.last4}'/>`);
+  this.element.append(`${baseSelector}[month]' value='${token.card.exp_month}'/>`);
+  this.element.append(`${baseSelector}[year]' value='${token.card.exp_year}'/>`);
+  this.form.find('input#cc_type').val(mapCC(token.card.brand || token.card.type));
+};