archetype_spree_gateway 3.9.5

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

@@ -0,0 +1,86 @@
+<%= render "spree/checkout/payment/gateway", payment_method: payment_method %>
+
+<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
+<script type="text/javascript">
+  Stripe.setPublishableKey("<%= payment_method.preferred_publishable_key %>");
+</script>
+
+<script>
+  var mapCC, stripeResponseHandler;
+
+  mapCC = function(ccType) {
+    if (ccType === 'MasterCard') {
+      return 'mastercard';
+    } else if (ccType === 'Visa') {
+      return 'visa';
+    } else if (ccType === 'American Express') {
+      return 'amex';
+    } else if (ccType === 'Discover') {
+      return 'discover';
+    } else if (ccType === 'Diners Club') {
+      return 'dinersclub';
+    } else if (ccType === 'JCB') {
+      return 'jcb';
+    }
+  };
+
+  stripeResponseHandler = function(status, response) {
+    var paymentMethodId, token;
+    if (response.error) {
+      $('#stripeError').html(response.error.message);
+      var param_map = {
+        number:    '#card_number',
+        exp_month: '#card_expiry',
+        exp_year:  '#card_expiry',
+        cvc:       '#card_code'
+      }
+      if (response.error.param) {
+        errorField = Spree.stripePaymentMethod.find(param_map[response.error.param])
+        errorField.addClass('error');
+        errorField.parent().addClass('has-error');
+      }
+
+      return $('#stripeError').show();
+    } else {
+      Spree.stripePaymentMethod.find('#card_number, #card_expiry, #card_code').prop("disabled", true);
+      Spree.stripePaymentMethod.find(".ccType").prop("disabled", false);
+      Spree.stripePaymentMethod.find(".ccType").val(mapCC(response.card.brand));
+      token = response['id'];
+      paymentMethodId = Spree.stripePaymentMethod.prop('id').split("_")[2];
+      Spree.stripePaymentMethod.append("<input type='hidden' class='stripeToken' name='payment_source[" + paymentMethodId + "][gateway_payment_profile_id]' value='" + token + "'/>");
+      Spree.stripePaymentMethod.append("<input type='hidden' class='stripeToken' name='payment_source[" + paymentMethodId + "][last_digits]' value='" + response.card.last4 + "'/>");
+      Spree.stripePaymentMethod.append("<input type='hidden' class='stripeToken' name='payment_source[" + paymentMethodId + "][month]' value='" + response.card.exp_month + "'/>");
+      Spree.stripePaymentMethod.append("<input type='hidden' class='stripeToken' name='payment_source[" + paymentMethodId + "][year]' value='" + response.card.exp_year + "'/>");
+      return Spree.stripePaymentMethod.parents("form").trigger('submit');
+    }
+  };
+
+  window.addEventListener('DOMContentLoaded', function () {
+    Spree.stripePaymentMethod = $('#payment_method_' + <%= payment_method.id %>);
+    Spree.stripePaymentMethod.prepend("<div id='stripeError' class='errorExplanation alert alert-danger' style='display:none'></div>");
+
+    $('#checkout_form_payment [data-hook=buttons]').click(function (e) {
+
+      var expiration, params;
+      $('#stripeError').hide();
+      Spree.stripePaymentMethod.find('#card_number, #card_expiry, #card_code').removeClass('error');
+      if (Spree.stripePaymentMethod.is(':visible')) {
+        e.preventDefault();
+
+        expiration = $('.cardExpiry:visible').payment('cardExpiryVal');
+        params = $.extend({
+          number: $('.cardNumber:visible').val(),
+          cvc: $('.cardCode:visible').val(),
+          exp_month: expiration.month || 0,
+          exp_year: expiration.year || 0
+        }, Spree.stripeAdditionalInfo);
+
+        Stripe.card.createToken(params, stripeResponseHandler);
+
+        return false;
+      }
+    });
+  });
+</script>
+
+<%= render 'spree/checkout/payment/stripe_additional_info', bill_address: @order.bill_address %>

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

