checkout: drop auth wall so payment form mounts on page load

The auth-first flow blocked Stripe Elements from initialising for any
visitor without an existing Supabase session. Users hit the checkout
page, saw "Sign in to continue", and could not get to a card field at
all. Restored the inline-JS path (HEAD before extraction broke it),
flipped payment-section visible by default, kept the sign-in panel
behind an explicit "Already have an account? Sign in" link.

Build pipeline: added supabase_get stub injection and -lssl/-lcrypto
linker flags (web_stubs.c uses EVP for the AES-256-GCM transport).
Without those the Docker build aborts at link time.
This commit is contained in:
Will Anderson
2026-05-01 23:26:12 -05:00
parent 00f2323c98
commit 702888d3aa
3 changed files with 53 additions and 18 deletions
+24 -13
View File
@@ -97,10 +97,10 @@ fn checkout_page(plan: String, pub_key: String) -> String {
<p class=\"label\" style=\"margin-bottom: 1.5rem; color: var(--navy);\">Create your account.</p>
<p class=\"checkout-auth-hint\" style=\"margin-bottom: 2rem;\">Create an account to reserve your free tier spot. You'll receive your download link and setup instructions at launch.</p>
" } else { "
<!-- Step 1: Social sign-in -->
<div id=\"auth-section\">
<p class=\"label\" style=\"margin-bottom: 1.25rem;\">Sign in to continue</p>
<p class=\"checkout-auth-hint\">Create your account or sign in. Your purchase will be linked to this account.</p>
<!-- Optional sign-in (collapsed by default - users can purchase without an account) -->
<div id=\"auth-section\" style=\"display:none;\">
<p class=\"label\" style=\"margin-bottom: 1.25rem;\">Sign in (optional)</p>
<p class=\"checkout-auth-hint\">Sign in to link this purchase to an existing account. Or skip and create one later - we'll match it to your email.</p>
<div class=\"checkout-social-btns\">
<button type=\"button\" class=\"checkout-social-btn\" id=\"btn-google\" onclick=\"signInWith('google')\">
@@ -136,9 +136,10 @@ fn checkout_page(plan: String, pub_key: String) -> String {
</div>
</div>
<!-- Step 2: Payment form (revealed after auth) -->
<div id=\"payment-section\" style=\"display:none;\">
<!-- Payment form (visible immediately - no auth wall) -->
<div id=\"payment-section\">
<div id=\"auth-badge\" style=\"display:none; margin-bottom: 1.5rem;\"></div>
<p class=\"checkout-auth-hint\" id=\"signin-prompt\" style=\"margin-bottom:1.25rem;font-size:.8125rem\">Already have an account? <a href=\"#\" onclick=\"document.getElementById('auth-section').style.display='';this.parentNode.style.display='none';return false;\" style=\"color:var(--navy);text-decoration:underline\">Sign in</a> to link your purchase.</p>
<!-- Founding Member attestation (only shown for founding plan) -->
" + (if is_founding { "
@@ -512,10 +513,13 @@ fn checkout_page(plan: String, pub_key: String) -> String {
}
function revealPaymentForm(user) {
document.getElementById('auth-section').style.display = 'none';
document.getElementById('payment-section').style.display = '';
// Hide optional auth section if it was shown
var auth = document.getElementById('auth-section');
if (auth) auth.style.display = 'none';
var payment = document.getElementById('payment-section');
if (payment) payment.style.display = '';
// Show auth badge if we have a user
// Show auth badge if we have a user, hide the inline 'sign in' prompt
if (user) {
var badge = document.getElementById('auth-badge');
var name = user.user_metadata && user.user_metadata.full_name
@@ -526,13 +530,20 @@ fn checkout_page(plan: String, pub_key: String) -> String {
+ 'Signed in as <strong>' + name + '</strong>'
+ '</div>';
badge.style.display = '';
var prompt = document.getElementById('signin-prompt');
if (prompt) prompt.style.display = 'none';
}
// Pre-fill email only (not name let user enter their own)
// Pre-fill email only (not name - let user enter their own)
if (user && user.email) {
var emailEl = document.getElementById('buyer-email');
if (emailEl) { emailEl.value = user.email; }
}
// Initialize Stripe Elements with this user's email (or empty if guest)
var userEmail = user ? (user.email || '') : '';
var userName = user ? ((user.user_metadata && user.user_metadata.full_name) || '') : '';
if (typeof initStripe === 'function') initStripe(userEmail, userName);
}
// Check if already signed in on load
@@ -573,7 +584,7 @@ fn checkout_page(plan: String, pub_key: String) -> String {
showAuthMessage(result.error.message || 'Sign-in failed. Please try again.', true);
btns.forEach(function(b) { b.disabled = false; });
}
// On success, browser redirects to OAuth provider no further action needed here.
// On success, browser redirects to OAuth provider - no further action needed here.
});
});
};
@@ -780,7 +791,7 @@ fn checkout_page(plan: String, pub_key: String) -> String {
return;
}
// Save founding member attestation before charging independent audit record
// Save founding member attestation before charging - independent audit record
if (attestCb) {
try {
await fetch('/api/attest', {
@@ -796,7 +807,7 @@ fn checkout_page(plan: String, pub_key: String) -> String {
})
});
} catch(e) {
// Non-blocking attestation log failure does not stop payment
// Non-blocking - attestation log failure does not stop payment
console.warn('attestation log failed', e);
}
}