paddle_rails 0.1.0

data/app/views/paddle_rails/dashboard/_change_plan.html.erb

@@ -0,0 +1,286 @@
+<!-- Plan Management Section -->
+<section class="mb-8 md:mb-12">
+  <div class="mb-6">
+    <h2 class="text-lg font-medium text-slate-900">Change plan</h2>
+    <p class="text-sm text-slate-500 mt-0.5">Upgrade, downgrade, or change your billing cycle</p>
+  </div>
+  
+  <% if @products.any? %>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
+      <% current_product = @subscription.subscription.product %>
+      <% current_product_id = current_product&.paddle_product_id %>
+      <% current_primary_price = current_product&.prices&.active&.order(:unit_price)&.first %>
+      <% current_price_amount = current_primary_price ? (current_primary_price.unit_price / 100.0) : 0 %>
+      <% current_subscription = @subscription.subscription %>
+      <% current_price_id = current_subscription.items.find_by(recurring: true)&.price&.paddle_price_id || current_subscription.items.first&.price&.paddle_price_id %>
+      <% highest_price = @products.map { |p| p.primary_price&.unit_price || 0 }.max %>
+
+      <% @products.each_with_index do |product, index| %>
+        <% next unless product.any_prices? %>
+        <% is_current = product.product.paddle_product_id == current_product_id %>
+        <% product_primary_price = product.primary_price %>
+        <% product_price_amount = product_primary_price ? (product_primary_price.unit_price / 100.0) : 0 %>
+        <% is_upgrade = product_price_amount > current_price_amount %>
+        <% is_downgrade = product_price_amount < current_price_amount %>
+        <% is_current_price = product_primary_price&.paddle_price_id == current_price_id %>
+        <% is_popular = !is_current && product_primary_price&.unit_price == highest_price %>
+
+        <div class="relative bg-white rounded-xl shadow-sm border-2 <%= is_current ? 'border-indigo-500 ring-1 ring-indigo-500/20' : 'border-slate-200/60 hover:border-indigo-300 hover:shadow-md' %> p-6 transition-all duration-200 flex flex-col" <%= "data-current-price-id=\"#{current_price_id}\"".html_safe if is_current %>>
+          
+          <!-- Badges -->
+          <div class="absolute -top-3 left-4 right-4 flex justify-between">
+            <% if is_current %>
+              <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-indigo-600 text-white shadow-sm">
+                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                </svg>
+                Current plan
+              </span>
+            <% elsif is_popular %>
+              <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-sm">
+                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                </svg>
+                Popular
+              </span>
+            <% else %>
+              <span></span>
+            <% end %>
+          </div>
+
+          <div class="mb-4 flex-grow pt-2">
+            <h3 class="text-lg font-semibold text-slate-900 mb-3"><%= product.name %></h3>
+            <div class="mb-1">
+              <span class="text-3xl font-bold text-slate-900"><%= product.primary_amount %></span>
+              <span class="text-slate-500 text-sm ml-1"><%= product.primary_currency %> / <%= product.primary_billing %></span>
+            </div>
+            <p class="text-xs text-slate-400 mb-4">excl. tax</p>
+            <% if product.description.present? %>
+              <p class="text-sm text-slate-600 leading-relaxed"><%= product.description %></p>
+            <% end %>
+
+            <!-- Billing options (monthly / yearly etc.) -->
+            <% if product.multiple_prices? %>
+              <div class="mt-4">
+                <label class="block text-xs font-medium text-slate-500 uppercase tracking-wider mb-1.5">Billing cycle</label>
+                <select
+                  class="block w-full rounded-lg border-slate-300 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 transition-colors"
+                  data-price-select="true"
+                >
+                  <% product.price_options.each_with_index do |(price_id, label), idx| %>
+                    <option
+                      value="<%= price_id %>"
+                      data-price-label="<%= label %>"
+                      <%= "selected" if (is_current && price_id == current_price_id) || (!is_current && idx.zero?) %>
+                    >
+                      <%= label %>
+                    </option>
+                  <% end %>
+                </select>
+              </div>
+            <% end %>
+          </div>
+
+          <div class="mt-auto pt-4">
+            <% if is_current && is_current_price && !product.multiple_prices? %>
+              <button class="w-full px-4 py-2.5 bg-slate-100 text-slate-500 text-sm font-medium rounded-lg cursor-not-allowed" disabled>
+                Current plan
+              </button>
+            <% else %>
+              <form action="<%= change_subscription_plan_path %>" method="post" data-form="true" id="change-plan-form-<%= product.product.paddle_product_id %>" class="w-full">
+                <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
+                <%= hidden_field_tag :paddle_price_id, (is_current && current_price_id) ? current_price_id : product.primary_price_id, data: { price_input: true } %>
+                <% if is_current && is_current_price %>
+                  <button type="button" class="w-full px-4 py-2.5 bg-slate-100 text-slate-500 text-sm font-medium rounded-lg cursor-not-allowed" disabled data-plan-change-button="true" data-product-name="<%= product.name %>" data-is-upgrade="<%= is_upgrade %>">
+                    Current plan
+                  </button>
+                <% else %>
+                  <% button_text = is_current ? "Change billing interval" : (is_upgrade ? "Upgrade" : "Downgrade") %>
+                  <% if is_upgrade %>
+                    <button type="button" class="w-full px-4 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-all duration-200 active:scale-[0.98] shadow-sm" data-plan-change-button="true" data-product-name="<%= product.name %>" data-is-upgrade="<%= is_upgrade %>">
+                      <%= button_text %>
+                    </button>
+                  <% else %>
+                    <button type="button" class="w-full px-4 py-2.5 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50 transition-all duration-200 active:scale-[0.98]" data-plan-change-button="true" data-product-name="<%= product.name %>" data-is-upgrade="<%= is_upgrade %>">
+                      <%= button_text %>
+                    </button>
+                  <% end %>
+                <% end %>
+              </form>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="bg-white rounded-xl shadow-sm border border-slate-200/60 p-12 text-center">
+      <div class="w-14 h-14 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-4">
+        <svg class="w-7 h-7 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+        </svg>
+      </div>
+      <h3 class="text-sm font-medium text-slate-900 mb-1">No plans available</h3>
+      <p class="text-sm text-slate-500">There are no subscription plans available at this time.</p>
+    </div>
+  <% end %>
+</section>
+
+<!-- Confirmation Modal -->
+<div id="change-plan-modal" class="hidden fixed inset-0 bg-slate-900/50 backdrop-blur-sm overflow-y-auto h-full w-full z-50 transition-opacity">
+  <div class="relative top-20 mx-auto p-6 max-w-md shadow-2xl rounded-2xl bg-white">
+    <div class="text-center">
+      <div class="flex items-center justify-center w-14 h-14 mx-auto bg-indigo-100 rounded-full mb-5">
+        <svg class="w-7 h-7 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+      <h3 class="text-xl font-semibold text-slate-900 mb-2" id="modal-title">Confirm plan change</h3>
+      <div class="mt-3 space-y-3">
+        <p class="text-sm text-slate-600" id="modal-message">
+          Are you sure you want to change your plan?
+        </p>
+        <div class="bg-slate-50 rounded-lg p-3">
+          <p class="text-xs text-slate-600" id="modal-proration">
+            Your payment will be prorated immediately based on your remaining billing period.
+          </p>
+        </div>
+        <p class="text-xs text-indigo-600 font-medium hidden" id="modal-credits">
+          Any amount already paid will be added as credits and automatically used for future payments.
+        </p>
+      </div>
+      <div class="flex items-center gap-3 mt-6">
+        <button id="modal-cancel" class="flex-1 px-4 py-2.5 bg-slate-100 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-200 transition-all duration-200 active:scale-[0.98]">
+          Cancel
+        </button>
+        <button id="modal-confirm" class="flex-1 px-4 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-all duration-200 active:scale-[0.98] shadow-sm">
+          Confirm change
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var modal = document.getElementById("change-plan-modal");
+    var confirmButton = document.getElementById("modal-confirm");
+    var cancelButton = document.getElementById("modal-cancel");
+    var modalTitle = document.getElementById("modal-title");
+    var modalMessage = document.getElementById("modal-message");
+    var modalProration = document.getElementById("modal-proration");
+    var modalCredits = document.getElementById("modal-credits");
+    var pendingForm = null;
+
+    // Initialize button states for current products with multiple prices
+    document.querySelectorAll("[data-current-price-id]").forEach(function(card) {
+      var currentPriceId = card.dataset.currentPriceId;
+      if (!currentPriceId) return;
+
+      var select = card.querySelector("[data-price-select]");
+      var button = card.querySelector("[data-plan-change-button]");
+      var hiddenField = card.querySelector("[data-price-input]");
+
+      if (select && button && hiddenField) {
+        var selectedPriceId = select.value;
+        if (selectedPriceId === currentPriceId) {
+          button.disabled = true;
+          button.textContent = "Current plan";
+          button.className = "w-full px-4 py-2.5 bg-slate-100 text-slate-500 text-sm font-medium rounded-lg cursor-not-allowed";
+        }
+      }
+    });
+
+    // Handle price select changes
+    document.querySelectorAll("[data-price-select]").forEach(function(select) {
+      select.addEventListener("change", function(event) {
+        var option = select.selectedOptions[0];
+        if (!option) return;
+
+        var card = select.closest("div[class*='bg-white']");
+        if (!card) return;
+
+        var hiddenField = card.querySelector("[data-price-input]");
+        var button = card.querySelector("[data-plan-change-button]");
+        var currentPriceId = card.dataset.currentPriceId;
+        var selectedPriceId = option.value;
+
+        if (hiddenField) hiddenField.value = selectedPriceId;
+
+        // If this is the current product, update button state based on selected price
+        if (currentPriceId && button) {
+          if (selectedPriceId === currentPriceId) {
+            button.disabled = true;
+            button.textContent = "Current plan";
+            button.className = "w-full px-4 py-2.5 bg-slate-100 text-slate-500 text-sm font-medium rounded-lg cursor-not-allowed";
+          } else {
+            button.disabled = false;
+            button.textContent = "Change billing interval";
+            button.className = "w-full px-4 py-2.5 border border-slate-300 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-50 transition-all duration-200 active:scale-[0.98]";
+          }
+        }
+      });
+    });
+
+    // Handle plan change button clicks
+    document.querySelectorAll("[data-plan-change-button]").forEach(function(button) {
+      button.addEventListener("click", function(event) {
+        event.preventDefault();
+        
+        var form = button.closest("form[data-form]");
+        if (!form) return;
+
+        var productName = button.dataset.productName;
+        var isUpgrade = button.dataset.isUpgrade === "true";
+        var card = button.closest("div[class*='bg-white']");
+        var currentPriceId = card ? card.dataset.currentPriceId : null;
+        var form = button.closest("form[data-form]");
+        var hiddenField = form ? form.querySelector("[data-price-input]") : null;
+        var selectedPriceId = hiddenField ? hiddenField.value : null;
+        var isChangingBilling = currentPriceId && selectedPriceId && selectedPriceId !== currentPriceId;
+        
+        var action;
+        if (isChangingBilling) {
+          action = "change the billing cycle for";
+        } else {
+          action = isUpgrade ? "upgrade to" : "downgrade to";
+        }
+
+        modalTitle.textContent = "Confirm plan change";
+        modalMessage.textContent = "Are you sure you want to " + action + " " + productName + "?";
+        
+        // Show credits message for downgrades, hide for upgrades
+        if (isUpgrade) {
+          modalCredits.classList.add("hidden");
+          modalProration.textContent = "Your payment will be prorated immediately based on your remaining billing period.";
+        } else {
+          modalCredits.classList.remove("hidden");
+          modalProration.textContent = "Your payment will be prorated immediately based on your remaining billing period.";
+        }
+        
+        pendingForm = form;
+        modal.classList.remove("hidden");
+      });
+    });
+
+    // Handle modal confirmation
+    confirmButton.addEventListener("click", function() {
+      if (pendingForm) {
+        pendingForm.submit();
+      }
+    });
+
+    // Handle modal cancellation
+    cancelButton.addEventListener("click", function() {
+      modal.classList.add("hidden");
+      pendingForm = null;
+    });
+
+    // Close modal when clicking outside
+    modal.addEventListener("click", function(event) {
+      if (event.target === modal) {
+        modal.classList.add("hidden");
+        pendingForm = null;
+      }
+    });
+  });
+</script>

