engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

fix(checkout): move PayPal save toggle below button, footnote at bottom

Browse source 
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.
This commit is contained in:
russell@unturf.com 2026-05-13 13:25:20 -04:00
parent 62e65beff6
commit cea6c398cd
No known key found for this signature in database
2 changed files with 71 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

50
make_post_sell/static/css/common.css
View file

@ -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;

42
make_post_sell/templates/cart_checkout.j2
View file

@ -66,32 +66,26 @@
{% if paypal_enabled and request.shop and request.shop.is_paypal_ready and cart.requires_payment %}
<br/>
{# 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 #}
<div style="margin-bottom: 15px; padding: 12px; background-color: #f0f7ff; border-left: 4px solid: #0070ba; border-radius: 4px;">
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 20px;">✓</span>
<span style="font-weight: 500; color: #0070ba;">PayPal saved for quick checkout</span>
</div>
<small style="display: block; margin-top: 4px; color: #666;">
Click the PayPal button below to complete your purchase
</small>
</div>
{% else %}
{# User does not have PayPal saved - show checkbox #}
<div style="margin-bottom: 15px;">
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
<input type="checkbox" id="save-paypal-checkbox" name="save_paypal" value="true" style="cursor: pointer;">
<span>💾 Save PayPal for faster checkout next time</span>
</label>
<small style="display: block; margin-left: 24px; color: #666; margin-top: 4px;">
You can manage saved payment methods in your account settings
</small>
<div class="cart-paypal-saved-banner">
<span class="cart-paypal-saved-check">&#10003;</span>
<span class="cart-paypal-saved-text">PayPal saved for quick checkout</span>
</div>
{% endif %}
<div id="paypal-button-container"></div>
{# 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) %}
<div class="cart-paypal-save-row">
<label class="cart-paypal-save-label">
<input type="checkbox" id="save-paypal-checkbox" name="save_paypal" value="true" />
<span>💾 Save PayPal for faster checkout next time</span>
</label>
</div>
{% 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 %}
<p class="cart-paypal-manage-note">
You can manage saved payment methods in your <a href="/billing" class="shop-theme-link-color">account settings</a>.
</p>
{% endif %}
{% if pending_crypto_quotes %}
<div class="warning-banner-alt">
<h3>📋 Pending {{ pending_crypto_quotes[0].coin_type }} Payment</h3>