Improve shop settings crypto wallet and Stripe configuration UX

- Move crypto wallet verification disclaimer to top of section for better visibility
- Remove redundant Dogecoin address display message
- Ensure crypto wallet checkbox is always unchecked on page refresh
- Update disclaimer to use plural form for multiple wallet addresses
- Fix checkbox label alignment to display inline
- Update Stripe toggle label to be more descriptive
- Add JavaScript progressive enhancement for Stripe API key fields
- Ensure both crypto and Stripe forms are hidden by default with graceful degradation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Russell Ballestrini 2025-10-04 12:26:24 -04:00
parent c218ec7073
commit fd3ffc26f0
2 changed files with 60 additions and 25 deletions

View file

@ -133,7 +133,7 @@
<br />
<input type="checkbox" id="toggle-stripe" style="">
<label for="toggle-stripe" style="display: inline;" >show values</label>
<label for="toggle-stripe" style="display: inline;" >Show Public & Secret Stripe API Keys</label>
<div class="hidden-control">
@ -261,7 +261,23 @@
</form>
<hr />
<input type="checkbox" id="show-crypto-wallets" onchange="toggleCryptoWallets()">
<label for="show-crypto-wallets" style="display: inline;">Show wallet configuration forms</label>
<br />
<br />
<small style="color: #666;">
Note: We cannot verify you control these addresses. Please double-check they're correct!
Consider sending a small test amount from another wallet to verify.
</small>
<br />
<br />
<div id="crypto-wallets" style="display: block;">
<h4>Monero (XMR) Configuration</h4>
<form method="post" action="/s/{{ request.shop.id }}/crypto-processor/XMR" onsubmit="submit.disabled = true; return true;">
@ -289,11 +305,6 @@
<br />
<br />
<small style="color: green;">✓ Monero wallet configured and ready to accept payments</small>
<br />
<small style="color: #666;">
Note: We cannot verify you control this address. Please double-check it's correct!
Consider sending a small test amount from another wallet to verify.
</small>
{% else %}
<br />
<br />
@ -324,17 +335,8 @@
<br />
</form>
</section>
</section>
<br />
<br />
{% endif %}
{% if request.dogecoin_enabled %}
<section class="one-column">
<section class="shop-settings well">
<hr />
<h4>Dogecoin (DOGE) Configuration 🐕</h4>
@ -362,12 +364,6 @@
<br />
<br />
<small style="color: green;">✓ Dogecoin wallet configured and ready to accept payments</small>
<br />
<br />
<small>
Your shop can now accept Dogecoin payments! Funds will be automatically swept to:<br/>
<code>{{ doge_processor.sweep_to_address }}</code>
</small>
{% else %}
<br />
<br />
@ -403,6 +399,8 @@
<br />
</form>
</div>
</section>
</section>
@ -410,8 +408,6 @@
<br />
<br />
{% endif %}
<br />
<br />
<section class="one-column">
@ -603,4 +599,38 @@ Existing sales honored for download buy purchasers.
</section>
<script>
// Hide crypto wallets and Stripe keys by default when JavaScript is enabled
document.addEventListener('DOMContentLoaded', function() {
const cryptoCheckbox = document.getElementById('show-crypto-wallets');
const cryptoWallets = document.getElementById('crypto-wallets');
// Always uncheck the checkbox on page load/refresh
cryptoCheckbox.checked = false;
// Hide the wallets section
cryptoWallets.style.display = 'none';
// Handle Stripe toggle - hide by default and uncheck
const stripeToggle = document.getElementById('toggle-stripe');
const stripeControls = document.querySelector('#toggle-stripe ~ .hidden-control');
if (stripeToggle && stripeControls) {
stripeToggle.checked = false;
stripeControls.style.display = 'none';
}
});
function toggleCryptoWallets() {
const checkbox = document.getElementById('show-crypto-wallets');
const wallets = document.getElementById('crypto-wallets');
if (checkbox.checked) {
wallets.style.display = 'block';
} else {
wallets.style.display = 'none';
}
}
</script>
{%- endblock -%}

View file

@ -558,6 +558,11 @@ def shop_settings(request):
shop.stripe_enabled = False
request.session.flash(("Stripe payments disabled", "success"))
# Handle re-enable action - if stripe is disabled and we're submitting stripe settings
elif not shop.stripe_enabled:
shop.stripe_enabled = True
request.session.flash(("Stripe payments re-enabled", "success"))
elif stripe_public_api_key != shop.stripe_public_api_key:
if stripe_public_api_key.startswith("pk_"):
if not stripe_test_mode and "_test_" in stripe_public_api_key: