Add payment methods via Stripe

.env

@@ -13,6 +13,12 @@ SQUARE_ACCESS_TOKEN=SQACCESSTOKEN1234
 SQUARE_LOCATION_ID=SQLOCID1234
 SQUARE_ENVIRONMENT=sandbox
 
+# Stripe API key
+STRIPE_API_KEY=STRIPEAPIKEY1234
+STRIPE_PUBLISHABLE_KEY=STRIPEPUBLISHABLEKEY1234
+# Secret value used to sign webhook payloads
+STRIPE_WEBHOOK_SIGNING_SECRET=
+
 ## Google Calendar (see README for details)
 # 
 # Path to Google service account credentials (used in prod)
@@ -47,6 +53,7 @@ FEATURE_MAINTENANCE_WORKFLOW=on
 FEATURE_GROUP_LENDING=on
 FEATURE_SMS_REMINDERS=on
 FEATURE_NEW_APPOINTMENTS_PAGE=on
+FEATURE_STRIPE_PAYMENTS=on
 
 # Twilio is used for SMS notifications
 TWILIO_ACCOUNT_SID=

Gemfile

@@ -47,6 +47,7 @@ gem "square.rb", "43.0.1.20250716"
 gem "aws-sdk-s3", require: false
 gem "omniauth-google-oauth2"
 gem "omniauth-rails_csrf_protection"
+gem "stripe"
 
 # Calendar syncing
 gem "googleauth"
@@ -91,6 +92,8 @@ group :test do
   gem "capybara-playwright-driver"
   gem "rails-controller-testing"
   gem "timecop"
+  gem "vcr"
+  gem "webmock"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -173,6 +173,9 @@ GEM
     chronic (0.10.2)
     concurrent-ruby (1.3.6)
     connection_pool (3.0.2)
+    crack (1.0.1)
+      bigdecimal
+      rexml
     crass (1.0.6)
     cssbundling-rails (1.4.3)
       railties (>= 6.0.0)
@@ -264,6 +267,7 @@ GEM
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
+    hashdiff (1.2.1)
     hashie (5.1.0)
       logger
     http (5.3.1)
@@ -495,6 +499,7 @@ GEM
       railties (>= 7.0)
     reverse_markdown (3.0.2)
       nokogiri
+    rexml (3.4.4)
     rubocop (1.84.2)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
@@ -571,6 +576,7 @@ GEM
     store_model (4.5.0)
       activerecord (>= 7.0)
     stringio (3.2.0)
+    stripe (15.4.0)
     sync (0.5.0)
     text (1.3.1)
     thor (1.5.0)
@@ -593,6 +599,7 @@ GEM
     unicode-emoji (4.2.0)
     uri (1.1.1)
     useragent (0.16.11)
+    vcr (6.4.0)
     version_gem (1.1.9)
     warden (1.2.9)
       rack (>= 2.0.9)
@@ -601,6 +608,10 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
+    webmock (3.26.1)
+      addressable (>= 2.8.0)
+      crack (>= 0.3.2)
+      hashdiff (>= 0.4.0, < 2.0.0)
     websocket-driver (0.7.7)
       base64
       websocket-extensions (>= 0.1.0)
@@ -674,11 +685,14 @@ DEPENDENCIES
   standard-rails
   stimulus-rails
   store_model
+  stripe
   timecop
   translation
   turbo-rails
   twilio-ruby (~> 7.10)
+  vcr
   web-console (>= 3.3.0)
+  webmock
 
 RUBY VERSION
    ruby 3.4.5p51

app/controllers/account/payment_methods_controller.rb

@@ -0,0 +1,34 @@
+module Account
+  class PaymentMethodsController < BaseController
+    def new
+      @result = checkout.prepare_to_collect_payment_info(current_user)
+      unless @result.success?
+        Rails.logger.error(result.error)
+        flash[:error] = "There was a problem connecting to our payment processor."
+        redirect_to_back_or_default
+      end
+    end
+
+    def index
+      checkout.sync_payment_methods(current_user)
+      @payment_methods = current_user.payment_methods.active
+    end
+
+    def destroy
+      @payment_method = current_user.payment_methods.find(params[:id])
+      result = checkout.delete_payment_method(@payment_method)
+      if result.success?
+        flash[:success] = "Successfully deleted payment method"
+      else
+        flash[:error] = result.error
+      end
+      redirect_to account_payment_methods_path, status: :see_other
+    end
+
+    private
+
+    def checkout
+      StripeCheckout.build
+    end
+  end
+end

app/controllers/stripe_controller.rb

@@ -0,0 +1,41 @@
+class StripeController < ApplicationController
+  skip_before_action :verify_authenticity_token, only: %i[webhook]
+
+  def webhook
+    payload = request.body.read
+    event = nil
+
+    begin
+      event = Stripe::Event.construct_from(
+        JSON.parse(payload, symbolize_names: true)
+      )
+    rescue JSON::ParserError
+      # Invalid payload
+      render status: 400
+      return
+    end
+
+    # Retrieve the event by verifying the signature using the raw body and the endpoint secret
+    signing_secret = ENV["STRIPE_WEBHOOK_SIGNING_SECRET"]
+    signature = request.env["HTTP_STRIPE_SIGNATURE"]
+    begin
+      event = Stripe::Webhook.construct_event(
+        payload, signature, signing_secret
+      )
+    rescue Stripe::SignatureVerificationError => e
+      Rails.logger.warn "⚠️  Webhook signature verification failed. #{e.message}"
+      render status: 400
+      return
+    end
+
+    # Handle the event
+    case event.type
+    when "checkout.session.completed"
+      session = event.data.object # contains a Stripe::PaymentIntent
+      Rails.logger.info session
+    else
+      Rails.logger.info "Unhandled event type: #{event.type}"
+    end
+    render json: {message: :success}
+  end
+end

