Shopify Cart Properties & OCR Integration
Budget: $8 – $15 USD
I need two connected fixes rolled out on my Shopify store so that prescription data (Rx) travels flawlessly from the Product-Detail Page right through to the order metafields.
First, tackle the PDP→Checkout issue. Every input field on the Lens Finder must sit inside a single /cart/add form and use name="properties[Key]" so nothing falls off on the way to checkout. The /cart/add.js call should fire only after the Rx image upload finishes, and the dynamic checkout buttons must stay disabled until every property is safely stored. When a shopper lands in checkout (or when I look at /cart.js) I expect every custom property to appear exactly as it was entered.
Second, bring OCR into the flow. After the customer uploads the prescription image, send it to S3, then call the OCR.space endpoint (/api/ocr/parse-rx). Parse, normalise, and pre-fill the Rx review form for the customer. Once they confirm, write those values to cart.attributes and line_item.properties, and finally sync them to order.metafields.renewlens.* after purchase. Keep the OCR key server-side only and automatically purge any temp files older than 30 days.
Acceptance-ready when:
• All properties survive from PDP to checkout and display identically in both /cart.js and the Shopify Admin order view.
• Dynamic checkout buttons stay disabled until the save completes.
• Rx image uploads trigger OCR, pre-populate the review form, and store confirmed data in cart, line item, and order metafields.
• No front-end exposure of the OCR API key, and S3 temp files older than 30 days are deleted automatically.
I’m comfortable reviewing a short dev store or theme preview link for validation before we push live.
First, tackle the PDP→Checkout issue. Every input field on the Lens Finder must sit inside a single /cart/add form and use name="properties[Key]" so nothing falls off on the way to checkout. The /cart/add.js call should fire only after the Rx image upload finishes, and the dynamic checkout buttons must stay disabled until every property is safely stored. When a shopper lands in checkout (or when I look at /cart.js) I expect every custom property to appear exactly as it was entered.
Second, bring OCR into the flow. After the customer uploads the prescription image, send it to S3, then call the OCR.space endpoint (/api/ocr/parse-rx). Parse, normalise, and pre-fill the Rx review form for the customer. Once they confirm, write those values to cart.attributes and line_item.properties, and finally sync them to order.metafields.renewlens.* after purchase. Keep the OCR key server-side only and automatically purge any temp files older than 30 days.
Acceptance-ready when:
• All properties survive from PDP to checkout and display identically in both /cart.js and the Shopify Admin order view.
• Dynamic checkout buttons stay disabled until the save completes.
• Rx image uploads trigger OCR, pre-populate the review form, and store confirmed data in cart, line item, and order metafields.
• No front-end exposure of the OCR API key, and S3 temp files older than 30 days are deleted automatically.
I’m comfortable reviewing a short dev store or theme preview link for validation before we push live.
Related categories:
PHP
JavaScript
Python
jQuery / Prototype
OCR
Shopify
Web Development
API Development