Add PayPal as payment option on DOT order page

3-column grid: Card | PayPal | ACH. PayPal logo added to security
badges. Checkout API already supports paypal payment_method.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin 2026-05-29 15:45:20 -05:00
parent 1633522e95
commit 607412e182

View file

@ -353,8 +353,9 @@
</div>
<div id="pw-payment-section">
<h4 class="text-sm font-semibold text-gray-900 mb-2">Payment Method</h4>
<div class="grid grid-cols-2 gap-2">
<div class="grid grid-cols-3 gap-2">
<label class="flex items-center gap-2 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-orange-300 has-[:checked]:border-orange-500 has-[:checked]:bg-orange-50"><input type="radio" name="pw_pay" value="card" checked><span class="text-sm">Card</span></label>
<label class="flex items-center gap-2 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-orange-300 has-[:checked]:border-orange-500 has-[:checked]:bg-orange-50"><input type="radio" name="pw_pay" value="paypal"><span class="text-sm">PayPal</span></label>
<label class="flex items-center gap-2 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-orange-300 has-[:checked]:border-orange-500 has-[:checked]:bg-orange-50"><input type="radio" name="pw_pay" value="ach"><span class="text-sm">ACH</span></label>
</div>
</div>
@ -366,6 +367,8 @@
<div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;padding:10px 0;border-top:1px solid #f1f5f9">
<svg style="height:20px;color:#6366f1" viewBox="0 0 60 25" fill="currentColor"><text x="0" y="18" font-size="16" font-weight="700" font-family="Arial">stripe</text></svg>
<span style="font-size:11px;color:#94a3b8">|</span>
<span style="font-size:12px;font-weight:700;color:#003087">Pay<span style="color:#009cde">Pal</span></span>
<span style="font-size:11px;color:#94a3b8">|</span>
<span style="display:flex;align-items:center;gap:4px;font-size:11px;color:#64748b"><svg style="width:14px;height:14px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>256-bit SSL</span>
<span style="font-size:11px;color:#94a3b8">|</span>
<span style="display:flex;align-items:center;gap:4px;font-size:11px;color:#64748b"><svg style="width:14px;height:14px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>PCI Compliant</span>