@@ -0,0 +1,81 @@
+<div class="payment-gateway">
+  <% param_prefix = "payment_source[#{payment_method.id}]" %>
+  <div class="payment-gateway-half-fields">
+    <div class="mb-4 payment-gateway-field checkout-content-inner-field">
+      <%= text_field_tag "#{param_prefix}[account_holder_name]", "#{@order.bill_address_firstname} #{@order.bill_address_lastname}", { id: "account_holder_name", class: 'spree-flat-input', placeholder: Spree.t('stripe.ach.account_holder_name')} %>
+    </div>
+    <div class="mb-4 payment-gateway-field checkout-content-inner-field">
+      <%= select_tag "#{param_prefix}[account_holder_type]", options_for_select(%w(Individual Company)), {id: "account_holder_type", class: 'spree-flat-input', placeholder: Spree.t('stripe.ach.account_holder_type')} %>
+    </div>
+
+    <div class="mb-4 payment-gateway-field checkout-content-inner-field" data-hook="account_number">
+      <%= text_field_tag "#{param_prefix}[routing_number]", '', {id: 'routing_number', class: 'spree-flat-input', autocomplete: "off", placeholder: Spree.t('stripe.ach.routing_number'), maxlength: 9} %>
+    </div>
+    <div class="mb-4 payment-gateway-field checkout-content-inner-field" data-hook="account_number">
+      <%= text_field_tag "#{param_prefix}[account_number]", '', {id: 'account_number', class: 'spree-flat-input', autocomplete: "off", placeholder: Spree.t('stripe.ach.account_number')} %>
+    </div>
+    <div class="mb-4 payment-gateway-field checkout-content-inner-field" data-hook="account_number">
+      <%= text_field_tag "#{param_prefix}[verify_account_number]", '', {id: 'verify_account_number', class: 'spree-flat-input', autocomplete: "off", placeholder: Spree.t('stripe.ach.verify_account_number')} %>
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
+<script type="text/javascript">
+    var stripe = Stripe("<%= payment_method.preferred_publishable_key %>");
+</script>
+
+<script>
+    stripeResponseHandler = function(response) {
+        var paymentMethodId, token, bank_acc_status;
+        if (response.error) {
+            $('#stripeError').html(response.error.message);
+            var param_map = {
+                account_holder_name: '#account_holder_name',
+                account_holder_type: '#account_holder_type',
+                account_number: '#account_number',
+                routing_number: '#routing_number'
+            }
+            if (response.error.param){
+                errorField = Spree.stripePaymentMethod.find(param_map[response.error.param])
+                errorField.addClass('error');
+                errorField.parent().addClass('has-error');
+            }
+            return $('#stripeError').show();
+        } else {
+            token = response.token['id'];
+            bank_acc_status = response.token.bank_account['status'];
+            paymentMethodId = Spree.stripePaymentMethod.prop('id').split("_")[2];
+            Spree.stripePaymentMethod.append("<input type='hidden' class='stripeToken' name='payment_source[" + paymentMethodId + "][gateway_payment_profile_id]' value='" + token + "'/>");
+            Spree.stripePaymentMethod.append("<input type='hidden' class='stripeStatus' name='payment_source[" + paymentMethodId + "][status]' value='" + bank_acc_status + "'/>")
+            return Spree.stripePaymentMethod.parents("form").trigger('submit');
+        }
+    };
+
+    window.addEventListener('DOMContentLoaded', function () {
+        Spree.stripePaymentMethod = $('#payment_method_' + <%= payment_method.id %>);
+        Spree.stripePaymentMethod.prepend("<div id='stripeError' class='errorExplanation alert alert-danger' style='display:none'></div>");
+
+        $('#checkout_form_payment [data-hook=buttons]').click(function (e) {
+            var params;
+            $('#stripeError').hide();
+            Spree.stripePaymentMethod.find('#account_holder_name, #account_holder_type, #account_number, #routing_number').removeClass('error');
+            if (Spree.stripePaymentMethod.is(':visible')) {
+                e.preventDefault();
+
+                params = $.extend({
+                    country: 'US',
+                    currency: 'usd',
+                    account_holder_name: $('#account_holder_name:visible').val(),
+                    account_holder_type: $('#account_holder_type:visible').val(),
+                    routing_number: $('#routing_number:visible').val(),
+                    account_number: $('#account_number:visible').val()
+                }, Spree.stripeAdditionalInfo);
+
+                stripe.createToken('bank_account', params).then(stripeResponseHandler);
+
+                return false;
+            }
+        });
+    });
+</script>

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