data/app/views/paddle_rails/dashboard/_current_subscription.html.erb

@@ -0,0 +1,66 @@
+<!-- Current Subscription Section -->
+<section class="mb-8 md:mb-12">
+  <div class="mb-6">
+    <h2 class="text-lg font-medium text-slate-900">Current subscription</h2>
+    <p class="text-sm text-slate-500 mt-0.5">Manage your active plan and billing cycle</p>
+  </div>
+  
+  <div class="bg-white rounded-xl shadow-sm border border-slate-200/60 p-6 hover:shadow-md transition-shadow duration-200">
+    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-4 gap-4">
+      <div class="flex items-start gap-4">
+        <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center flex-shrink-0 shadow-sm">
+          <span class="text-white font-medium text-lg"><%= @subscription.product_initial %></span>
+        </div>
+        <div>
+          <h3 class="text-lg font-medium text-slate-900 mb-1"><%= @subscription.product_name %></h3>
+          <% if @subscription.has_price? %>
+            <p class="text-slate-600 text-sm">
+              <span class="font-medium text-slate-900"><%= number_to_currency(@subscription.amount, unit: @subscription.currency_symbol) %></span>
+              <span class="text-slate-400 mx-1">·</span>
+              <span><%= @subscription.currency %></span>
+              <span class="text-slate-400 mx-1">·</span>
+              <span>Billed per <%= @subscription.interval_label %></span>
+              <span class="text-slate-400 mx-1">·</span>
+              <span class="text-slate-400">excl. tax</span>
+            </p>
+          <% else %>
+            <p class="text-slate-600 text-sm"><%= @subscription.price_display_text %></p>
+          <% end %>
+        </div>
+      </div>
+      <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 self-start sm:self-auto">
+        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
+        <%= @subscription.status_label %>
+      </span>
+    </div>
+    
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-5 border-t border-slate-100 mt-5">
+      <div class="bg-slate-50/50 rounded-lg p-4">
+        <p class="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1"><%= @subscription.billing_date_title %></p>
+        <div class="flex items-center gap-3">
+          <p class="text-sm font-medium text-slate-900"><%= @subscription.billing_date %></p>
+          <% if @subscription.subscription.scheduled_for_cancellation? %>
+            <%= button_to "Don't cancel", 
+                paddle_rails.revoke_subscription_cancellation_path, 
+                method: :post,
+                class: "text-xs font-medium text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-2.5 py-1 rounded-md transition-all duration-200 active:scale-[0.98]" %>
+          <% elsif @subscription.subscription.active? && !@subscription.subscription.canceled? %>
+            <%= button_to "Cancel subscription", 
+                paddle_rails.cancel_subscription_path, 
+                method: :post,
+                data: { turbo_confirm: "Are you sure you want to cancel your subscription?" },
+                class: "text-xs font-medium text-red-600 hover:text-red-700 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-md transition-all duration-200 active:scale-[0.98]" %>
+          <% end %>
+        </div>
+      </div>
+      <div class="bg-slate-50/50 rounded-lg p-4">
+        <p class="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">Amount</p>
+        <p class="text-sm font-medium text-slate-900">
+          <%= @subscription.has_price? ? number_to_currency(@subscription.amount, unit: @subscription.currency_symbol) : "N/A" %>
+          <span class="text-slate-500 font-normal">per <%= @subscription.interval_label %></span>
+          <span class="text-slate-400 font-normal text-xs ml-1">(excl. tax)</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</section>

