rails_tipjar 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb45f6dbcb30df4e79a71f533760d0fa1c5d2a904c0065ae774c675998d19585
-  data.tar.gz: c0f1ea549ffb2fb0fbd3f48b36e81621697de38af2e622aa57eaec01d0c61cca
+  metadata.gz: 0dad170082ce372bad125b49719b0cffb1e6b81575161042feb724d33e5ab8d6
+  data.tar.gz: 6db6495061f0f76370133fd8a31f32e6c0610df1155309aef0f2ef50b3eb5c24
 SHA512:
-  metadata.gz: 6bd013f51e770763b1b6305ee094e42e90359d17306b03a78497996efe34cec2cc5c1c2cf3c12ad4b7f4ab5992cd7fad73f88c9e2f428ad82baf6f8d0434c278
-  data.tar.gz: b60050b28b9686dd14e0dba7323cec9eed49b709288a59d6a6f3ffb5b3f6a9827d4a8f818db65958711cf7c2bd11cfdb291af85652854c8304a741a68473c03f
+  metadata.gz: c20a0b31e0f00b467b392fff0884fadd941f0704a52c140db0fc52e9fdb2d682190cabbb74a985fa0fee6b805c0c38182d3f9aa67aaed1edfadabc6273897371
+  data.tar.gz: 4d557ecd1a09c866de21acff09aa98b40be0545a03eb8c1abc23db17a3ca363a0a2b740023796497630acd6c40c8877ca3af7a03d09551fe0a9895476ad60155

data/README.md

@@ -1,37 +1,41 @@
 # RailsTipjar
 
-A reusable, customizable tip jar feature for Rails applications using Stripe Payment Links. Add a beautiful tip jar to any Rails app with just a few lines of code!
+A reusable, customizable tip jar feature for Rails applications. Add a beautiful tip jar to any Rails app with just a few lines of code! Works with any payment provider - Stripe, PayPal, Buy Me a Coffee, Ko-fi, or any custom payment link.
 
 ## Features
 
-- 🎨 Customizable floating button with multiple icon options
-- 💳 Stripe Payment Links integration (no backend payment processing needed)
-- 📱 Fully responsive design
-- 🎯 Multiple positioning options
-- 🌙 Light/Dark theme support
+- 🎨 Customizable floating button with multiple icon options (coffee, heart, star, dollar, jar)
+- 🎨 Custom color theming with configurable background and text colors
+- 💫 Optional pulsing animation effect
+- 💳 Works with any payment provider (Stripe, PayPal, Ko-fi, Buy Me a Coffee, etc.)
+- 📱 Fully responsive design with inline styles (no CSS dependencies)
+- 🎯 Multiple positioning options (bottom-right, bottom-left, top-right, top-left)
+- 🌙 Light/Dark theme support for modal
 - 📊 Built-in analytics tracking
 - ⚡ Stimulus.js powered interactions
 - 🔧 Zero configuration to get started
+- 🚀 Simple mode: Direct link without modal
+- ✨ Fully self-contained (v0.2.0+)
 
-## Why Stripe Payment Links?
+## Why Use Payment Links?
 
 - **No payment code** in your Rails apps
-- **PCI compliant** automatically  
-- **No monthly fees** - pay only 2.9% + 30¢ per transaction
-- **International support** with multi-currency
-- **Professional checkout** experience
-- **Automatic receipts** and tax handling
+- **No PCI compliance concerns** - handled by your payment provider
+- **Multiple provider options** - use Stripe, PayPal, Ko-fi, Buy Me a Coffee, or any service
+- **International support** - most providers support multiple currencies
+- **Professional checkout** experience managed by the provider
+- **Automatic receipts** and tax handling by the payment provider
 
 ## Installation
 
 Add this gem to your Rails application's Gemfile:
 
 ```ruby
-# From GitHub (recommended during development)
-gem 'rails_tipjar', git: 'https://github.com/justinpaulson/rails_tipjar'
-
-# Or from RubyGems (when published)
+# From RubyGems
 gem 'rails_tipjar'
+
+# Or from GitHub for latest features
+gem 'rails_tipjar', git: 'https://github.com/justinpaulson/rails_tipjar'
 ```
 
 Then execute:
