solidus_stripe 1.0.0 → 1.1.0

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

@@ -0,0 +1,5 @@
+<%= render 'spree/checkout/payment/v3/form_elements', payment_method: payment_method %>
+
+<%= javascript_include_tag "solidus_stripe/stripe-init.js" %>
+
+<%= render "spree/checkout/payment/v3/intents_js" %>

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

@@ -0,0 +1,48 @@
+<script>
+  // Stripe Intents JS code
+
+  var cardNumber = initElements();
+  var paymentRequest = setUpPaymentRequest(SolidusStripe.paymentMethod.config.payment_request);
+
+  form.bind('submit', function(event) {
+    if (element.is(':visible')) {
+      event.preventDefault();
+
+      errorElement.text('').hide();
+
+      stripe.createPaymentMethod(
+        'card',
+        cardNumber
+      ).then(function(result) {
+        handlePayment(result);
+      });
+    }
+  });
+
+  function handlePayment(payment) {
+    if (payment.error) {
+      showError(payment.error.message);
+    } else {
+      stripeTokenHandler(payment.paymentMethod);
+      fetch('/stripe/confirm_intents', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          spree_payment_method_id: SolidusStripe.paymentMethod.config.id,
+          stripe_payment_method_id: payment.paymentMethod.id,
+          authenticity_token: authToken
+        })
+      }).then(function(response) {
+        response.json().then(function(json) {
+          handleServerResponse(json, payment);
+        })
+      });
+    }
+  };
+
+  function submitPayment(_payment) {
+    form.unbind('submit').submit();
+  }
+</script>

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

@@ -1,133 +1,5 @@
-<%= image_tag 'credit_cards/credit_card.gif', id: 'credit-card-image' %>
-<% param_prefix = "payment_source[#{payment_method.id}]" %>
+<%= render 'spree/checkout/payment/v3/form_elements', payment_method: payment_method %>
 
-<div class="field field-required">
-  <%= label_tag "name_on_card_#{payment_method.id}", t('spree.name_on_card') %>
-  <%= text_field_tag "#{param_prefix}[name]", "#{@order.billing_firstname} #{@order.billing_lastname}", { id: "name_on_card_#{payment_method.id}", autocomplete: "cc-name" } %>
-</div>
+<%= javascript_include_tag "solidus_stripe/stripe-init.js" %>
 