data/app/views/paddle_rails/dashboard/_payment_history.html.erb

@@ -0,0 +1,79 @@
+<!-- Payment History Section -->
+<section class="mb-8 md:mb-12">
+  <div class="mb-6">
+    <h2 class="text-lg font-medium text-slate-900">Payment history</h2>
+    <p class="text-sm text-slate-500 mt-0.5">View and download your past invoices</p>
+  </div>
+  
+  <% if @payments.any? %>
+    <div class="bg-white rounded-xl shadow-sm border border-slate-200/60 overflow-hidden">
+      <div class="overflow-x-auto">
+        <table class="w-full min-w-[640px]">
+          <thead class="bg-slate-50/80 border-b border-slate-200/60">
+            <tr>
+              <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Date</th>
+              <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Description</th>
+              <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Amount</th>
+              <th class="px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Status</th>
+              <th class="px-6 py-4 text-right text-xs font-semibold text-slate-600 uppercase tracking-wider">Invoice</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-slate-100">
+            <% @payments.each do |payment| %>
+              <tr class="hover:bg-slate-50/50 transition-colors duration-150">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span class="text-sm font-medium text-slate-900"><%= payment.date %></span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span class="text-sm text-slate-600"><%= payment.description %></span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span class="text-sm font-semibold <%= payment.credit? ? 'text-amber-600' : 'text-slate-900' %>">
+                    <%= payment.amount %>
+                  </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium <%= payment.status_badge_class %>">
+                    <span class="w-1.5 h-1.5 rounded-full <%= payment.credit? ? 'bg-amber-500' : (payment.status == 'completed' ? 'bg-emerald-500' : 'bg-slate-400') %>"></span>
+                    <%= payment.status_label %>
+                  </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right">
+                  <% if payment.has_invoice? %>
+                    <div class="inline-flex items-center gap-3">
+                      <a href="<%= view_payment_invoice_path(payment.id) %>" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                        </svg>
+                        View
+                      </a>
+                      <a href="<%= download_payment_invoice_path(payment.id) %>" class="inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                        PDF
+                      </a>
+                    </div>
+                  <% else %>
+                    <span class="text-sm text-slate-400">—</span>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  <% else %>
+    <div class="bg-white rounded-xl shadow-sm border border-slate-200/60 p-12 text-center">
+      <div class="w-14 h-14 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-4">
+        <svg class="w-7 h-7 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+      </div>
+      <h3 class="text-sm font-medium text-slate-900 mb-1">No payment history</h3>
+      <p class="text-sm text-slate-500">Your payment history will appear here once you have completed transactions.</p>
+    </div>
+  <% end %>
+</section>

