iOS Safari Memory Management Clearing Form Fields Before tokenization — Phone/Job Number/Signature Missing ~5% of Transactions
Background / What We're Building
We have a custom payment form for a moving company (Safebound Moving & Storage) built on Webflow, processed through Authorize.net Accept.js, with a Netlify serverless function handling the backend. The form collects:
- Customer name, email, billing address, phone
- Job number (sent as Invoice Number to Authorize.net)
- Payment amount (variable — every job is different)
- Payment type (Deposit / Pickup / Delivery / Storage)
- Signature (stored via Cloudinary, sent via Web3Forms email)
Everything works correctly on desktop and Android. Payments always complete successfully on iOS Safari as well — the transaction itself is never the problem.
The Issue
On iOS Safari (iPhone/iPad), approximately 1–2 out of every 20–30 payments arrives with one or more of these three fields missing: phone number, job number, or signature. The payment clears, the customer is charged, but our records are incomplete.
The root cause appears to be iOS Safari's aggressive memory/state management when the Accept.js payment popup opens. The fields appear filled when the customer taps the pay button — iOS clears them after the popup launches, not before. So client-side validation passes, but by the time our serverless function reads the submitted data, those fields are empty.
What We've Already Tried
- Snapshot on button click (savedFormValues) — Saved all field values the moment the button was clicked, before the popup opened. iOS was clearing JS memory along with the DOM, so the snapshot was also empty. Some users got a "Session expired" error and couldn't pay at all — worse than missing fields.
- Live read + fallback to snapshot — Read fields live first, fall back to snapshot if empty. Didn't help because iOS cleared both simultaneously.
- Red border / required field validation + auto-scroll — Reduced frequency but didn't eliminate it. The fields look filled when the button is clicked; iOS clears them after the popup opens, so validation passes before the problem occurs.
- Changed phone field type from tel to plain text — No difference. iOS clears all field types equally.
- Authorize.net Hosted Payment Page — Doesn't support custom/variable amount entry. Not viable since every job has a unique payment amount.
- Inline card fields (no popup) — Eliminated the missing fields issue but caused complete payment failures on iOS Safari instead. Traded one problem for a worse one.
The Core Constraint
We need:
- Variable payment amounts entered by the customer
- Accept.js or equivalent Authorize.net integration
- Non-popup card entry that actually works on iOS Safari
The hosted payment page solves the iOS issue but breaks variable amounts. Inline fields break payments on iOS entirely.
Has anyone solved this pattern — persisting custom form field data through the Accept.js popup flow on iOS Safari? Specifically: is there a way to pass additional metadata (phone, job number) server-side at the point of transaction, or store it in a way iOS Safari can't wipe? Would using localStorage or sessionStorage before the popup opens be more iOS-resistant than JS variables? Any guidance appreciated.