@@ -0,0 +1,16 @@
+<p class="payment-type checkout-content-header">
+  <%= Spree.t('stripe.ach.verify_bank_account').upcase %>
+</p>
+
+<div class="payment-gateway">
+  <div class="payment-gateway-half-fields">
+    <input type="hidden" name="order[payment_id]" value= <%= payment.id %> />
+    <input type='hidden' name='verifyAch' value=true />
+    <div class="mb-4 payment-gateway-field checkout-content-inner-field">
+      <%= number_field_tag "amounts[]", nil, { id: "deposit1", class: 'spree-flat-input', placeholder: Spree.t('stripe.ach.first_deposit') } %>
+    </div>
+    <div class="mb-4 payment-gateway-field checkout-content-inner-field">
+      <%= number_field_tag "amounts[]", nil, { id: "deposit2", class: 'spree-flat-input', placeholder: Spree.t('stripe.ach.second_deposit') } %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+<% bill_address ||= @order.bill_address %>
+<%- if @order.has_checkout_step?('address') -%>
+  <script>
+    window.addEventListener('DOMContentLoaded', function() {
+      Spree.stripeAdditionalInfo = {
+        name: "<%= bill_address.full_name %>",
+        address_line1: "<%= bill_address.address1 %>",
+        address_line2: "<%= bill_address.address2 %>",
+        address_city: "<%= bill_address.city %>",
+        address_state: "<%= bill_address.state_text %>",
+        address_zip: "<%= bill_address.zipcode %>",
+        address_country: "<%= bill_address.country %>"
+      };
+    });
+  </script>
+<%- end -%>

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

@@ -0,0 +1,109 @@
+<% param_prefix = "payment_source[#{payment_method.id}]" %>
+
+<div id="payment-request-button">
+  <!-- A Stripe Element will be inserted here. -->
+</div>
+
+<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
+
+<script>
+  var stripeApplePay = Stripe("<%= payment_method.preferred_publishable_key %>");
+  var elements = stripeApplePay.elements();
+  var paymentRequest = stripeApplePay.paymentRequest({
+    country: '<%= payment_method.preferred_country_code.try(:upcase) %>',
+    currency: '<%= @order.currency.downcase %>',
+    displayItems: [
+      <% @order.line_items.each do |line_item| %>
+      {
+        label: '<%= line_item.name %> x <%= line_item.quantity %>',
+        amount: <%= Spree::Money.new(line_item.total, currency: line_item.currency).amount_in_cents %>
+      },
+      <% end %>
+      <% if @order.tax_total != 0 %>
+      {
+        label: '<%= Spree.t(:tax) %>',
+        amount: <%= Spree::Money.new(@order.tax_total, currency: @order.currency).amount_in_cents %>
+      },
+      <% end %>
+      <% if @order.shipment_total != 0 %>
+      {
+        label: '<%= Spree.t(:shipment) %>',
+        amount: <%= Spree::Money.new(@order.shipment_total, currency: @order.currency).amount_in_cents %>
+      }
+      <% end %>
+    ],
+    total: {
+      label: '<%= Spree.t(:total) %>',
+      amount: <%= Spree::Money.new(@order.total, currency: @order.currency).amount_in_cents %>
+    },
+    requestPayerName: false,
+    requestPayerEmail: false,
+    requestPayerPhone: false
+  });
+
+  var prButton = elements.create('paymentRequestButton', {
+    paymentRequest: paymentRequest,
+  });
+
+  // Check the availability of the Payment Request API first.
+  paymentRequest.canMakePayment().then(function(result) {
+    if (result) {
+      prButton.mount('#payment-request-button');
+    } else {
+      document.getElementById('payment-request-button').style.display = 'none';
+    }
+  });
+
+  function addCreditCardFieldToForm(form, name, value) {
+    var hiddenInput = document.createElement('input');
+
+    hiddenInput.setAttribute('type', 'hidden');
+    hiddenInput.setAttribute('name', name);
+    hiddenInput.setAttribute('value', value);
+    form.appendChild(hiddenInput);
+  };
+
+  function hideApplePayRadioButtonForNonAppleDevices() {
+    var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
+    var isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+
+    if (!isSafari && !isiOS) {
+      $('input[name$="order[payments_attributes][][payment_method_id]"][value="<%= payment_method.id %>"]').closest('li').hide()
+    }
+  }
+
+  paymentRequest.on('token', function(ev) {
+    var form = document.getElementById('checkout_form_payment');
+    var token = ev.token;
+    if (ev.payerName) {
+      var payerName = ev.payerName
+    } else if (Spree.stripeAdditionalInfo) {
+      var payerName = Spree.stripeAdditionalInfo.name
+    }
+    addCreditCardFieldToForm(form, '<%= param_prefix %>[gateway_payment_profile_id]', token.id);
+    addCreditCardFieldToForm(form, '<%= param_prefix %>[number]', token.card.last4);
+    addCreditCardFieldToForm(form, '<%= param_prefix %>[month]', token.card.exp_month);
+    addCreditCardFieldToForm(form, '<%= param_prefix %>[year]', token.card.exp_year);
+    addCreditCardFieldToForm(form, '<%= param_prefix %>[name]', payerName);
+    ev.complete('success');
+    form.submit();
+  });
+
+  window.addEventListener('DOMContentLoaded', function() {
+    Spree.stripeApplePayPaymentMethod = $('#payment_method_' + <%= payment_method.id %>);
+    hideApplePayRadioButtonForNonAppleDevices();
+
+    prButton.on('ready', function () {
+      Spree.stripeApplePayPaymentMethod.prepend("<div id='stripeApplePayError' class='errorExplanation alert alert-danger' style='display:none'></div>");
+      var form = document.getElementById('checkout_form_payment');
+      form.addEventListener('submit', function(e) {
+        if (Spree.stripeApplePayPaymentMethod.is(':visible')) {
+          $('#stripeApplePayError').hide();
+          e.preventDefault();
+        }
+      });
+    });
+  });
+</script>
+
+<%= render 'spree/checkout/payment/stripe_additional_info' %>

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