data/app/views/paddle_rails/dashboard/_payment_method.html.erb

@@ -0,0 +1,48 @@
+<!-- Payment Method Section -->
+<section class="mb-8 md:mb-12">
+  <div class="mb-6">
+    <h2 class="text-lg font-medium text-slate-900">Payment method</h2>
+    <p class="text-sm text-slate-500 mt-0.5">Your saved payment details for automatic billing</p>
+  </div>
+  
+  <div class="bg-white rounded-xl shadow-sm border border-slate-200/60 p-6 hover:shadow-md transition-shadow duration-200">
+    <% if @subscription.has_payment_method? %>
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div class="flex items-center gap-4">
+          <div class="w-14 h-10 rounded-lg bg-slate-50 border border-slate-200 flex items-center justify-center">
+            <%= payment_method_icon(@subscription.card_brand) %>
+          </div>
+          <div>
+            <div class="flex items-center gap-2">
+              <p class="font-medium text-slate-900">
+                <%= @subscription.card_brand %> •••• <%= @subscription.card_last4 %>
+              </p>
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20">
+                Default
+              </span>
+            </div>
+            <% if @subscription.card_expiration %>
+              <p class="text-sm text-slate-500 mt-0.5">Expires <%= @subscription.card_expiration %></p>
+            <% end %>
+          </div>
+        </div>
+        <%= button_to "Update card details", 
+            paddle_rails.update_payment_method_path, 
+            method: :post,
+            class: "px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-all duration-200 active:scale-[0.98] shadow-sm w-full sm:w-auto" %>
+      </div>
+    <% else %>
+      <div class="flex flex-col items-center text-center py-6">
+        <div class="w-14 h-14 rounded-full bg-slate-100 flex items-center justify-center mb-4">
+          <svg class="w-7 h-7 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+          </svg>
+        </div>
+        <h3 class="text-sm font-medium text-slate-900 mb-1">No payment method saved</h3>
+        <p class="text-sm text-slate-500 max-w-sm">
+          A payment method will be added automatically during your next checkout.
+        </p>
+      </div>
+    <% end %>
+  </div>
+</section>

