justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix checkout page UX: card first, shorter legal, trust signals, help link

Browse source 
- Card payment now default (was ACH — lower trust barrier for new customers)
- Removed +3% surcharge labels (reduces friction)
- Shortened authorization text to one line (was intimidating paragraph)
- Added trust signals below button: 256-bit SSL, Powered by Stripe, PCI compliant
- Added "Questions?" help box with phone + email below checkout
- Button text: "Continue to Secure Payment" with green glow shadow

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin 2026-05-18 20:57:06 -05:00
parent 54bdb9d480
commit 45e2172417
1 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

22
site/public/order/fcc-compliance/index.html
View file

@ -373,19 +373,27 @@ function renderServices() {
'<input type="email" id="pw-email" required placeholder="jane@company.com" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg outline-none"></div>' +
'<div><label class="block text-xs font-medium text-gray-600 mb-1">Phone</label>' +
'<input type="tel" id="pw-phone" placeholder="(555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg outline-none"></div>' +
'<div><label class="block text-xs font-medium text-gray-600 mb-1">Referral code</label>' +
'<div><label class="block text-xs font-medium text-gray-600 mb-1">Referral / discount code</label>' +
'<input type="text" id="pw-promo" placeholder="Optional" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg outline-none uppercase"></div>' +
'</div>' +
'<h4 class="text-sm font-semibold text-gray-900">Payment Method</h4>' +
'<div class="space-y-2">' +
'<label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50"><input type="radio" name="pw_pay" value="ach" checked><span class="text-sm font-medium text-gray-800">ACH Bank Transfer</span><span class="ml-auto text-xs text-green-600 font-medium">Recommended — No fee</span></label>' +
'<label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50"><input type="radio" name="pw_pay" value="card"><span class="text-sm font-medium text-gray-800">Credit / Debit Card</span><span class="ml-auto text-xs text-gray-400">+3%</span></label>' +
'<label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50"><input type="radio" name="pw_pay" value="paypal"><span class="text-sm font-medium text-gray-800">PayPal</span><span class="ml-auto text-xs text-gray-400">+3%</span></label>' +
'<label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50"><input type="radio" name="pw_pay" value="crypto"><span class="text-sm font-medium text-gray-800">Cryptocurrency</span><span class="ml-auto text-xs text-gray-400">No fee</span></label>' +
'<label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50"><input type="radio" name="pw_pay" value="card" checked><span class="text-sm font-medium text-gray-800">Credit / Debit Card</span><span class="ml-auto text-xs text-gray-400">Visa, MC, Amex, Discover</span></label>' +
'<label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50"><input type="radio" name="pw_pay" value="ach"><span class="text-sm font-medium text-gray-800">ACH Bank Transfer</span><span class="ml-auto text-xs text-green-600 font-medium">No processing fee</span></label>' +
'<label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50"><input type="radio" name="pw_pay" value="paypal"><span class="text-sm font-medium text-gray-800">PayPal</span></label>' +
'<label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50"><input type="radio" name="pw_pay" value="crypto"><span class="text-sm font-medium text-gray-800">Cryptocurrency</span><span class="ml-auto text-xs text-gray-400">BTC, ETH, USDC</span></label>' +
'</div>' +
'<label class="flex items-start gap-2 p-3 mt-2 rounded-lg border border-gray-200 cursor-pointer text-xs text-gray-600 leading-relaxed"><input type="checkbox" id="pw-engage" required class="mt-0.5 rounded border-gray-300 text-pw-600 focus:ring-pw-500"><span>I authorize Performance West to prepare and file on my behalf. <a href="/terms" target="_blank" class="text-pw-600 underline">Terms</a></span></label>' +
'<button type="submit" id="pw-submit" class="w-full py-3.5 rounded-lg bg-green-600 text-white font-bold text-base hover:bg-green-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed shadow-lg" style="box-shadow:0 4px 14px rgba(22,163,74,0.4)">Continue to Secure Payment \u2192</button>' +
'<div class="flex items-center justify-center gap-4 mt-2 text-xs text-gray-400">' +
'<span class="flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> 256-bit SSL</span>' +
'<span>\u2022 Powered by Stripe</span>' +
'<span>\u2022 PCI compliant</span>' +
'</div>' +
'<label class="flex items-start gap-2 p-3 mt-3 rounded-lg border border-gray-200 cursor-pointer text-xs text-gray-600 leading-relaxed"><input type="checkbox" id="pw-engage" required class="mt-0.5 rounded border-gray-300 text-pw-600 focus:ring-pw-500"><span>I authorize Performance West Inc. to prepare and submit regulatory filings on my behalf as described above. I understand Performance West provides compliance consulting services, not legal advice or legal representation. I confirm the information I provide is accurate to the best of my knowledge. <a href="/terms" target="_blank" class="text-pw-600 underline">Terms of Service</a></span></label>' +
'<button type="submit" id="pw-submit" class="w-full py-3 rounded-lg bg-green-600 text-white font-bold text-base hover:bg-green-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed">Continue to Payment</button>' +
'<p id="pw-err" class="text-sm text-red-700 mt-1" hidden></p>' +
'<div style="margin-top:12px;padding:12px 16px;background:#f0f4f8;border-radius:8px;text-align:center;">' +
'<p style="font-size:12px;color:#475569;margin:0;">Questions before ordering? Call <strong>(888) 411-0383</strong> or <a href="mailto:info@performancewest.net" style="color:#1e3a5f;text-decoration:underline;">email us</a></p>' +
'</div>' +
'</form>';
listEl.appendChild(actions);