-<div class="field field-required" data-hook="card_number">
-  <%= label_tag "card_number", t('spree.card_number') %>
-  <div id="card_number"></div>
-  <span id="card_type" style="display:none;">
-    ( <span id="looks_like" ><%= t('spree.card_type_is') %> <span id="type"></span></span>
-      <span id="unrecognized"><%= t('spree.unrecognized_card_type') %></span>
-    )
-  </span>
-</div>
-
-<div class="field field-required" data-hook="card_expiration">
-  <%= label_tag "card_expiry", t('spree.expiration') %>
-  <div id="card_expiry"></div>
-</div>
-
-<div class="field field-required" data-hook="card_code">
-  <%= label_tag "card_cvc", t('spree.card_code') %>
-  <div id="card_cvc"></div>
-  <%= link_to "(#{t('spree.what_is_this')})", spree.cvv_path, target: '_blank', "data-hook" => "cvv_link", id: "cvv_link" %>
-</div>
-
-<div id="card-errors" class='errorExplanation' role="alert" style="display: none"></div>
-
-<% if @order.bill_address %>
-  <%= fields_for "#{param_prefix}[address_attributes]", @order.bill_address do |f| %>
-    <%= render partial: 'spree/address/form_hidden', locals: { form: f } %>
-  <% end %>
-<% end %>
-
-<%= hidden_field_tag "#{param_prefix}[cc_type]", '', id: "cc_type", class: 'ccType' %>
-
-<script src="https://js.stripe.com/v3/"></script>
-
-<script>
-  Spree.stripePaymentMethod = $('#payment_method_' + <%= payment_method.id %>);
-
-  var stripe = Stripe("<%= payment_method.preferred_publishable_key %>");
-
-  var elements = stripe.elements({locale: 'en'});
-
-  var style = {
-    base: {
-      color: 'black',
-      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-      fontSmoothing: 'antialiased',
-      fontSize: '14px',
-      '::placeholder': {
-        color: 'silver'
-      }
-    },
-    invalid: {
-      color: 'red',
-      iconColor: 'red'
-    }
-  };
-
-  var cardNumber = elements.create('cardNumber', {style: style});
-  var cardExpiry = elements.create('cardExpiry', {style: style});
-  var cardCvc = elements.create('cardCvc', {style: style});
-
-  cardNumber.mount('#card_number');
-  cardExpiry.mount('#card_expiry');
-  cardCvc.mount('#card_cvc');
-
-  $(function() {
-    var form = Spree.stripePaymentMethod.parents('form');
-    var submitButton = form.find('input[type="submit"]');
-    var errorElement = form.find('#card-errors');
-    var cardType = form.find('input#cc_type');
-
-    cardNumber.addEventListener('change', function(event) {
-      if (event.error) {
-        errorElement.text(event.error.message).show();
-      } else {
-        errorElement.hide().text('');
-      }
-    });
-
-    form.bind('submit', function(event) {
-      if (Spree.stripePaymentMethod.is(':visible')) {
-        event.preventDefault();
-
-        stripe.createToken(cardNumber).then(function(result) {
-          if (result.error) {
-            errorElement.text(result.error.message).show();
-            setTimeout(function() {
-              $.rails.enableElement(submitButton[0]);
-              submitButton.removeAttr('disabled').removeClass('disabled');
-            }, 100);
-          } else {
-            stripeTokenHandler(result.token);
-          }
-        });
-      }
-    });
-
-    function stripeTokenHandler(token) {
-      var paymentMethodId = Spree.stripePaymentMethod.prop('id').split("_")[2];
-      var baseSelector = `<input type='hidden' class='stripeToken' name='payment_source[${paymentMethodId}]`;
-
-      Spree.stripePaymentMethod.append(`${baseSelector}[gateway_payment_profile_id]' value='${token.id}'/>`);
-      Spree.stripePaymentMethod.append(`${baseSelector}[last_digits]' value='${token.card.last4}'/>`);
-      Spree.stripePaymentMethod.append(`${baseSelector}[month]' value='${token.card.exp_month}'/>`);
-      Spree.stripePaymentMethod.append(`${baseSelector}[year]' value='${token.card.exp_year}'/>`);
-      cardType.val(mapCC(token.card.type));
-      form[0].submit();
-    };
-
-    function mapCC(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';
-      }
-    };
-  })
-</script>
+<%= render "spree/checkout/payment/v3/elements_js" %>

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

@@ -0,0 +1,92 @@
+<% if current_order.present? && cart_checkout_payment_method.present? %>
+  <div id="stripe-payment-request" class="stripe-payment-request" 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 %>"
+      data-submit-url="<%= api_checkout_path(current_order.number) %>"
+      data-complete-url="<%= checkout_path %>"
+      class="payment-request-button">
+    </div>
+
+    <div id="card-errors" class='errorExplanation' role="alert" style="display: none">
+    </div>
+  </div>
+
+  <script src="https://js.stripe.com/v3/"></script>
+  <%= javascript_include_tag "solidus_stripe/stripe-init" %>
+
+  <script>
+    var paymentRequestConfig = SolidusStripe.paymentMethod.config.payment_request;
+    var errorElement = $('#card-errors');
+
+    if (typeof paymentRequestConfig !== 'undefined') {
+      paymentRequestConfig.requestShipping = true;
+
+      var onPrButtonMounted = function(buttonId, success) {
+        var container = document.getElementById('stripe-payment-request');
+
+        if (success) {
+          container.style.display = '';
+        } else {
+          container.style.display = 'none';
+        }
+      };
+
+      var paymentRequest = setUpPaymentRequest(paymentRequestConfig, onPrButtonMounted);
+
+      function handlePayment(result) {
+        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: authToken
+          })
+        }).then(function(response) {
+          response.json().then(function(json) {
+            handleServerResponse(json, result);
+          })
+        });
+      };
+
+      function stripeTokenHandler(token) {
+        return {
+          order: {
+            payments_attributes: [
+              {
+                payment_method_id: SolidusStripe.paymentMethod.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
+                }
+              }
+            ]
+          }
+        }
+      };
+
+      function submitPayment(payment) {
+        $.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(stripeTokenHandler(payment.paymentMethod)),
+          success: function() {
+            window.location = $('[data-complete-url]').data('complete-url');
+          },
+          error: function(xhr,status,error) {
+            showError(xhr.responseJSON.error);
+          }
+        });
+      };
+    }
+  </script>
+<% end %>

data/solidus_stripe.gemspec