data/app/views/paddle_rails/dashboard/show.html.erb

@@ -0,0 +1,47 @@
+<div class="p-4 md:p-8 max-w-6xl mx-auto">
+  <%= render "current_subscription" %>
+  <%= render "payment_method" %>
+  <%= render "change_plan" %>
+  <%= render "payment_history" %>
+
+  <!-- Trust Footer -->
+  <footer class="mt-8 pt-8 border-t border-slate-200/60">
+    <div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500">
+      <div class="flex items-center gap-6">
+        <a href="#" class="hover:text-slate-700 transition-colors">Terms of service</a>
+        <a href="#" class="hover:text-slate-700 transition-colors">Privacy policy</a>
+        <a href="#" class="hover:text-slate-700 transition-colors">Contact support</a>
+      </div>
+      <div class="flex items-center gap-4">
+        <span class="flex items-center gap-1.5">
+          <svg class="w-4 h-4 text-emerald-600" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+          </svg>
+          PCI DSS compliant
+        </span>
+        <span class="flex items-center gap-1.5">
+          <svg class="w-4 h-4 text-emerald-600" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
+          </svg>
+          Secure payments
+        </span>
+      </div>
+    </div>
+  </footer>
+</div>
+
+<!-- script loaded here to make sure it's loaded after the page is rendered -->
+<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
+<script type="text/javascript">
+  Paddle.Environment.set("<%= PaddleRails.configuration.environment || 'sandbox' %>");
+  Paddle.Initialize({
+    token: "<%= PaddleRails.configuration.public_token %>",
+    eventCallback: function(data) {
+      if (data.name == "checkout.completed") {
+        setTimeout(function() {
+          window.location.href = "<%= url_for %>";
+        }, 2000);
+      };
+    }
+  });
+</script>