@@ -43,12 +47,18 @@ rails generate tipjar:install
 
 ## Quick Start
 
-### 1. Create Stripe Payment Links
+### 1. Create Payment Links
+
+Choose your preferred payment provider and create payment links:
 
-1. Go to [Stripe Dashboard](https://dashboard.stripe.com/payment-links)
-2. Create payment links for different tip amounts
-3. Set them to "Donation" mode
-4. Copy the generated URLs
+**Popular Options:**
+- **Stripe**: [dashboard.stripe.com/payment-links](https://dashboard.stripe.com/payment-links)
+- **PayPal**: [paypal.com/paypalme](https://paypal.com/paypalme)
+- **Ko-fi**: [ko-fi.com](https://ko-fi.com)
+- **Buy Me a Coffee**: [buymeacoffee.com](https://buymeacoffee.com)
+- **GitHub Sponsors**: [github.com/sponsors](https://github.com/sponsors)
+
+Create links for different amounts or use a single link that accepts custom amounts.
 
 ### 2. Configure the Gem
 
@@ -56,10 +66,14 @@ Edit `config/initializers/tipjar.rb`:
 
 ```ruby
 RailsTipjar.configure do |config|
+  # Simple mode: just one link (no modal)
+  config.payment_link = "https://your-payment-provider.com/your-link"
+  
+  # Or use modal mode with multiple amounts
   config.payment_links = {
-    small: "https://buy.stripe.com/your-5-dollar-link",
-    medium: "https://buy.stripe.com/your-10-dollar-link",
-    large: "https://buy.stripe.com/your-25-dollar-link"
+    small: "https://your-provider.com/tip-5",
+    medium: "https://your-provider.com/tip-10",
+    large: "https://your-provider.com/tip-25"
   }
   
   config.position = :bottom_right
@@ -93,23 +107,34 @@ That's it! You now have a working tip jar on your site.
 
 ```ruby
 RailsTipjar.configure do |config|
-  # Payment Links (required)
+  # Simple mode - just one payment link (no modal)
+  config.payment_link = "https://your-payment-link.com"
+  
+  # Modal mode - multiple payment links
   config.payment_links = {
     small: "...",
     medium: "...",
     large: "...",
     custom: "..."  # Optional: for custom amounts
   }
+  config.use_modal = true  # Force modal even with single link
   
   # Button position
   # Options: :bottom_right, :bottom_left, :top_right, :top_left
   config.position = :bottom_right
   
   # Button icon
-  # Options: :coffee, :heart, :star, :dollar, or custom SVG string
+  # Options: :coffee, :heart, :star, :dollar, :jar, or custom SVG string
   config.icon = :coffee
   
-  # Theme
+  # Button colors (hex values)
+  config.color = "#3b82f6"      # Background color (default: blue)
+  config.text_color = "#ffffff"  # Text color (default: white)
+  
+  # Pulsing animation
+  config.pulse = false  # Set to true to enable pulsing effect
+  
+  # Theme for modal
   # Options: :light, :dark, :auto
   config.theme = :light
   
@@ -171,8 +196,19 @@ end
 
 ## Styling
 
-The gem includes default styles that work with most Rails applications. You can override styles by targeting these CSS classes:
+As of v0.2.0, the gem is fully self-contained with inline styles - no external CSS required! The button works out of the box without any app-side styling.
 
+### Customization Options
+
+1. **Via Configuration** (Recommended):
+```ruby
+config.color = "#10b981"       # Green background
+config.text_color = "#000000"  # Black text
+config.pulse = true            # Enable pulsing animation
+config.button_class = "custom" # Add custom CSS classes
+```
+
+2. **Via CSS Classes** (for modal mode):
 ```css
 /* Button */
 .tipjar-button { }
@@ -217,6 +253,25 @@ To test in a Rails app, add to your Gemfile:
 gem 'rails_tipjar', path: '../path/to/rails_tipjar'
 ```
 
+## Icon Options
+
+The gem includes 5 built-in icons:
+- `:coffee` - Coffee cup (default)
+- `:heart` - Heart shape
+- `:star` - Star
+- `:dollar` - Dollar sign in circle
+- `:jar` - Tip jar with animated coin
+
+You can also provide a custom SVG string for complete customization.
+
+## Version History
+
+- **v0.3.0** - Made payment provider agnostic (works with any payment link service)
+- **v0.2.2** - Added color customization and pulse animation control
+- **v0.2.1** - Fixed button circular shape when icon only displayed
+- **v0.2.0** - Made gem fully self-contained with inline styles
+- **v0.1.0** - Initial release
+
 ## Troubleshooting
 
 ### Button not appearing
@@ -225,15 +280,15 @@ gem 'rails_tipjar', path: '../path/to/rails_tipjar'
 2. Verify Stimulus is working in your app
 3. Check browser console for JavaScript errors
 
-### Modal not opening
+### Modal not opening (modal mode only)
 
 1. Ensure Stimulus controller is registered
-2. Check that tipjar.css is being loaded
-3. Verify no z-index conflicts with your existing styles
+2. Verify no z-index conflicts with your existing styles
+3. Make sure `use_modal = true` if using single payment_link
 
 ### Payment links not working
 
-1. Ensure your Stripe Payment Links are active
+1. Ensure your payment links are active with your provider
 2. Check that URLs are correctly configured in initializer
 3. Test links directly in browser
 

data/app/assets/stylesheets/tipjar.css

@@ -23,7 +23,6 @@
   background-color: #2563eb;
   transform: scale(1.05);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  padding: 0.75rem 1rem;
 }
 
 .tipjar-button:focus {
@@ -144,30 +143,30 @@
     background-color: #1f2937;
     color: #f3f4f6;
   }
-  
+
   .tipjar-modal-header h3 {
     color: #f3f4f6;
   }
-  
+
   .tipjar-modal-header p {
     color: #9ca3af;
   }
-  
+
   .tipjar-amount-button {
     background-color: #374151;
     border-color: #4b5563;
     color: #f3f4f6;
   }
-  
+
   .tipjar-amount-button:hover {
     background-color: #4b5563;
     border-color: #60a5fa;
   }
-  
+
   .tipjar-modal-close {
     color: #9ca3af;
   }
-  
+
   .tipjar-modal-close:hover {
     color: #f3f4f6;
   }
@@ -181,21 +180,21 @@
     min-width: 2.5rem;
     min-height: 2.5rem;
   }
-  
+
   .tipjar-button:hover {
     padding: 0.625rem 0.875rem;
   }
-  
+
   .tipjar-button-icon {
     width: 1.25rem;
     height: 1.25rem;
   }
-  
+
   .tipjar-modal-content {
     margin: 1rem;
     max-width: calc(100% - 2rem);
   }
-  
+
   .tipjar-modal-amounts .grid {
     grid-template-columns: 1fr;
   }
@@ -220,4 +219,4 @@
 
 .top-4 {
   top: 1rem;
-}
+}

data/app/helpers/tipjar_helper.rb

@@ -1,30 +1,33 @@
 module TipjarHelper
   def tipjar_button(options = {})
     config = RailsTipjar.config
-    
+
     position = options[:position] || config.position
     custom_class = options[:class] || config.button_class
     z_index = options[:z_index] || config.z_index
-    
+
     # Inject CSS styles into the page once
     tipjar_styles + tipjar_button_html(config, position, custom_class, z_index)
   end
-  
+
   private
-  
+
   def tipjar_button_html(config, position, custom_class, z_index)
     # Simple direct link mode when payment_link is set
     if config.payment_link && !config.use_modal
       position_style = position_inline_styles(position)
-      button_style = "#{position_style} z-index: #{z_index}; display: flex; align-items: center; padding: 0.75rem 1rem; background-color: #3b82f6; color: white; border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; border: none; font-size: 0.875rem; font-weight: 500; text-decoration: none; animation: tipjar-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
-      
+      animation_style = config.pulse ? "animation: tipjar-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;" : ""
+      button_style = "#{position_style} z-index: #{z_index}; display: flex; align-items: center; padding: 0.75rem; background-color: #{config.color}; color: #{config.text_color}; border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; border: none; font-size: 0.875rem; font-weight: 500; text-decoration: none; #{animation_style}"
+
+      hover_color = darken_color(config.color)
+
       link_to config.payment_link,
               target: "_blank",
               rel: "noopener",
               class: "tipjar-button #{custom_class}",
               style: button_style,
-              onmouseover: "this.style.backgroundColor='#2563eb'; this.style.transform='scale(1.05)'; this.querySelector('.tipjar-button-text').style.maxWidth='200px'; this.querySelector('.tipjar-button-text').style.marginLeft='0.5rem';",
-              onmouseout: "this.style.backgroundColor='#3b82f6'; this.style.transform='scale(1)'; this.querySelector('.tipjar-button-text').style.maxWidth='0'; this.querySelector('.tipjar-button-text').style.marginLeft='0';" do
+              onmouseover: "this.style.backgroundColor='#{hover_color}'; this.style.transform='scale(1.05)'; this.querySelector('.tipjar-button-text').style.maxWidth='200px'; this.querySelector('.tipjar-button-text').style.marginLeft='0.5rem';",
+              onmouseout: "this.style.backgroundColor='#{config.color}'; this.style.transform='scale(1)'; this.querySelector('.tipjar-button-text').style.maxWidth='0'; this.querySelector('.tipjar-button-text').style.marginLeft='0';" do
         content_tag(:span, style: "display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;") do
           raw config.icon_svg
         end +
@@ -32,9 +35,9 @@ module TipjarHelper
       end
     else
       # Original modal mode - would need more work to be fully inline
-      content_tag :div, 
+      content_tag :div,
                   class: "tipjar-container",
-                  data: { 
+                  data: {
                     controller: "tipjar",
                     tipjar_payment_links_value: config.payment_links.to_json,
                     tipjar_theme_value: config.theme,
@@ -52,44 +55,21 @@ module TipjarHelper
       end
     end
   end
-  
+
   def tipjar_styles
     return "" if @tipjar_styles_injected
     @tipjar_styles_injected = true
-    
+
     content_tag :style do
       <<~CSS.html_safe
         @keyframes tipjar-pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.8; }
         }
-        
-        @keyframes tipjar-coin-drop {
-          0% {
-            transform: translateY(0) rotate(0deg);
-            opacity: 0;
-          }
-          20% {
-            opacity: 1;
-          }
-          80% {
-            transform: translateY(7px) rotate(180deg);
-            opacity: 1;
-          }
-          100% {
-            transform: translateY(9px) rotate(180deg);
-            opacity: 0;
-          }
-        }
-        
-        .tipjar-coin-animation {
-          animation: tipjar-coin-drop 2s ease-in-out infinite;
-          transform-origin: center;
-        }
       CSS
     end
   end
-  
+
   def position_inline_styles(position)
     case position
     when :bottom_right
@@ -104,18 +84,18 @@ module TipjarHelper
       "position: fixed; bottom: 1rem; right: 1rem;"
     end
   end
-  
+
   def tipjar_link(text = nil, options = {})
     config = RailsTipjar.config
     text ||= config.button_text
     amount = options[:amount] || :medium
-    
+
     link_url = if amount.is_a?(Symbol)
       config.payment_links[amount]
     else
       config.payment_links[:custom] || config.payment_links[:medium]
     end
-    
+
     link_options = {
       target: "_blank",
       rel: "noopener",
@@ -125,19 +105,19 @@ module TipjarHelper
         tipjar_analytics: config.analytics_enabled
       }
     }
-    
+
     link_to text, link_url, link_options.merge(options.except(:amount, :class))
   end
-  
+
   def tipjar_modal(options = {})
     config = RailsTipjar.config
-    
+
     render partial: "tipjar/modal", locals: {
       config: config,
       options: options
     }
   end
-  
+
   def config_position_classes(position)
     case position
     when :bottom_right
@@ -152,4 +132,22 @@ module TipjarHelper
       "fixed bottom-4 right-4"
     end
   end
-end
+
+  def darken_color(hex_color)
+    # Remove # if present
+    hex = hex_color.gsub('#', '')
+
+    # Convert to RGB
+    r = hex[0..1].to_i(16)
+    g = hex[2..3].to_i(16)
+    b = hex[4..5].to_i(16)
+
+    # Darken by 20%
+    r = (r * 0.8).to_i
+    g = (g * 0.8).to_i
+    b = (b * 0.8).to_i
+
+    # Convert back to hex
+    "#%02x%02x%02x" % [r, g, b]
+  end
+end

data/app/views/tipjar/_modal.html.erb

@@ -63,10 +63,10 @@
         Continue to Payment
       </button>
 
-      <!-- Powered by Stripe -->
+      <!-- Footer -->
       <div class="tipjar-modal-footer mt-4 text-center">
         <p class="text-xs text-gray-500">
-          Secure payment powered by Stripe
+          Secure payment processing
         </p>
       </div>
     </div>

data/lib/generators/tipjar/install/install_generator.rb

@@ -68,17 +68,21 @@ module Tipjar
         say "RailsTipjar has been successfully installed!", :green
         say "\n"
         say "Next steps:", :yellow
-        say "1. Create Stripe Payment Links at https://dashboard.stripe.com/payment-links", :yellow
+        say "1. Create payment links with your preferred provider (Stripe, PayPal, Ko-fi, etc.)", :yellow
         say "2. Configure your payment links in config/initializers/tipjar.rb", :yellow
         say "3. Add <%= tipjar_button %> to your layout file", :yellow
         say "\n"
         say "Example configuration:", :cyan
         say <<~CONFIG
           RailsTipjar.configure do |config|
+            # Simple mode - just one link:
+            config.payment_link = "https://your-payment-provider.com/tip"
+            
+            # Or modal mode with multiple amounts:
             config.payment_links = {
-              small: "https://buy.stripe.com/your-link-1",
-              medium: "https://buy.stripe.com/your-link-2",
-              large: "https://buy.stripe.com/your-link-3"
+              small: "https://your-provider.com/tip-5",
+              medium: "https://your-provider.com/tip-10",
+              large: "https://your-provider.com/tip-25"
             }
             config.position = :bottom_right
             config.icon = :coffee

data/lib/generators/tipjar/install/templates/tipjar.rb

@@ -1,16 +1,18 @@
 # frozen_string_literal: true
 
 RailsTipjar.configure do |config|
-  # Configure your Stripe Payment Links
-  # Create payment links at: https://dashboard.stripe.com/payment-links
+  # Configure your payment links
+  # Works with any payment provider: Stripe, PayPal, Ko-fi, Buy Me a Coffee, etc.
   # 
-  # You can create different links for different amounts, or use a single
-  # link that allows custom amounts
+  # Simple mode - just one payment link:
+  # config.payment_link = "https://your-payment-provider.com/your-link"
+  #
+  # Modal mode - multiple payment links for different amounts:
   config.payment_links = {
-    small: "https://buy.stripe.com/test_REPLACE_WITH_YOUR_LINK",
-    medium: "https://buy.stripe.com/test_REPLACE_WITH_YOUR_LINK",
-    large: "https://buy.stripe.com/test_REPLACE_WITH_YOUR_LINK",
-    custom: "https://buy.stripe.com/test_REPLACE_WITH_YOUR_LINK"
+    small: "https://REPLACE_WITH_YOUR_PAYMENT_LINK",
+    medium: "https://REPLACE_WITH_YOUR_PAYMENT_LINK",
+    large: "https://REPLACE_WITH_YOUR_PAYMENT_LINK",
+    custom: "https://REPLACE_WITH_YOUR_PAYMENT_LINK"
   }
   
   # Position of the tip jar button
@@ -50,4 +52,13 @@ RailsTipjar.configure do |config|
   # Tracks: button clicks, modal opens, amount selections, and successful tips
   # Works with Google Analytics 4 and Plausible out of the box
   config.analytics_enabled = false
+  
+  # Customize button colors (hex values)
+  # Default: blue background (#3b82f6) with white text (#ffffff)
+  # config.color = "#3b82f6"
+  # config.text_color = "#ffffff"
+  
+  # Enable pulsing animation on the button
+  # Default: false (no animation)
+  # config.pulse = true
 end

data/lib/rails_tipjar/configuration.rb

@@ -3,7 +3,7 @@ module RailsTipjar
     attr_accessor :payment_links, :position, :icon, :theme, :button_text,
                   :modal_title, :modal_description, :custom_amounts,
                   :button_class, :z_index, :analytics_enabled, :payment_link,
-                  :use_modal
+                  :use_modal, :color, :text_color, :pulse
     
     def initialize
       # Simple mode - just one link
@@ -27,6 +27,9 @@ module RailsTipjar
       @button_class = ""
       @z_index = 1000
       @analytics_enabled = false
+      @color = "#3b82f6" # Default blue color
+      @text_color = "#ffffff" # Default white text color
+      @pulse = false # Default no pulsing animation
     end
     
     def position_classes
@@ -48,7 +51,46 @@ module RailsTipjar
       case @icon
       when :coffee
         '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25v7.5c0 2.485 2.099 4.5 4.688 4.5 1.935 0 3.597-1.126 4.313-2.733.715 1.607 2.377 2.733 4.313 2.733 2.588 0 4.687-2.015 4.687-4.5v-7.5z" />
+          <defs>
+            <style>
+              @keyframes steam1 {
+                0% { opacity: 0; transform: translateY(0) translateX(0); }
+                20% { opacity: 0.8; }
+                50% { opacity: 0.6; transform: translateY(-3px) translateX(1px); }
+                80% { opacity: 0.3; }
+                100% { opacity: 0; transform: translateY(-8px) translateX(-1px); }
+              }
+              @keyframes steam2 {
+                0% { opacity: 0; transform: translateY(0) translateX(0); }
+                15% { opacity: 0.7; }
+                45% { opacity: 0.5; transform: translateY(-4px) translateX(-1px); }
+                75% { opacity: 0.2; }
+                100% { opacity: 0; transform: translateY(-9px) translateX(1px); }
+              }
+              @keyframes steam3 {
+                0% { opacity: 0; transform: translateY(0) translateX(0); }
+                25% { opacity: 0.6; }
+                55% { opacity: 0.4; transform: translateY(-3px) translateX(0.5px); }
+                85% { opacity: 0.1; }
+                100% { opacity: 0; transform: translateY(-7px) translateX(-0.5px); }
+              }
+              .steam1 { animation: steam1 3s ease-out infinite; }
+              .steam2 { animation: steam2 3s ease-out infinite 0.5s; }
+              .steam3 { animation: steam3 3s ease-out infinite 1s; }
+            </style>
+          </defs>
+          <!-- Steam wisps with wavy paths -->
+          <path class="steam1" d="M8 9c0.5-0.5 0.5-1 0-1.5s-0.5-1 0-1.5s0.5-1 0-1.5" stroke-linecap="round" fill="none" opacity="0"/>
+          <path class="steam2" d="M12 8.5c-0.3-0.4 -0.3-0.8 0-1.2s0.3-0.8 0-1.2s-0.3-0.8 0-1.2" stroke-linecap="round" fill="none" opacity="0"/>
+          <path class="steam3" d="M15.5 9c0.4-0.3 0.4-0.7 0-1s-0.4-0.7 0-1s0.4-0.7 0-1" stroke-linecap="round" fill="none" opacity="0"/>
+          <!-- Coffee cup body -->
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 10h12v7a3 3 0 01-3 3H9a3 3 0 01-3-3v-7z"/>
+          <!-- Cup handle -->
+          <path stroke-linecap="round" stroke-linejoin="round" d="M18 10h1.5a2.5 2.5 0 010 5H18"/>
+          <!-- Saucer -->
+          <path stroke-linecap="round" stroke-linejoin="round" d="M4 20h16"/>
+          <!-- Coffee surface detail -->
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h8" opacity="0.3"/>
         </svg>'
       when :heart
         '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
@@ -64,20 +106,61 @@ module RailsTipjar
         </svg>'
       when :jar
         '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+          <defs>
+            <style>
+              @keyframes tipjar-coin-drop-new {
+                0% {
+                  transform: translateY(0px);
+                  opacity: 0;
+                }
+                10% {
+                  opacity: 1;
+                  transform: translateY(2px);
+                }
+                30% {
+                  transform: translateY(6px);
+                }
+                50% {
+                  transform: translateY(10px);
+                  opacity: 1;
+                }
+                70% {
+                  transform: translateY(15.5px);
+                  opacity: 1;
+                }
+                75% {
+                  transform: translateY(16.3px);
+                  opacity: 1;
+                }
+                80% {
+                  transform: translateY(15.8px);
+                  opacity: 0.8;
+                }
+                100% {
+                  transform: translateY(16.3px);
+                  opacity: 0;
+                }
+              }
+              .tipjar-coin-drop-new {
+                animation: tipjar-coin-drop-new 2.5s ease-in-out infinite;
+              }
+            </style>
+          </defs>
           <!-- Jar lid -->
-          <rect x="8.5" y="3" width="7" height="1.5" rx="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+          <rect x="9.5" y="3" width="5" height="1" rx="0.25" stroke-linecap="round" stroke-linejoin="round"/>
           <!-- Jar threads/neck -->
-          <path stroke-linecap="round" stroke-linejoin="round" d="M9 4.5v1.5M15 4.5v1.5"/>
-          <!-- Jar body with taper -->
-          <path stroke-linecap="round" stroke-linejoin="round" d="M9 6c0 0 -1 0.5 -1 1.5v11.5a2 2 0 002 2h4a2 2 0 002-2V7.5c0-1 -1-1.5 -1-1.5"/>
-          <!-- Coins at bottom -->
+          <path stroke-linecap="round" stroke-linejoin="round" d="M10 4v0.8M14 4v0.8"/>
+          <!-- Jar body - much fatter with short taper -->
+          <path stroke-linecap="round" stroke-linejoin="round" d="M10 4.8h4M9 5.5c-1 0 -2 0.5 -2 1v12.5a2 2 0 002 2h6a2 2 0 002-2V6.5c0-0.5 -1-1 -2-1"/>
+          <!-- Coins at bottom - pile -->
           <ellipse cx="10.5" cy="18.5" rx="1.5" ry="0.5" stroke-linecap="round"/>
-          <ellipse cx="14" cy="18" rx="1.5" ry="0.5" stroke-linecap="round"/>
-          <ellipse cx="12" cy="17.5" rx="1.5" ry="0.5" stroke-linecap="round"/>
-          <!-- Falling coin -->
-          <g class="tipjar-coin-animation">
-            <ellipse cx="12" cy="10" rx="1.5" ry="0.5" stroke-linecap="round"/>
-            <path stroke-linecap="round" d="M12 10v1.5"/>
+          <ellipse cx="13.5" cy="18.3" rx="1.5" ry="0.5" stroke-linecap="round"/>
+          <ellipse cx="12" cy="17.8" rx="1.5" ry="0.5" stroke-linecap="round"/>
+          <ellipse cx="11" cy="19" rx="1.3" ry="0.4" stroke-linecap="round"/>
+          <ellipse cx="13" cy="19" rx="1.3" ry="0.4" stroke-linecap="round"/>
+          <!-- Falling coin - starts above jar outside -->
+          <g class="tipjar-coin-drop-new">
+            <ellipse cx="12" cy="1.5" rx="1.5" ry="0.5" stroke-linecap="round"/>
           </g>
         </svg>'
       else

data/lib/rails_tipjar/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsTipjar
-  VERSION = "0.2.1"
+  VERSION = "0.3.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_tipjar
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0
 platform: ruby
 authors:
 - Justin Paulson
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-09-11 00:00:00.000000000 Z
+date: 2025-09-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -38,8 +38,8 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '1.0'
-description: Easily add a customizable tip jar to any Rails application using Stripe
-  Payment Links
+description: Easily add a customizable tip jar to any Rails application. Works with
+  any payment provider.
 email:
 - justinapaulson@gmail.com
 executables: []
@@ -60,7 +60,6 @@ files:
 - lib/rails_tipjar/configuration.rb
 - lib/rails_tipjar/engine.rb
 - lib/rails_tipjar/version.rb
-- rails_tipjar-0.1.0.gem
 - sig/rails_tipjar.rbs
 homepage: https://github.com/justinpaulson/rails_tipjar
 licenses: []