@@ -1,15 +1,11 @@
 # frozen_string_literal: true
 
-lib = File.expand_path('lib', __dir__)
-$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+$:.push File.expand_path('lib', __dir__)
 require 'solidus_stripe/version'
 
-# encoding: UTF-8
-
 Gem::Specification.new do |s|
-  s.platform    = Gem::Platform::RUBY
-  s.name        = "solidus_stripe"
-  s.version     = SolidusStripe::VERSION
+  s.name = 'solidus_stripe'
+  s.version = SolidusStripe::VERSION
   s.summary     = "Stripe Payment Method for Solidus"
   s.description = s.summary
   s.required_ruby_version = ">= 2.2"
@@ -19,27 +15,26 @@ Gem::Specification.new do |s|
   s.homepage     = "https://solidus.io"
   s.license      = 'BSD-3'
 
+  if s.respond_to?(:metadata)
+    s.metadata["homepage_uri"] = s.homepage if s.homepage
+    s.metadata["source_code_uri"] = s.homepage if s.homepage
+  end
+
   s.files        = `git ls-files`.split("\n")
   s.test_files   = `git ls-files -- spec/*`.split("\n")
   s.require_path = "lib"
   s.requirements << "none"
 
-  s.add_dependency "solidus_core", [">= 2.3", "< 3"]
-  s.add_dependency "solidus_support", ">= 0.3.1"
+  s.bindir = "exe"
+  s.executables = s.files.grep(%r{^exe/}) { |f| File.basename(f) }
 
+  s.add_dependency 'solidus_core', ['>= 2.3', '< 3']
+  s.add_dependency 'solidus_support', '~> 0.4.0'
   # ActiveMerchant v1.58 through v1.59 introduced a breaking change
   # to the stripe gateway.
   #
   # This was resolved in v1.60, but we still need to skip 1.58 & 1.59.
-  s.add_dependency "activemerchant", "~> 1.48", "!= 1.58.0", "!= 1.59.0"
-
-  s.add_development_dependency "capybara"
-  s.add_development_dependency "capybara-screenshot"
-  s.add_development_dependency "database_cleaner", "~> 1.5"
-  s.add_development_dependency "factory_bot", "~> 4.4"
-  s.add_development_dependency "gem-release", "~> 2.0"
-  s.add_development_dependency "rspec-rails", "~> 3.2"
-  s.add_development_dependency 'selenium-webdriver', '~> 3.142'
-  s.add_development_dependency "simplecov"
-  s.add_development_dependency "sqlite3"
+  s.add_dependency "activemerchant", ">= 1.100" # includes "Stripe Payment Intents: Fix fallback for Store"
+
+  s.add_development_dependency 'solidus_dev_support'
 end

data/spec/features/stripe_checkout_spec.rb

@@ -15,7 +15,8 @@ RSpec.describe "Stripe checkout", type: :feature do
       name: "Stripe",
       preferred_secret_key: "sk_test_VCZnDv3GLU15TRvn8i2EsaAN",
       preferred_publishable_key: "pk_test_Cuf0PNtiAkkMpTVC2gwYDMIg",
-      preferred_v3_elements: preferred_v3_elements
+      preferred_v3_elements: preferred_v3_elements,
+      preferred_v3_intents: preferred_v3_intents
     )
 
     FactoryBot.create(:product, name: "DL-44")
@@ -61,6 +62,7 @@ RSpec.describe "Stripe checkout", type: :feature do
 
   context 'when using Stripe V2 API library' do
     let(:preferred_v3_elements) { false }
+    let(:preferred_v3_intents) { false }
 
     before do
       click_on "Save and Continue"
@@ -161,32 +163,91 @@ RSpec.describe "Stripe checkout", type: :feature do
     end
   end
 