data/app/views/paddle_rails/onboarding/show.html.erb

@@ -0,0 +1,100 @@
+<div class="min-h-screen flex items-center justify-center p-4 md:p-8">
+  <div class="w-full max-w-5xl">
+    <!-- Header -->
+    <div class="text-center mb-12">
+      <h1 class="text-3xl md:text-4xl lg:text-5xl font-semibold tracking-tight text-gray-900 mb-4">
+        Choose your plan
+      </h1>
+      <p class="text-gray-600 text-lg">Select the subscription plan that works best for you</p>
+    </div>
+
+    <!-- Products Grid -->
+    <% if @products.any? %>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
+        <% @products.each do |product| %>
+          <% next unless product.any_prices? %>
+
+          <div
+            class="bg-white border border-gray-200 rounded-2xl p-6 md:p-7 flex flex-col justify-between"
+            data-plan-card="true"
+          >
+            <div class="flex flex-col gap-4">
+              <!-- Product header -->
+              <div class="flex items-start justify-between">
+                <div>
+                  <h3 class="text-lg font-normal text-gray-900 mb-1"><%= product.name %></h3>
+                  <p class="text-sm text-gray-500">
+                    <span class="font-light text-2xl text-gray-900"><%= product.primary_amount %></span>
+                    <span class="text-base text-gray-900 ml-0.5"><%= product.primary_currency %></span>
+                    <span class="text-sm text-gray-600 mx-1">/</span>
+                    <span class="text-sm text-gray-600"><%= product.primary_billing %></span>
+                  </p>
+                </div>
+              </div>
+
+              <!-- Placeholder feature list -->
+              <ul class="mt-2 space-y-1 text-sm text-gray-600">
+                <li>Includes <span class="font-medium">50,000</span> units per month (placeholder)</li>
+                <li>Priority processing and email support</li>
+                <li>Clean analytics and usage insights</li>
+              </ul>
+
+              <!-- Billing options (monthly / yearly etc.) -->
+              <% if product.multiple_prices? %>
+                <div class="mt-4">
+                  <label class="block text-xs font-medium text-gray-500 mb-1">Billing</label>
+                  <select
+                    class="block w-full rounded-lg border-gray-300 text-sm text-gray-900 focus:border-purple-500 focus:ring-purple-500"
+                    data-price-select="true"
+                  >
+                    <% product.price_options.each_with_index do |(price_id, label), idx| %>
+                      <option
+                        value="<%= price_id %>"
+                        data-price-label="<%= label %>"
+                        <%= "selected" if idx.zero? %>
+                      >
+                        <%= label %>
+                      </option>
+                    <% end %>
+                  </select>
+                </div>
+              <% end %>
+            </div>
+
+            <!-- Action button -->
+            <div class="mt-6">
+              <%= form_with url: onboarding_checkout_path, method: :post, local: true do |f| %>
+                <%= f.hidden_field :paddle_price_id, value: product.primary_price_id, data: { price_input: true } %>
+                <%= f.submit product.primary_label, class: "w-full px-4 py-2.5 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-sm font-medium rounded-lg hover:from-purple-600 hover:to-pink-600 transition-colors shadow-sm", data: { price_button: true } %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <div class="text-center py-12">
+        <p class="text-gray-600">No subscription plans available at this time.</p>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    document.querySelectorAll("[data-price-select]").forEach(function(select) {
+      select.addEventListener("change", function(event) {
+        var option = select.selectedOptions[0];
+        if (!option) return;
+
+        var card = select.closest("[data-plan-card]");
+        if (!card) return;
+
+        var hiddenField = card.querySelector("[data-price-input]");
+        var button = card.querySelector("[data-price-button]");
+
+        if (hiddenField) hiddenField.value = option.value;
+        if (button && option.dataset.priceLabel) button.value = option.dataset.priceLabel;
+      });
+    });
+  });
+</script>