Repair diagnostic

Checkout leak traced to plugin conflict.

This dossier shows what broke, why it mattered, what changed, and how the fixed checkout was verified before the repair was considered complete.

Executive readout

The store looked close enough to functioning that a busy owner could miss the problem. But the mobile checkout had three quiet leak signals: unreliable Place order behavior, unclear payment and shipping state, and a plugin script error tied to checkout UI behavior.

Buyer impact Trust drops at the exact moment they should pay.
Owner impact Lost orders look like ordinary abandonment.
Repair value Specific cause, safe fixes, and proof.

Evidence snapshot

Before Leaking mobile checkout before repair
Payment and shipping state feels unstable. Buyer confidence is low.
After Repaired mobile checkout after repair
Order summary, fields, and checkout state are readable and stable.

Issue log

Signal Impact Repair action
Cannot read properties of null Checkout helper runs too early Guard script and scope events
Shipping rows overflow on mobile Buyer sees an unstable payment step Rebuild as stacked touch targets
Generic validation feedback Buyer may not correct mistakes fast Add field-level messages and alert region

Changed files

checkout-helper.js

Scoped behavior to checkout context, added null checks, and removed fragile global state.

checkout.css

Stacked mobile checkout fields, cleaned shipping options, and stabilized order summary layout.

checkout-validation.js

Replaced vague error state with direct per-field feedback and a live alert region.

plugin-notes.md

Documented likely conflict, remaining checks, and staging-first rollout notes.

Diff excerpt

- document.querySelector('.coupon-toggle').addEventListener('click', toggleCoupon);
+ const couponToggle = document.querySelector('.coupon-toggle');
+ if (couponToggle) {
+   couponToggle.addEventListener('click', toggleCoupon);
+ }

- window.checkoutCouponOpen = !window.checkoutCouponOpen;
+ checkoutState.couponOpen = !checkoutState.couponOpen;

Acceptance checks

  • Checkout loads without the JavaScript error.
  • Mobile order summary and payment state remain readable under 430px.
  • Coupon toggle preserves state without polluted globals.
  • Validation messages tell the buyer exactly what to fix.
  • Before and after screenshots are attached to the repair pack.