-  context 'when using Stripe V3 API libarary with Elements' do
+  shared_examples "Stripe Elements invalid payments" do
+    it "shows an error with a missing credit card number" do
+      within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
+      within_frame(find '#card_expiry iframe') do
+        '0132'.split('').each { |n| find_field('exp-date').native.send_keys(n) }
+      end
+      click_button "Save and Continue"
+      expect(page).to have_content("Your card number is incomplete.")
+    end
+
+    it "shows an error with a missing expiration date" do
+      within_frame find('#card_number iframe') do
+        '4242 4242 4242 4242'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+      end
+      within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
+      click_button "Save and Continue"
+      expect(page).to have_content("Your card's expiration date is incomplete.")
+    end
+
+    it "shows an error with an invalid credit card number" do
+      within_frame find('#card_number iframe') do
+        '1111 1111 1111 1111'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+      end
+      within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
+      within_frame(find '#card_expiry iframe') do
+        '0132'.split('').each { |n| find_field('exp-date').native.send_keys(n) }
+      end
+      click_button "Save and Continue"
+      expect(page).to have_content("Your card number is invalid.")
+    end
+
+    it "shows an error with invalid security fields" do
+      within_frame find('#card_number iframe') do
+        '4242 4242 4242 4242'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+      end
+      within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '12' }
+      within_frame(find '#card_expiry iframe') do
+        '0132'.split('').each { |n| find_field('exp-date').native.send_keys(n) }
+      end
+      click_button "Save and Continue"
+      expect(page).to have_content("Your card's security code is incomplete.")
+    end
+
+    it "shows an error with invalid expiry fields" do
+      within_frame find('#card_number iframe') do
+        '4242 4242 4242 4242'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+      end
+      within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
+      within_frame(find '#card_expiry iframe') { fill_in 'exp-date', with: "013" }
+      click_button "Save and Continue"
+      expect(page).to have_content("Your card's expiration date is incomplete.")
+    end
+  end
+
+  context 'when using Stripe V3 API libarary with Elements', :js do
     let(:preferred_v3_elements) { true }
+    let(:preferred_v3_intents) { false }
 
     before do
       click_on "Save and Continue"
       expect(page).to have_current_path("/checkout/payment")
     end
 
-    it "can process a valid payment", js: true do
+    it "can process a valid payment" do
       within_frame find('#card_number iframe') do
         '4242 4242 4242 4242'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
       end
       within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
-      within_frame(find '#card_expiry iframe') { fill_in 'exp-date', with: "0132" }
+      within_frame(find '#card_expiry iframe') do
+        '0132'.split('').each { |n| find_field('exp-date').native.send_keys(n) }
+      end
       click_button "Save and Continue"
       expect(page).to have_current_path("/checkout/confirm")
       click_button "Place Order"
       expect(page).to have_content("Your order has been processed successfully")
     end
 
-    it "can re-use saved cards", js: true do
+    it "can re-use saved cards" do
       within_frame find('#card_number iframe') do
         '4242 4242 4242 4242'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
       end
       within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
-      within_frame(find '#card_expiry iframe') { fill_in 'exp-date', with: "0132" }
+      within_frame(find '#card_expiry iframe') do
+        '0132'.split('').each { |n| find_field('exp-date').native.send_keys(n) }
+      end
       click_button "Save and Continue"
       expect(page).to have_current_path("/checkout/confirm")
       click_button "Place Order"
@@ -230,50 +291,150 @@ RSpec.describe "Stripe checkout", type: :feature do
       expect(page).to have_content("Your order has been processed successfully")
     end
 
-    it "shows an error with a missing credit card number", js: true do
-      within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
-      within_frame(find '#card_expiry iframe') { fill_in 'exp-date', with: "0132" }
-      click_button "Save and Continue"
-      expect(page).to have_content("Your card number is incomplete.")
+    it_behaves_like "Stripe Elements invalid payments"
+  end
+
+  context "when using Stripe V3 API libarary with Intents", :js do
+    let(:preferred_v3_elements) { false }
+    let(:preferred_v3_intents) { true }
+
+    before do
+      click_on "Save and Continue"
+      expect(page).to have_current_path("/checkout/payment")
     end
 
-    it "shows an error with a missing expiration date", js: true do
-      within_frame find('#card_number iframe') do
-        '4242 4242 4242 4242'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+    context "when using a valid 3D Secure card" do
+      let(:card_number) { "4000 0027 6000 3184" }
+
+      it "successfully completes the checkout" do
+        within_frame find('#card_number iframe') do
+          card_number.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+        end
+        within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
+        within_frame(find '#card_expiry iframe') do
+          '0132'.split('').each { |n| find_field('exp-date').native.send_keys(n) }
+        end
+
+        click_button "Save and Continue"
+
+        within_3d_secure_modal do
+          expect(page).to have_content '$19.99 using 3D Secure'
+
+          click_button 'Complete authentication'
+        end
+
+        expect(page).to have_current_path("/checkout/confirm")
+
+        click_button "Place Order"
+
+        expect(page).to have_content("Your order has been processed successfully")
       end