@@ -0,0 +1,110 @@
+<% param_prefix = "payment_source[#{payment_method.id}]" %>
+<div class="well clearfix">
+  <p class="field">
+    <%= text_field_tag "#{param_prefix}[name]", "#{@order.bill_address_firstname} #{@order.bill_address_lastname}", { id: "name_on_card_#{payment_method.id}", class: 'spree-flat-input', placeholder: Spree.t(:name_on_card)} %>
+  </p>
+  <div class="form-control required cardNumber spree-flat-input">
+    <div id="card-element">
+      <!-- a Stripe Element will be inserted here. -->
+    </div>
+  </div>
+  <!-- Used to display form errors -->
+  <div id="card-errors" role="alert"></div>
+</div>
+
+<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
+
+<script>
+  var stripeElements = Stripe("<%= payment_method.preferred_publishable_key %>");
+  var elements = stripeElements.elements();
+  var spreeFlatInputStyle = getComputedStyle(document.querySelector('input.spree-flat-input'));
+
+  var card = elements.create('card', {
+    iconStyle: 'solid',
+    hidePostalCode: true,
+    style: {
+      base: {
+        color: spreeFlatInputStyle['color'],
+        iconColor: spreeFlatInputStyle['color'],
+        lineHeight: spreeFlatInputStyle['line-height'],
+        fontWeight: spreeFlatInputStyle['font-weight'],
+        fontFamily: spreeFlatInputStyle['font-family'],
+        fontSize: spreeFlatInputStyle['font-size'],
+
+        '::placeholder': {
+          color: '#757575',
+          fontWeight: 300,
+          textTransform: 'uppercase'
+        },
+      },
+      invalid: {
+        iconColor: '#e85746',
+        color: '#e85746',
+      }
+    },
+    classes: {
+      focus: 'is-focused',
+      empty: 'is-empty',
+    },
+  });
+
+  window.addEventListener('DOMContentLoaded', function () {
+    card.mount('#card-element');
+
+    card.on('ready', function () {
+      Spree.stripeElementsPaymentMethod = $('#payment_method_' + <%= payment_method.id %>);
+      Spree.stripeElementsPaymentMethod.prepend("<div id='stripeElementsError' class='errorExplanation alert alert-danger' style='display:none'></div>");
+      var form = document.getElementById('checkout_form_payment');
+
+      form.addEventListener('submit', function(e) {
+        if (Spree.stripeElementsPaymentMethod.is(':visible')) {
+          $('#stripeElementsError').hide();
+          e.preventDefault();
+          createStripeElementsToken();
+        }
+      });
+      card.addEventListener('change', function(event) {
+        if (!event.error) {
+          $(form).find('input[type="submit"]').prop('disabled', false)
+        }
+      });
+    });
+  });
+
+  function addCreditCardFieldToForm(form, name, value) {
+    var hiddenInput = document.createElement('input');
+
+    hiddenInput.setAttribute('type', 'hidden');
+    hiddenInput.setAttribute('name', name);
+    hiddenInput.setAttribute('value', value);
+    form.appendChild(hiddenInput);
+  };
+
+  function stripeElementsTokenHandler(token) {
+    var form = document.getElementById('checkout_form_payment');
+    addCreditCardFieldToForm(form, '<%= param_prefix %>[gateway_payment_profile_id]', token.id)
+    addCreditCardFieldToForm(form, '<%= param_prefix %>[number]', token.card.last4)
+    addCreditCardFieldToForm(form, '<%= param_prefix %>[month]', token.card.exp_month)
+    addCreditCardFieldToForm(form, '<%= param_prefix %>[year]', token.card.exp_year)
+    form.submit();
+  };
+
+  function createStripeElementsToken() {
+    stripeElements.createToken(card, Spree.stripeAdditionalInfo).then(function (result) {
+      if (result.error) {
+        // Inform the user if there was an error
+        var errorElement = document.getElementById('card-errors');
+
+        $('#stripeElementsError').html(result.error.message);
+        $('#stripeElementsError').show()
+        Spree.enableSave();
+      } else {
+        stripeElementsTokenHandler(result.token);
+      }
+    });
+  };
+
+</script>
+
+<%= render 'spree/checkout/payment/stripe_additional_info' %>
+