app/javascript/controllers/index.js

@@ -5,64 +5,67 @@
 import { application } from './application'
 
 import AlertController from './alert_controller'
+application.register('alert', AlertController)
 
 import AppointmentDateController from './appointment_date_controller'
+application.register('appointment-date', AppointmentDateController)
 
 import AutocompleteController from './autocomplete_controller'
+application.register('autocomplete', AutocompleteController)
 
 import CollapseController from './collapse_controller'
+application.register('collapse', CollapseController)
 
 import ConditionalFieldController from './conditional_field_controller'
+application.register('conditional-field', ConditionalFieldController)
 
 import ConfirmItemAccessoriesController from './confirm_item_accessories_controller'
+application.register(
+  'confirm-item-accessories',
+  ConfirmItemAccessoriesController
+)
 
 import DynamicFieldsController from './dynamic_fields_controller'
+application.register('dynamic-fields', DynamicFieldsController)
 
 import EmailSettingsEditorController from './email_settings_editor_controller'
+application.register('email-settings-editor', EmailSettingsEditorController)
 
 import FindToolController from './find_tool_controller'
+application.register('find-tool', FindToolController)
 
 import HoldOrderController from './hold_order_controller'
+application.register('hold-order', HoldOrderController)
 
 import ImageEditorController from './image_editor_controller'
+application.register('image-editor', ImageEditorController)
 
 import ItemFilterController from './item_filter_controller'
+application.register('item-filter', ItemFilterController)
 
 import ModalController from './modal_controller'
+application.register('modal', ModalController)
 
 import MultiSelectController from './multi_select_controller'
+application.register('multi-select', MultiSelectController)
 
 import NotesController from './notes_controller'
+application.register('notes', NotesController)
 
 import ReservationDatesController from './reservation_dates_controller'
+application.register('reservation-dates', ReservationDatesController)
 
 import SidebarController from './sidebar_controller'
+application.register('sidebar', SidebarController)
+
+import StripeController from './stripe_controller'
+application.register('stripe', StripeController)
 
 import TagEditorController from './tag_editor_controller'
+application.register('tag-editor', TagEditorController)
 
 import ToggleController from './toggle_controller'
+application.register('toggle', ToggleController)
 
 import TreeNavController from './tree_nav_controller'
-application.register('alert', AlertController)
-application.register('appointment-date', AppointmentDateController)
-application.register('autocomplete', AutocompleteController)
-application.register('collapse', CollapseController)
-application.register('conditional-field', ConditionalFieldController)
-application.register(
-  'confirm-item-accessories',
-  ConfirmItemAccessoriesController
-)
-application.register('dynamic-fields', DynamicFieldsController)
-application.register('email-settings-editor', EmailSettingsEditorController)
-application.register('find-tool', FindToolController)
-application.register('hold-order', HoldOrderController)
-application.register('image-editor', ImageEditorController)
-application.register('item-filter', ItemFilterController)
-application.register('modal', ModalController)
-application.register('multi-select', MultiSelectController)
-application.register('notes', NotesController)
-application.register('reservation-dates', ReservationDatesController)
-application.register('sidebar', SidebarController)
-application.register('tag-editor', TagEditorController)
-application.register('toggle', ToggleController)
 application.register('tree-nav', TreeNavController)

app/javascript/controllers/stripe_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['elements', 'errors']
+  static values = {
+    intentSecret: String,
+    returnUrl: String,
+  }
+
+  connect() {
+    this.clientKey = document
+      .querySelector('meta[name=stripe-client-key')
+      .getAttribute('content')
+    this.client = Stripe(this.clientKey)
+
+    const options = {
+      clientSecret: this.intentSecretValue,
+      // Fully customizable with appearance API.
+      appearance: {
+        /*...*/
+      },
+    }
+
+    // Set up Stripe.js and Elements using the SetupIntent's client secret
+    this.elements = this.client.elements(options)
+
+    // Create and mount the Payment Element
+    const paymentElementOptions = { layout: 'accordion' }
+    const paymentElement = this.elements.create(
+      'payment',
+      paymentElementOptions
+    )
+    paymentElement.mount(this.elementsTarget)
+  }
+
+  async submit(event) {
+    event.preventDefault()
+
+    const { error } = await this.client.confirmSetup({
+      elements: this.elements,
+      confirmParams: {
+        return_url: this.returnUrlValue,
+      },
+    })
+
+    if (error) {
+      // This point will only be reached if there is an immediate error when
+      // confirming the payment. Show error to your customer (for example, payment
+      // details incomplete)
+      this.errorsTarget.textContent = error.message
+    } else {
+      // 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`.
+    }
+  }
+
+  disconnect() {}
+}

app/lib/feature_flags.rb

@@ -18,4 +18,8 @@ def self.group_lending_enabled?
   def self.for_later_lists_enabled?
     ENV["FOR_LATER_LISTS"] == "on"
   end
+
+  def self.stripe_payments_enabled?
+    ENV["FEATURE_STRIPE_PAYMENTS"] == "on"
+  end
 end