spree_stripe 1.7.0 → 1.8.0

data/app/javascript/spree_stripe/controllers/stripe_controller.js

@@ -1,109 +1,71 @@
 import { Controller } from '@hotwired/stimulus'
 import showFlashMessage from 'spree/storefront/helpers/show_flash_message'
 
+// Regular Stripe checkout on the v3 Store API — renders the payment form and
+// confirms the payment. Completion is NOT handled here: both new and saved
+// cards redirect to `return_url` (new cards via Stripe's redirect, saved cards
+// manually after inline confirmation), where the server-side
+// ConfirmPaymentsController finalizes the session + cart.
 export default class extends Controller {
   static values = {
     apiKey: String,
-    paymentIntent: Object,
-    returnUrl: String,
+    clientSecret: String,
+    cartId: String,
+    cartToken: String,
+    spreeApiKey: String,
     orderEmail: String,
-    orderToken: String,
+    returnUrl: String,
     colorPrimary: String,
-    colorBackground: String,
     colorText: String,
-    paymentIntentPath: String,
-    checkoutPath: String,
-    checkoutValidateOrderForPaymentPath: String,
     paymentElementAdditionalOptions: { type: Object, default: {} }
   }
 
-  static targets = [
-    'paymentElement',
-    'loading',
-    'spinner',
-    'buttonText',
-    'defaultCard'
-  ]
+  static targets = ['paymentElement', 'loading', 'defaultCard']
 
   connect() {
-    const stripeOptions = {}
-
     this.submitTarget = document.querySelector('#checkout-payment-submit')
     this.billingAddressCheckbox = document.querySelector('#order_use_shipping')
     this.billingAddressForm = document.querySelector('form.edit_order')
-    this.stripe = Stripe(this.apiKeyValue, stripeOptions)
+    this.stripe = Stripe(this.apiKeyValue)
 
     if (this.hasDefaultCardTarget) {
-      this.initializeStripe({
-        target: { value: this.defaultCardTarget.value }
-      })
+      this.initializeStripe({ target: { value: this.defaultCardTarget.value } })
     } else {
       this.initializeStripe({ target: { value: 'on' } })
     }
 
-    // hijack the submit button to call the submit method
-    this.submitTarget.addEventListener('click', this.submit.bind(this))
+    if (this.submitTarget) {
+      this.submitTarget.addEventListener('click', this.submit.bind(this))
+    }
   }
 
-  // Fetches a payment intent
-  async initializeStripe(e) {
+  // Mounts the Payment Element for a new card, or records the selected saved card.
+  initializeStripe(e) {
     this.setLoading(true)
 
-    if (e.target.value == 'on') {
-      this.stripePaymentMethodId = null
-    } else {
-      this.stripePaymentMethodId = e.target.value
-    }
-
-    const response = await fetch(
-      this.paymentIntentPathValue,
-      {
-        method: 'PATCH',
-        headers: this.spreeApiHeaders,
-        body: JSON.stringify({
-          payment_intent: {
-            stripe_payment_method_id: this.stripePaymentMethodId
-          }
-        })
-      }
-    )
-    const { data, error } = await response.json()
-
-    if (error) {
-      this.handleError(error)
-      return
-    }
+    const value = e.target.value
+    this.stripePaymentMethodId = value && value !== 'on' ? value : null
 
-    if (this.stripePaymentMethodId === null) {
+    if (this.stripePaymentMethodId === null && !this.elements) {
       const appearance = {
         theme: 'stripe',
         variables: {
           colorPrimary: this.colorPrimaryValue,
-          colorBackground: this.colorBackgroundValue,
           colorText: this.colorTextValue
         }
       }
-      this.elements = this.stripe.elements({
-        appearance,
-        clientSecret: this.paymentIntentValue.client_secret
-      })
+      this.elements = this.stripe.elements({ appearance, clientSecret: this.clientSecretValue })
       const paymentElement = this.elements.create('payment', {
         fields: {
           billingDetails: {
             name: 'never',
             email: 'never',
-            address: {
-              country: 'never',
-              postalCode: 'never'
-            }
+            address: { country: 'never', postalCode: 'never' }
           }
         },
         ...this.paymentElementAdditionalOptionsValue
       })
       paymentElement.mount(this.paymentElementTarget)
-      paymentElement.on('change', (event) => {
-        this.selectedMethod = event.value?.type
-      })
     }
 
     this.setLoading(false)
@@ -113,202 +75,163 @@ export default class extends Controller {
     e.preventDefault()
     this.setLoading(true)
 
-    const validated = await this.validateOrderForPayment()
-
-    if (!validated) {
-      this.setLoading(false)
-      e.stopImmediatePropagation()
-      return
-    }
-
-    const billingAddress = await this.updateBillingAddress()
-
-    if (!billingAddress) {
+    const billing = await this.updateBillingAddress()
+    if (!billing) {
       this.setLoading(false)
       e.stopImmediatePropagation()
       return
     }
 
     if (this.stripePaymentMethodId) {
-      const { paymentIntent, error } = await this.stripe.confirmCardPayment(
-        this.paymentIntentValue.client_secret
-      )
+      // Saved card: confirm inline (Stripe binds the payment method to the
+      // intent), then hand off to the return controller — mirrors how Stripe
+      // redirects new cards back. The server reads the bound method from the
+      // confirmed intent, so no extra session call is needed.
+      const { error } = await this.stripe.confirmCardPayment(this.clientSecretValue, {
+        payment_method: this.stripePaymentMethodId
+      })
 
-      this.handleError(error)
+      if (error) {
+        this.handleError(error)
+        this.setLoading(false)
+        return
+      }
 
       window.location.href = this.returnUrlValue
     } else {
+      // New card: confirm with the Payment Element; Stripe redirects to return_url.
       const elements = this.elements
-
       if (!elements || !elements.getElement('payment')) {
-        showFlashMessage(
-          'An unexpected error occurred. Please refresh the page and try again.',
-          'error'
-        )
+        showFlashMessage('An unexpected error occurred. Please refresh the page and try again.', 'error')
+        this.setLoading(false)
         return
       }
 
       const { error } = await this.stripe.confirmPayment({
         elements,
         confirmParams: {
-          payment_method_data: {
-            billing_details: {
-              email: this.orderEmailValue,
-              name: billingAddress.firstname + ' ' + billingAddress.lastname,
-              address: {
-                city: billingAddress.city,
-                country: billingAddress.country_iso,
-                line1: billingAddress.address1,
-                line2: billingAddress.address2,
-                postal_code: billingAddress.zipcode,
-                state: billingAddress.state_code
-              }
-            }
-          },
-          return_url: this.returnUrlValue
+          return_url: this.returnUrlValue,
+          payment_method_data: { billing_details: this.billingDetails(billing) }
         }
       })
 
-      // This point will only be reached if there is an immediate error when
-      // confirming the payment. Otherwise, your customer will be redirected to
-      // your `return_url`. For some payment methods like iDEAL, your customer will
-      // be redirected to an intermediate site first to authorize the payment, then
-      // redirected to the `return_url`.
-      // TODO: we need to remove the payment intent id from this order and create new
-      this.handleError(error)
-    }
-
-    this.setLoading(false)
-  }
-
-  async validateOrderForPayment() {
-    const response = await fetch(
-      this.checkoutValidateOrderForPaymentPathValue,
-      {
-        method: 'POST',
-        headers: this.spreeApiHeaders
-      }
-    )
-
-    const json = await response.json()
-
-    if (json.meta?.messages?.length) {
-      const message = [
-        json.meta.messages,
-        'please refresh the page and try again.'
-      ].join(', ')
-
-      showFlashMessage(message, 'error')
-      return false
-    } else {
-      return true
+      // Reached only on an immediate error; otherwise Stripe redirects to return_url.
+      if (error) this.handleError(error)
+      this.setLoading(false)
     }
   }
 
+  // Persists the billing address to the cart via the v3 Store API.
+  // Returns the cart's billing_address on success, false on failure.
   async updateBillingAddress() {
-    // billing address same as shipping address
+    let body
     if (this.billingAddressCheckbox?.checked) {
-      const response = await fetch(this.checkoutPathValue, {
-        method: 'PATCH',
-        headers: this.spreeApiHeaders,
-        body: JSON.stringify({
-          include: 'billing_address',
-          order: {
-            use_shipping: true
-          }
-        })
-      });
+      body = { use_shipping: true }
+    } else if (this.billingAddressForm?.checkValidity()) {
+      body = { billing_address: this.readBillingAddressForm() }
+    } else {
+      if (this.submitTarget) this.submitTarget.disabled = false
+      return false
+    }
 
-      const responseJson = await response.json();
+    const response = await fetch(this.cartApiBase, {
+      method: 'PATCH',
+      headers: this.spreeApiHeaders,
+      body: JSON.stringify(body)
+    })
+    const json = await response.json().catch(() => ({}))
 
-      if (response.ok) {
-        return responseJson.included.find(item => item.type === 'address').attributes;
-      } else {
-        const errors = Array.isArray(responseJson.error) ? responseJson.error.join('. ') : responseJson.error || 'Billing address is invalid';
-        showFlashMessage(errors, 'error');
-        this.submitTarget.disabled = false;
-        return false;
-      }
+    if (response.ok) {
+      return json.billing_address || {}
     }
 
-    // billing address different from shipping address
-    if (this.billingAddressForm.checkValidity()) {
-      const formData = new FormData(this.billingAddressForm);
+    showFlashMessage(this.extractErrors(json) || 'Billing address is invalid', 'error')
+    if (this.submitTarget) this.submitTarget.disabled = false
+    return false
+  }
 
-      const response = await fetch(this.checkoutPathValue, {
-        method: 'PATCH',
-        headers: this.spreeApiHeaders,
-        body: JSON.stringify({
-          include: 'billing_address',
-          order: {
-            bill_address_attributes: {
-              firstname: formData.get("order[bill_address_attributes][firstname]"),
-              lastname: formData.get("order[bill_address_attributes][lastname]"),
-              address1: formData.get("order[bill_address_attributes][address1]"),
-              address2: formData.get("order[bill_address_attributes][address2]"),
-              city: formData.get("order[bill_address_attributes][city]"),
-              country_id: formData.get("order[bill_address_attributes][country_id]"),
-              state_id: formData.get("order[bill_address_attributes][state_id]"),
-              state_name: formData.get("order[bill_address_attributes][state_name]"),
-              zipcode: formData.get("order[bill_address_attributes][zipcode]"),
-              phone: formData.get("order[bill_address_attributes][phone]")
-            }
-          }
-        })
-      });
+  readBillingAddressForm() {
+    const form = this.billingAddressForm
+    const field = (name) => form.querySelector(`[name="order[bill_address_attributes][${name}]"]`)
+    const value = (name) => field(name)?.value || null
 
-      const responseJson = await response.json();
+    const countryOption = field('country_id')?.selectedOptions?.[0]
+    const stateOption = field('state_id')?.selectedOptions?.[0]
 
-      if (response.ok) {
-        return responseJson.included.find(item => item.type === 'address').attributes;
-      } else {
-        const errors = Array.isArray(responseJson.error) ? responseJson.error.join('. ') : responseJson.error || 'Billing address is invalid';
-        showFlashMessage(errors, 'error');
+    return {
+      first_name: value('firstname'),
+      last_name: value('lastname'),
+      address1: value('address1'),
+      address2: value('address2'),
+      city: value('city'),
+      postal_code: value('zipcode'),
+      phone: value('phone'),
+      country_iso: countryOption?.dataset?.iso || null,
+      state_name: stateOption?.text?.trim() || value('state_name')
+    }
+  }
 
-        this.submitTarget.disabled = false;
-        return false;
+  billingDetails(address) {
+    return {
+      name: [address.first_name, address.last_name].filter(Boolean).join(' '),
+      email: this.orderEmailValue,
+      address: {
+        city: address.city,
+        country: address.country_iso,
+        line1: address.address1,
+        line2: address.address2,
+        postal_code: address.postal_code,
+        state: address.state_abbr || address.state_name
       }
-    } else {
-      this.submitTarget.disabled = false;
-      return false
     }
   }
 
   handleError(error) {
-    if (error) {
-      if (error.type === 'card_error' || error.type === 'validation_error') {
-        showFlashMessage(error.message, 'error')
-      } else {
-        showFlashMessage(
-          'An unexpected error occured. Please refresh the page and try again.',
-          'error'
-        )
-      }
-
-      this.submitTarget.disabled = false;
+    if (!error) return
 
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      })
+    // Per Stripe: only card_error / validation_error messages are meant to be
+    // shown to customers; other types are developer-facing, so fall back to a
+    // generic message.
+    if (error.type === 'card_error' || error.type === 'validation_error') {
+      showFlashMessage(error.message, 'error')
+    } else {
+      showFlashMessage('An unexpected error occurred. Please refresh the page and try again.', 'error')
     }
+
+    if (this.submitTarget) this.submitTarget.disabled = false
+    window.scrollTo({ top: 0, behavior: 'smooth' })
   }
 
-  // Show a spinner on payment submission
   setLoading(isLoading) {
     if (isLoading) {
-      // Disable the button and show a spinner
-      this.submitTarget.disabled = true
+      if (this.submitTarget) this.submitTarget.disabled = true
     } else {
-      this.loadingTarget.classList.add('hidden')
-      this.submitTarget.disabled = false
-      this.submitTarget.classList.remove('hidden')
+      if (this.hasLoadingTarget) this.loadingTarget.classList.add('hidden')
+      if (this.submitTarget) {
+        this.submitTarget.disabled = false
+        this.submitTarget.classList.remove('hidden')
+      }
     }
   }
 
+  extractErrors(json) {
+    if (!json) return null
+    if (typeof json.error === 'string') return json.error
+    if (Array.isArray(json.error)) return json.error.join('. ')
+    if (json.errors) {
+      return Array.isArray(json.errors) ? json.errors.join('. ') : Object.values(json.errors).flat().join('. ')
+    }
+    return null
+  }
+
+  get cartApiBase() {
+    return `/api/v3/store/carts/${this.cartIdValue}`
+  }
+
   get spreeApiHeaders() {
     return {
-      'X-Spree-Order-Token': this.orderTokenValue,
+      'X-Spree-API-Key': this.spreeApiKeyValue,
+      'X-Spree-Token': this.cartTokenValue,
       'Content-Type': 'application/json'
     }
   }

data/app/models/spree/payment_sessions/stripe.rb

@@ -2,8 +2,7 @@ module Spree
   class PaymentSessions::Stripe < PaymentSession
     delegate :api_options, to: :payment_method
 
-    # Duck-type interface matching SpreeStripe::PaymentIntent
-    # This allows reuse of CompleteOrder and CreatePayment services
+    # Duck-type interface consumed by the CompleteOrder and CreatePayment services
     def stripe_id
       external_id
     end

data/app/models/spree_stripe/gateway/payment_intents.rb

@@ -7,10 +7,6 @@ module SpreeStripe
       BANK_PAYMENT_METHOD_TYPES = %w[customer_balance us_bank_account].freeze
       MANUAL_CAPTURE_METHOD = 'manual'.freeze
 
-      included do
-        has_many :payment_intents, class_name: 'SpreeStripe::PaymentIntent', foreign_key: 'payment_method_id', dependent: :delete_all
-      end
-
       def payment_intent_accepted?(payment_intent)
         payment_intent.status.in?(payment_intent_accepted_statuses(payment_intent))
       end

data/app/models/spree_stripe/gateway/payment_sessions.rb

@@ -4,7 +4,7 @@ module SpreeStripe
       extend ActiveSupport::Concern
 
       def session_required?
-        !SpreeStripe::Config[:use_legacy_payment_intents]
+        true
       end
 
       def payment_session_class
@@ -15,7 +15,7 @@ module SpreeStripe
         total = amount.presence || order.total_minus_store_credits
         amount_in_cents = Spree::Money.new(total, currency: order.currency).cents
 
-        return nil if amount_in_cents.zero?
+        raise Spree::Core::GatewayError, I18n.t('spree.stripe.payment_session_errors.zero_amount') if amount_in_cents.zero?
 
         customer = fetch_or_create_customer(order: order)
         stripe_pm_id = external_data[:stripe_payment_method_id] || external_data['stripe_payment_method_id']

data/app/models/spree_stripe/order_decorator.rb

@@ -1,36 +1,9 @@
 module SpreeStripe
   module OrderDecorator
     def self.prepended(base)
-      base.has_many :payment_intents, class_name: 'SpreeStripe::PaymentIntent', dependent: :destroy
-
       base.store_accessor :private_metadata, :stripe_tax_calculation_id
     end
-
-    def update_payment_intents
-      return if completed?
-      return unless total_minus_store_credits.positive?
-
-      payment_intents.each do |payment_intent|
-        payment_intent.update!(amount: total_minus_store_credits)
-      end
-    end
-
-    def associate_user!(user, override_email = true)
-      super(user, override_email)
-
-      return if payment_intents.empty?
-
-      responses = payment_intents.map { |payment_intent| payment_intent.update_stripe_payment_intent }
-      customer_id = responses.find { |response| response.params['customer'].present? }&.params['customer']
-
-      payment_intents.update_all(customer_id: customer_id) if customer_id.present?
-    end
-
-    def stripe_payment_intent
-      @stripe_payment_intent ||= payment_intents.last.stripe_payment_intent
-    end
   end
 end
 
 Spree::Order.prepend(SpreeStripe::OrderDecorator)
-Spree::Order.register_update_hook :update_payment_intents

data/app/models/spree_stripe/shipment_decorator.rb

@@ -10,10 +10,10 @@ module SpreeStripe
       return unless order.fully_shipped?
       return if order.stripe_tax_calculation_id.blank?
 
-      payment_intent = order.payment_intents.last
-      return if payment_intent.blank?
+      payment_session = order.payment_sessions.where(type: Spree::PaymentSessions::Stripe.name).last
+      return if payment_session.blank?
 
-      SpreeStripe::CreateTaxTransactionJob.perform_later(order.store_id, payment_intent.stripe_id, order.stripe_tax_calculation_id)
+      SpreeStripe::CreateTaxTransactionJob.perform_later(order.store_id, payment_session.stripe_id, order.stripe_tax_calculation_id)
     end
   end
 end

data/app/services/spree_stripe/create_payment_session.rb

@@ -0,0 +1,18 @@
+module SpreeStripe
+  # Reuses the order's pending Stripe payment session (keeping its amount in sync
+  # with the order total) or creates a new one via the gateway. The v3 successor
+  # to the legacy CreatePaymentIntent service.
+  class CreatePaymentSession
+    def call(order, gateway)
+      amount = order.total_minus_store_credits
+      return if Spree::Money.new(amount, currency: order.currency).cents.zero?
+
+      session = order.payment_sessions.where(payment_method: gateway, status: 'pending').order(:created_at).last
+
+      return gateway.create_payment_session(order: order) unless session
+
+      gateway.update_payment_session(payment_session: session, amount: amount) if session.amount != amount
+      session
+    end
+  end
+end

data/app/services/spree_stripe/webhook_handlers/payment_intent_payment_failed.rb

@@ -4,23 +4,12 @@ module SpreeStripe
       def call(event)
         stripe_id = event.data.object.id
 
-        # New system: PaymentSession
         payment_session = Spree::PaymentSessions::Stripe.find_by(external_id: stripe_id)
-        if payment_session.present?
-          payment_session.fail if payment_session.can_fail?
-          order = payment_session.order
-          order.cancel! if !order.canceled? && order.can_cancel?
-          return
-        end
+        return if payment_session.blank?
 
-        # Legacy system: PaymentIntent
-        payment_intent = SpreeStripe::PaymentIntent.find_by(stripe_id: stripe_id)
-        return if payment_intent.nil?
-
-        order = payment_intent.order
-        return if order.canceled?
-
-        order.cancel! if order.can_cancel?
+        payment_session.fail if payment_session.can_fail?
+        order = payment_session.order
+        order.cancel! if !order.canceled? && order.can_cancel?
       end
     end
   end

data/app/services/spree_stripe/webhook_handlers/payment_intent_succeeded.rb

@@ -4,13 +4,7 @@ module SpreeStripe
       def call(event)
         stripe_id = event.data.object[:id]
 
-        return if enqueue_complete_order_from_session(stripe_id)
-
-        # Legacy system: PaymentIntent
-        payment_intent = SpreeStripe::PaymentIntent.find_by(stripe_id: stripe_id)
-        return if payment_intent.nil?
-
-        SpreeStripe::CompleteOrderJob.set(wait: ENQUEUE_DELAY).perform_later(payment_intent.id)
+        enqueue_complete_order_from_session(stripe_id)
       end
     end
   end