data/script/rails

@@ -0,0 +1,7 @@
+#!/usr/bin/env ruby
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/spree_gateway/engine', __FILE__)
+
+require 'rails/all'
+require 'rails/engine/commands'

data/spec/factories/check_factory.rb

@@ -0,0 +1,10 @@
+FactoryBot.define do
+  factory :check, class: Spree::Check do
+    account_holder_name { 'John Doe' }
+    account_holder_type { 'Individual' }
+    account_type { 'checking' }
+    routing_number { '110000000' }
+    account_number { '000123456789' }
+    association(:payment_method, factory: :credit_card_payment_method)
+  end
+end

data/spec/features/admin/stripe_elements_payment_spec.rb

@@ -0,0 +1,100 @@
+require 'spec_helper'
+
+describe 'Admin Panel Stripe elements payment', type: :feature do
+  stub_authorization!
+
+  let!(:country) { create(:country, states_required: true) }
+  let!(:state) { create(:state, country: country) }
+  let!(:shipping_method) { create(:shipping_method) }
+  let!(:stock_location) { create(:stock_location) }
+  let!(:mug) { create(:product, name: 'RoR Mug') }
+  let!(:zone) { create(:zone) }
+  let!(:stripe_elements_payment_method) do
+    Spree::Gateway::StripeElementsGateway.create!(
+        name: 'Stripe Element',
+        preferred_secret_key: 'sk_test_VCZnDv3GLU15TRvn8i2EsaAN',
+        preferred_publishable_key: 'pk_test_Cuf0PNtiAkkMpTVC2gwYDMIg',
+        stores: [::Spree::Store.default]
+    )
+  end
+
+  let!(:order) { OrderWalkthrough.up_to(:payment) }
+  before { visit spree.new_admin_order_payment_path(order.number) }
+
+  it 'can process a valid payment' do
+    fill_in_stripe_payment
+    wait_for { !page.has_current_path?(spree.admin_order_payments_path(order.number)) }
+
+    expect(page.body).to have_content('Payment has been successfully created!')
+    expect(page).to have_current_path spree.admin_order_payments_path(order.number)
+  end
+
+  it 'shows an error with an invalid card name' do
+    fill_in_stripe_payment(true)
+
+    expect(page).to have_content("Credit card Name can't be blank")
+    expect(page).to have_current_path spree.admin_order_payments_path(order.number)
+  end
+
+  it 'shows an error with an invalid card number' do
+    fill_in_stripe_payment(false, true)
+
+    expect(page).to have_content('The card number is not a valid credit card number.')
+    expect(page).to have_current_path spree.new_admin_order_payment_path(order.number)
+  end
+
+  it 'shows an error with an invalid card code' do
+    fill_in_stripe_payment(false, false, true)
+
+    expect(page).to have_content("Your card's security code is invalid.")
+    expect(page).to have_current_path spree.new_admin_order_payment_path(order.number)
+  end
+
+  it 'shows an error with an invalid card expiration' do
+    fill_in_stripe_payment(false, false, false, true)
+
+    if Spree.version.to_f >= 4.1 || Spree.version.to_f >= 3.7
+      expect(page).to have_content('Credit card Month is not a number')
+      expect(page).to have_content('Credit card Year is not a number')
+      expect(page).to have_current_path spree.admin_order_payments_path(order.number)
+    else
+      expect(page).to have_content("Your card's expiration year is invalid.")
+      expect(page).to have_current_path spree.new_admin_order_payment_path(order.number)
+    end
+  end
+
+  def fill_in_stripe_payment(invalid_name = false, invalid_number = false, invalid_code = false, invalid_expiration = false)
+    fill_in 'Name *', with: invalid_name ? '' : 'Stripe Elements Gateway Payment'
+    fill_in_card_number(invalid_number)
+    fill_in_cvc(invalid_code)
+    fill_in_card_expiration(invalid_expiration)
+
+    click_button 'Update'
+  end
+
+  def fill_in_card_number(invalid_number)
+    number = invalid_number ? '123' : '4242 4242 4242 4242'
+    fill_in_field('Card Number *', "#card_number#{stripe_elements_payment_method.id}", number)
+  end
+
+  def fill_in_card_expiration(invalid_expiration)
+    valid_expiry = Spree.version.to_f >= 4.2 ? "01/#{Time.current.year + 1}" : "01 / #{Time.current.year + 1}"
+    invalid_expiry = Spree.version.to_f >= 4.2 ? '01/' : '01 / '
+
+    card_expiry = invalid_expiration ? invalid_expiry : valid_expiry
+    fill_in_field('Expiration *', "#card_expiry#{stripe_elements_payment_method.id}", card_expiry)
+  end
+
+  def fill_in_cvc(invalid_code)
+    value = invalid_code ? '1' : '123'
+    label = Spree.version.to_f >= 4.2 ? 'Card Varification Code (CVC) *' : 'Card Code *'
+
+    fill_in label, with: value
+  end
+
+  def fill_in_field(field_name, field_id, number)
+    until page.find(field_id).value == number
+      fill_in field_name, with: number
+    end
+  end
+end

