From cea6c398cdcebf3dca4fc04129ea9f085658b4d5 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Wed, 13 May 2026 13:25:20 -0400 Subject: [PATCH] fix(checkout): move PayPal save toggle below button, footnote at bottom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two reorderings on the cart checkout right column: 1. The "Save PayPal for faster checkout next time" checkbox now lives *under* the PayPal button instead of above it. The primary action (the yellow PayPal button) stays at the top of the panel; the secondary toggle (remember this method?) follows. Saved-PayPal buyers see a "PayPal saved for quick checkout" banner above the button instead. 2. The "You can manage saved payment methods…" copy was inline under the checkbox. It's now a footnote at the bottom of the right column, with "account settings" linking to /billing — the actual surface where the user can disconnect PayPal or manage cards. Lives outside the save-toggle branch so saved-PayPal users see it too (they may want to disconnect from there). Cleanup: - All inline styles on the saved-banner / save-checkbox replaced with tokenized .cart-paypal-saved-banner / .cart-paypal-save-row / .cart-paypal-save-label / .cart-paypal-saved-check / .cart-paypal-manage-note classes. Grid only, design tokens only. --- make_post_sell/static/css/common.css | 50 +++++++++++++++++++++++ make_post_sell/templates/cart_checkout.j2 | 42 +++++++++---------- 2 files changed, 71 insertions(+), 21 deletions(-) diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index e178ce9..f5facc2 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -3296,6 +3296,56 @@ img.crypto-button-icon { margin: 0; } +/* PayPal checkout: saved banner, save-for-next-time toggle, manage note. */ + +.cart-paypal-saved-banner { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + gap: var(--space-2, 8px); + background: var(--alert-info-bg, #dce8ff); + border-left: 4px solid #0070ba; + border-radius: var(--radius-md, 8px); + padding: var(--space-3, 12px); + margin-bottom: var(--space-3, 12px); +} + +.cart-paypal-saved-check { + font-size: var(--text-lg, 1.25rem); + color: #0070ba; +} + +.cart-paypal-saved-text { + font-weight: var(--weight-medium, 500); + color: #0070ba; +} + +.cart-paypal-save-row { + margin-top: var(--space-3, 12px); +} + +.cart-paypal-save-label { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + gap: var(--space-2, 8px); + cursor: pointer; + font-size: var(--text-sm, 0.875rem); + color: var(--text-body, #515151); +} + +.cart-paypal-save-label input[type="checkbox"] { + cursor: pointer; + margin: 0; +} + +.cart-paypal-manage-note { + margin: var(--space-5, 20px) 0 0 0; + font-size: var(--text-sm, 0.875rem); + color: var(--text-secondary, #666); + text-align: center; +} + @media (max-width: 640px) { .billing-actions { grid-template-columns: 1fr; diff --git a/make_post_sell/templates/cart_checkout.j2 b/make_post_sell/templates/cart_checkout.j2 index eebd02c..b634582 100644 --- a/make_post_sell/templates/cart_checkout.j2 +++ b/make_post_sell/templates/cart_checkout.j2 @@ -66,32 +66,26 @@ {% if paypal_enabled and request.shop and request.shop.is_paypal_ready and cart.requires_payment %}
- {# Saved PayPal status or save checkbox #} + {# Saved-PayPal banner shows above the button as confirmation. #} {% if paypal_user_shop and paypal_user_shop.has_saved_payment_method %} - {# User has PayPal saved #} -
-
- ✓ - PayPal saved for quick checkout -
- - Click the PayPal button below to complete your purchase - -
- {% else %} - {# User does not have PayPal saved - show checkbox #} -
- - - You can manage saved payment methods in your account settings - +
+ ✓ + PayPal saved for quick checkout
{% endif %}
+ + {# Save-for-next-time toggle lives *under* the PayPal button so the + primary action stays at the top. #} + {% if not (paypal_user_shop and paypal_user_shop.has_saved_payment_method) %} +
+ +
+ {% endif %} {# disable-funding=paylater,card hides the secondary "Pay Later" and "Debit or Credit Card" Smart Buttons so only the single yellow PayPal button renders. Credit-card checkout flows through Stripe. #} @@ -282,6 +276,12 @@ {% endif %} {# Show pending crypto quotes if user has any #} + {% if paypal_enabled and request.shop and request.shop.is_paypal_ready and cart.requires_payment %} +

+ You can manage saved payment methods in your account settings. +

+ {% endif %} + {% if pending_crypto_quotes %}

📋 Pending {{ pending_crypto_quotes[0].coin_type }} Payment