-      within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
-      click_button "Save and Continue"
-      expect(page).to have_content("Your card's expiration date is incomplete.")
     end
 
-    it "shows an error with an invalid credit card number", js: true do
-      within_frame find('#card_number iframe') do
-        '1111 1111 1111 1111'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+    context "when using a card without enough money" do
+      let(:card_number) { "4000 0000 0000 9995" }
+
+      it "fails the payment" do
+        within_frame find('#card_number iframe') do
+          card_number.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+        end
+        within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
+        within_frame(find '#card_expiry iframe') do
+          '0132'.split('').each { |n| find_field('exp-date').native.send_keys(n) }
+        end
+
+        click_button "Save and Continue"
+
+        expect(page).to have_content "Your card has insufficient funds."
       end
-      within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
-      within_frame(find '#card_expiry iframe') { fill_in 'exp-date', with: "0132" }
-      click_button "Save and Continue"
-      expect(page).to have_content("Your card number is invalid.")
     end
 
-    it "shows an error with invalid security fields", js: true do
-      within_frame find('#card_number iframe') do
-        '4242 4242 4242 4242'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+    context "when entering the wrong 3D verification code" do
+      let(:card_number) { "4000 0084 0000 1629" }
+
+      it "fails the payment" do
+        within_frame find('#card_number iframe') do
+          card_number.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+        end
+        within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
+        within_frame(find '#card_expiry iframe') do
+          '0132'.split('').each { |n| find_field('exp-date').native.send_keys(n) }
+        end
+
+        click_button "Save and Continue"
+
+        within_3d_secure_modal do
+          click_button 'Complete authentication'
+        end
+
+        expect(page).to have_content "Your card was declined."
       end
-      within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '12' }
-      within_frame(find '#card_expiry iframe') { fill_in 'exp-date', with: "0132" }
-      click_button "Save and Continue"
-      expect(page).to have_content("Your card's security code is incomplete.")
     end
 
-    it "shows an error with invalid expiry fields", js: true do
+    it "can re-use saved cards" do
       within_frame find('#card_number iframe') do
-        '4242 4242 4242 4242'.split('').each { |n| find_field('cardnumber').native.send_keys(n) }
+        "4000 0027 6000 3184".split('').each { |n| find_field('cardnumber').native.send_keys(n) }
       end
       within_frame(find '#card_cvc iframe') { fill_in 'cvc', with: '123' }
-      within_frame(find '#card_expiry iframe') { fill_in 'exp-date', with: "013" }
+      within_frame(find '#card_expiry iframe') do
+        '0132'.split('').each { |n| find_field('exp-date').native.send_keys(n) }
+      end
       click_button "Save and Continue"
-      expect(page).to have_content("Your card's expiration date is incomplete.")
+
+      within_3d_secure_modal do
+        click_button 'Complete authentication'
+      end
+
+      expect(page).to have_current_path("/checkout/confirm")
+      click_button "Place Order"
+      expect(page).to have_content("Your order has been processed successfully")
+
+      visit spree.root_path
+      click_link "DL-44"
+      click_button "Add To Cart"
+
+      expect(page).to have_current_path("/cart")
+      click_button "Checkout"
+
+      # Address
+      expect(page).to have_current_path("/checkout/address")
+
+      within("#billing") do
+        fill_in "First Name", with: "Han"
+        fill_in "Last Name", with: "Solo"
+        fill_in "Street Address", with: "YT-1300"
+        fill_in "City", with: "Mos Eisley"
+        select "United States of America", from: "Country"
+        select country.states.first.name, from: "order_bill_address_attributes_state_id"
+        fill_in "Zip", with: "12010"
+        fill_in "Phone", with: "(555) 555-5555"
+      end
+      click_on "Save and Continue"
+
+      # Delivery
+      expect(page).to have_current_path("/checkout/delivery")
+      expect(page).to have_content("UPS Ground")
+      click_on "Save and Continue"
+
+      # Payment
+      expect(page).to have_current_path("/checkout/payment")
+      choose "Use an existing card on file"
+      click_button "Save and Continue"
+
+      # Confirm
+      expect(page).to have_current_path("/checkout/confirm")
+      click_button "Place Order"
+      expect(page).to have_content("Your order has been processed successfully")
+    end
+
+    it_behaves_like "Stripe Elements invalid payments"
+  end
+
+  def within_3d_secure_modal
+    within_frame "__privateStripeFrame10" do
+      within_frame "challengeFrame" do
+        yield
+      end
     end
   end
 end