data/spec/features/stripe_checkout_spec.rb

@@ -0,0 +1,130 @@
+require 'spec_helper'
+
+describe "Stripe checkout", type: :feature, js: true do
+  let!(:country) { create(:country, :states_required => true) }
+  let!(:state) { create(:state, :country => country) }
+  let!(:shipping_method) { create(:shipping_method) }
+  let!(:stock_location) { create(:stock_location) }
+  let!(:mug) { create(:product, :name => "RoR Mug") }
+  let!(:stripe_payment_method) do
+    Spree::Gateway::StripeGateway.create!(
+      name: 'Stripe',
+      preferred_secret_key: 'sk_test_VCZnDv3GLU15TRvn8i2EsaAN',
+      preferred_publishable_key: 'pk_test_Cuf0PNtiAkkMpTVC2gwYDMIg',
+      stores: [::Spree::Store.default]
+    )
+  end
+
+  let!(:zone) { create(:zone) }
+
+  before do
+    if Spree.version.to_f >= 4.2
+      payment_method = Spree::PaymentMethod.first
+      payment_method.update!(stores: [Spree::Store.first])
+    end
+
+    user = create(:user)
+
+    order = OrderWalkthrough.up_to(:delivery)
+    order.stub :confirmation_required? => true
+
+    order.reload
+    order.user = user
+    order.update_with_updater!
+
+    Spree::CheckoutController.any_instance.stub(:current_order => order)
+    Spree::CheckoutController.any_instance.stub(:try_spree_current_user => user)
+    Spree::CheckoutController.any_instance.stub(:skip_state_validation? => true)
+    Spree::OrdersController.any_instance.stub(try_spree_current_user: user)
+
+    # Capybara should wait up to 10 seconds for async. changes to be applied
+    Capybara.default_max_wait_time = 10
+
+    visit spree.checkout_state_path(:payment)
+    begin
+      setup_stripe_watcher
+    rescue Capybara::NotSupportedByDriverError
+    end
+  end
+
+  # This will pass the CC data to the server and the StripeGateway class handles it
+  it "can process a valid payment (without JS)", js: false do
+    fill_in 'card_number', with: '4242 4242 4242 4242'
+    fill_in 'card_code', with: '123'
+    fill_in 'card_expiry', with: "01 / #{Time.current.year + 1}"
+    click_button "Save and Continue"
+    expect(page.current_url).to include("/checkout/confirm")
+    click_button "Place Order"
+    order = Spree::Order.complete.last
+    expect(page.current_url).to include("/orders/#{order.number}")
+    expect(page).to have_content(order.number)
+  end
+
+  # This will fetch a token from Stripe.com and then pass that to the webserver.
+  # The server then processes the payment using that token.
+  it "can process a valid payment (with JS)" do
+    fill_in_with_force('card_number', with: "4242424242424242")
+    fill_in_with_force('card_expiry', with: "01 / #{Time.current.year + 1}")
+    fill_in 'card_code', with: '123'
+    click_button "Save and Continue"
+    wait_for_stripe # Wait for Stripe API to return + form to submit
+    expect(page).to have_css('#checkout_form_confirm')
+    expect(page.current_url).to include("/checkout/confirm")
+    click_button "Place Order"
+    order = Spree::Order.complete.last
+    expect(page.current_url).to include("/orders/#{order.number}")
+    expect(page).to have_content(order.number)
+  end
+
+  it "shows an error with an invalid credit card number" do
+    # Card number is NOT valid. Fails Luhn checksum
+    fill_in 'card_number', with: '4242 4242 4242 4249'
+    click_button "Save and Continue"
+    wait_for_stripe
+    if Spree.version.to_f >= 3.7 and Spree.version.to_f <= 4.1
+      expect(page).to have_content("The card number is not a valid credit card number")
+    end
+    if Spree.version.to_f >= 4.2
+      expect(page).to have_content("Your card number is incorrect")
+      expect(page).to have_css('.has-error #card_number.error')
+    end
+  end
+
+  it "shows an error with invalid security fields" do
+    fill_in_with_force('card_number', with: "4242424242424242")
+    fill_in_with_force('card_expiry', with: "01 / #{Time.current.year + 1}")
+    fill_in 'card_code', with: '99'
+    click_button "Save and Continue"
+    wait_for_stripe
+    expect(page).to have_content("Your card's security code is invalid.")
+    expect(page).to have_css('.has-error #card_code.error')
+  end
+
+  # this scenario will not occur on Spree 4.2 due to swapping jquery.payment to cleave
+  # see https://github.com/spree/spree/pull/10363
+  it "shows an error with invalid expiry month field" do
+    skip if Spree.version.to_f >= 4.2
+    fill_in_with_force('card_number', with: "4242424242424242")
+    fill_in_with_force('card_expiry', with: "00 / #{Time.current.year + 1}")
+    fill_in 'card_code', with: '123'
+    click_button "Save and Continue"
+    wait_for_stripe
+    expect(page).to have_content("Your card's expiration month is invalid.")
+    expect(page).to have_css('.has-error #card_expiry.error')
+  end
+
+  it "shows an error with invalid expiry year field" do
+    fill_in_with_force('card_number', with: "4242424242424242")
+    fill_in_with_force('card_expiry', with: "12 / ")
+    fill_in 'card_code', with: '123'
+    click_button "Save and Continue"
+    wait_for_stripe
+    expect(page).to have_content("Your card's expiration year is invalid.")
+    expect(page).to have_css('.has-error #card_expiry.error')
+  end
+end
+
+def fill_in_with_force(locator, with:)
+  field_id = find_field(locator)[:id]
+  page.execute_script("document.getElementById('#{field_id}').value = '#{with}';")
+end