30 ChatGPT Prompts That Build Checkout Pages

You are a checkout UX writer who keeps guest checkout short and honest. <context> Build a complete checkout form page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Contact, shipping, fake payment UI. No real charges. Not a landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Cart summary (items, prices): [CART ITEMS] - Fields I truly need: [EMAIL, NAME, ADDRESS, CITY, POSTAL, COUNTRY] - Currency: [CURRENCY] - Create-account optional: [OPTIONAL CHECKBOX / HIDE] - Privacy line: [PRIVACY] </inputs> <task> Build the page: two-column desktop (form left, order summary right), stacked on mobile; guest email first; address fields from my list only; optional account checkbox only if I asked; fake card block labeled Demo only, no live charge with name, number, expiry, CVC that validate format locally; Place order button that simulates success on this file (in-page thank-you state or jump). Show a Demo checkout banner. Totals from constants. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Accessible labels, autocomplete hints, required markers. - Never POST a card to a server or a payment SDK. No Stripe, PayPal, or live keys. - Do not invent fees. Mark gaps as [VERIFY]. - No marketing hero. No plan comparison. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then say which field to cut first if the form still feels long.

You are a fulfillment-aware checkout designer who puts address and ship method on one screen. <context> Build a complete checkout page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Address, shipping radios, fake pay later on the same file or a second step. No real charges. Not a landing page. Not a pricing page. </context> <inputs> - Store: [STORE] - Cart items: [CART ITEMS] - Ship-to countries I support: [COUNTRIES] - Methods with price and days: [SHIP METHODS] - Currency: [CURRENCY] - Free-ship rule if any: [FREE OVER OR NONE] </inputs> <task> Build the page: address form; shipping method radios from [SHIP METHODS] only, each with price and delivery window; order summary that adds the selected ship price to the total; a Continue to payment button that reveals a fake card block on the same page. Recompute from labeled constants. If a country is outside [COUNTRIES], show a [VERIFY] cannot-ship note. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not invent carriers or overnight prices. - Accessible radios and labels. Mobile-first. - Fake payment only. No live charges. - No lorem ipsum. No plan tiers. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then show the total formula when shipping changes.

You are a payments-UI designer who builds card forms that look real and never charge. <context> Build a complete payment checkout page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Fake card UI only. No gateways. Not a landing page. Not a /pricing page. </context> <inputs> - Product or store: [PRODUCT] - Amount due: [AMOUNT] - Currency: [CURRENCY] - Order summary lines: [CART ITEMS] - Demo card hint I allow: [HINT LIKE 4242 OR NONE] - Success and fail demo toggles: [BOTH] </inputs> <task> Build the page: order summary; a card form (name, number, expiry, CVC, optional ZIP) with a persistent Demo only, no live charge banner; client-side format checks only; a Simulate payment button; a small demo control that routes to success or decline so I can screenshot both. Never talk to a network. Store [AMOUNT] in a labeled constant. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - No Stripe.js, no iframes to processors, no real PAN storage. - Accessible fields. Do not claim PCI certified. - Do not invent the amount. Mark gaps as [VERIFY]. - Mobile-first, no lorem ipsum. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then list the demo states a designer should screenshot.

You are a checkout designer who shows express-pay choices as demo buttons, never live wallets. <context> Build a complete checkout page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Express-pay row, then fake card. No real charges. Not a landing page. Not a pricing page. </context> <inputs> - Store: [STORE] - Amount: [AMOUNT] - Wallets I want shown: [APPLE PAY / GOOGLE PAY / PAYPAL] - Cart summary: [CART ITEMS] - Currency: [CURRENCY] - Card fallback label: [OR PAY WITH CARD] </inputs> <task> Build the page: order summary; a Demo wallets band with buttons for only the wallets I listed, each labeled Simulate; clicking a wallet opens an in-page mock sheet (not a real wallet) that confirms or cancels; a divider; fake card fields; a demo banner on the whole payment column. No third-party wallet SDKs. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not load Apple, Google, or PayPal scripts. Do not invent fees per wallet. - Accessible buttons and mock sheet. Focus return on close. - Mobile-first, no lorem ipsum. - Keep this checkout, not a homepage. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then say how a real team would swap a button later without changing the layout.

You are a checkout flow designer who keeps information and payment as two steps in one HTML file. <context> Build a complete two-step checkout as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Step 1 information, step 2 fake payment and review. No real charges. Not a landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Step 1 fields: [INFO] - Cart items and prices: [CART ITEMS] - Shipping rule: [SHIP] - Currency: [CURRENCY] - Step labels: [INFORMATION / PAYMENT] </inputs> <task> Build the page: a 2-step progress control; step 1 collects [INFO] and Continue; step 2 shows a read-only recap, fake card UI, and Simulate payment; Back returns to step 1 with fields intact; order summary visible on both steps. Validate required fields before leaving step 1. Demo banner on payment. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not use a real multi-page route. Both steps live in this file. - Accessible step state (aria-current). Keyboard usable. - No live charges. No payment SDK. - Mobile-first, no lorem ipsum. No plan comparison. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then list the two fields that cause the most drop-off to watch.

You are a trust designer who puts a last-look review between the form and the fake charge. <context> Build a complete order-review page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Recap, then fake pay. No real charges. Not a landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Items: [CART ITEMS] - Ship-to address: [ADDRESS] - Ship method: [SHIP METHOD] - Total: [TOTAL] - Currency: [CURRENCY] - Edit links I want: [EDIT CART / EDIT ADDRESS] </inputs> <task> Build the page: slim progress (Review current); line items; address and method cards with Edit controls that expand inline editors or jump to in-page anchors; totals; a Pay [TOTAL] button that runs a Simulate payment success state; Demo only banner. Button amount must match the summary constant. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not invent a different total on the button. - Accessible headings. Mobile-first. No lorem ipsum. - No live charges. - Keep this a review screen, not a promo landing page. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then quote the one line that should match the receipt.

You are a billing-clarity writer who itemizes tax and shipping on the order summary. <context> Build a complete order-review page as one self-contained HTML file with inline CSS, returned as a working page I can open in the chat. Itemized money. Fake pay CTA. No real charges. Not a landing page. Not a pricing-tier page. </context> <inputs> - Store: [STORE] - Line items: [CART ITEMS] - Tax name and amount or rate: [TAX] - Shipping name and amount: [SHIP] - Discounts if any: [DISCOUNT OR NONE] - Currency: [CURRENCY] - Tax disclaimer: [DISCLAIMER OR [VERIFY]] </inputs> <task> Build the page: items; a receipt-style stack (subtotal, discount, shipping, tax, total) using only numbers I gave or [VERIFY]; a short disclaimer; fake Place order button. If I gave a rate, show the math in a one-line note. Keep labels human (Shipping, not SHP01). </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Do not invent VAT rates or duties. - Mobile-first, semantic description list or table, no lorem ipsum. - No live charges. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then print the total recipe a bookkeeper can check.

You are a checkout engineer who lets people fix the order on the review screen without starting over. <context> Build a complete editable order-review page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Edit qty and address in place, then fake pay. No real charges. Not a landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Items with prices: [CART ITEMS] - Address: [ADDRESS] - Ship methods: [SHIP METHODS] - Currency: [CURRENCY] </inputs> <task> Build the page: review cards with Edit / Done; qty steppers that update totals; address fields that toggle from read-only to inputs; ship radios that change the ship line; a locked summary while editing that unlocks on Done; Simulate payment only when not mid-edit. Constants drive money. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Totals must follow edits. No stale Pay $X. - Accessible toggle between read and edit. - No live charges. Do not invent ship prices. - Mobile-first, no lorem ipsum. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then say what you lock while a card is in edit mode.

You are a subscription checkout writer who puts cadence and cancel rules on the review screen. <context> Build a complete recurring order-review page as one self-contained HTML file with inline CSS, returned as a working page I can open in the chat. One plan, trial if I gave one, fake pay. No real charges. Not a /pricing page with three tiers. Not a landing page. </context> <inputs> - Product and plan name: [PLAN] - Price and cadence: [CADENCE] - Next charge date I can state: [NEXT CHARGE] - Trial if any: [TRIAL OR NONE] - Cancel path I can keep: [CANCEL PATH] - Currency: [CURRENCY] - What renews: [WHAT RENEWS] </inputs> <task> Build the page: plan recap; a Today versus renews on [NEXT CHARGE] pair; [WHAT RENEWS] list; [CANCEL PATH] in plain words; fake card or Simulate start subscription; Demo only banner. If I did not give a next date, write [VERIFY], do not invent one. Do not add extra plans. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Do not invent a second tier or an annual discount. - Mobile-first, semantic HTML, no lorem ipsum. - No live charges. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then quote the renew sentence a chargeback analyst would want.

You are a checkout layout designer who keeps the order summary sticky beside the form. <context> Build a complete checkout-plus-summary page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Form plus sticky summary. Fake payment. No real charges. Not a landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Items: [CART ITEMS] - Form fields: [EMAIL, ADDRESS, FAKE CARD] - Currency: [CURRENCY] - Promo field: [YES / NO] </inputs> <task> Build the page: left (or first on mobile) checkout form including fake card; right sticky summary with thumbnails, names, qty, line prices, subtotal, optional promo, total; on a phone the summary is a collapsible Order summary $X drawer above the form. Simulate payment on submit. Demo banner. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Sticky summary must not cover the pay button on a short laptop window. - Do not invent items. Mark gaps as [VERIFY]. - No live charges. No payment SDK. - Mobile-first, no lorem ipsum. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then describe the mobile summary behavior in three bullets.

You are a merchandiser who puts one add-on on the cart without burying the checkout button. <context> Build a complete cart-with-upsell page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Cart first, one add-on, then checkout. Fake money. Not a landing page. Not a pricing-tier page. </context> <inputs> - Store: [STORE] - Cart items: [CART ITEMS] - Add-on name, price, why it fits: [ADD-ON] - Who should skip it: [SKIP RULE] - Currency: [CURRENCY] </inputs> <task> Build the page: cart lines; a single add-on card with Add / Added toggle that updates the total; a one-line [SKIP RULE]; checkout CTA that stays visible. Only one offer. Constants for prices. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not stack three upsells. Do not invent a bundle I did not name. - Accessible toggle. Mobile-first. No lorem ipsum. - No real charges. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then say where the add-on should sit so it does not hide Pay.

You are a checkout CRO designer who adds a single honest order bump, never a pre-ticked fee. <context> Build a complete checkout page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Form, one bump checkbox, fake pay. No real charges. Not a landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Cart items: [CART ITEMS] - Bump name, price, one benefit: [BUMP] - Currency: [CURRENCY] - Checkbox default: [UNCHECKED] </inputs> <task> Build the page: checkout fields and fake card; a highlighted bump row with an unchecked checkbox, name, price, one benefit; total updates when checked; Simulate payment uses the live total. Never pre-check the box. Show Demo only. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Default unchecked. Do not hide the price. - Accessible label on the checkbox. Mobile-first. - No live charges. No extra bumps. - No lorem ipsum. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then say how you avoided a dark-pattern default.

You are a post-purchase designer who offers one upsell after a simulated payment, then lets people skip. <context> Build a complete post-pay upsell page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Fake first charge already done, one extra offer, skip to thank you. No real charges. Not a landing page. Not a pricing page. </context> <inputs> - First order recap: [PRODUCT] - Upsell name, price, why now: [UPSELL] - Decline label: [NO THANKS] - Currency: [CURRENCY] - What skip does: [GO TO THANK YOU] </inputs> <task> Build the page: a short Order received (demo) banner; one upsell card; Add this (simulate second demo) and a visible [NO THANKS] that shows the thank-you state; no countdown traps unless I gave a real deadline. Both paths stay in this file. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Skip is a real button, not a tiny text link only. - Do not invent scarcity timers. Mark gaps as [VERIFY]. - No live charges. No extra offers. - Mobile-first, no lorem ipsum. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then list the two exit paths a reviewer should click.

You are a packaging designer who offers a bundle upgrade on checkout with both totals visible. <context> Build a complete checkout-upgrade page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Current cart versus [BUNDLE]. Fake pay. No real charges. Not a /pricing comparison of plans. Not a landing page. </context> <inputs> - Store: [STORE] - Current items and total: [CART ITEMS] - Bundle name, contents, price: [BUNDLE] - Savings I can prove: [SAVINGS OR COMPUTE] - Currency: [CURRENCY] </inputs> <task> Build the page: current order list; an upgrade card that lists what they gain, both totals, and Keep this cart versus Upgrade to [BUNDLE]; switching updates the summary; fake pay on the chosen total. Compute savings only from constants. If I did not give both prices, show [VERIFY]. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not invent bundle contents. Do not hide the original cart. - Accessible choice (radio or two buttons). Mobile-first. - No live charges. - No lorem ipsum. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then print the savings math.

You are a checkout writer who offers optional protection without scare copy. <context> Build a complete checkout page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Optional [WARRANTY], fake pay. No real charges. Not a landing page. Not a pricing page. </context> <inputs> - Store: [STORE] - Items: [CART ITEMS] - Warranty name, price, term, what is covered: [WARRANTY] - What is not covered: [EXCLUSIONS] - Currency: [CURRENCY] </inputs> <task> Build the page: checkout plus summary; a calm protection offer with term, cover, exclusions, price; Add / No protection; total updates; no fear photos or broken-device scare. Simulate payment. Demo banner. Default is no protection. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not invent legal cover. Mark unknown terms as [VERIFY]. - Default off. Accessible choice. - No live charges. Mobile-first. No lorem ipsum. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then quote the one cover sentence that must stay honest.

You are a recovery designer who writes declined-card screens that get a second try. <context> Build a complete failed-payment page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Decline state, same cart, fake retry. No real charges. Not a landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Amount still due: [AMOUNT] - Cart recap: [CART ITEMS] - Decline reason I can show: [GENERIC DECLINE / DO NOT RETRY BANK] - Retry CTA: [TRY ANOTHER CARD] - Currency: [CURRENCY] </inputs> <task> Build the page: clear declined headline; [AMOUNT] still due; cart still listed; short why from [GENERIC DECLINE / DO NOT RETRY BANK] without blaming the buyer; fake card fields reset; Simulate retry that can succeed on a second demo click; a keep cart / contact support link. Demo banner. No alarmist red walls. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not invent a bank name or a fraud accusation. - Accessible error summary. Mobile-first. No lorem ipsum. - No live charges. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then say which line to show if the bank said do not retry.

You are a payments UX designer who routes a decline to another demo method on the same order. <context> Build a complete retry-method page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Same [AMOUNT], new method. Fake only. Not a landing page. Not a pricing page. </context> <inputs> - Store: [STORE] - Amount: [AMOUNT] - Failed method: [FAILED METHOD] - Other methods I can show: [METHODS] - Cart recap: [CART ITEMS] - Currency: [CURRENCY] </inputs> <task> Build the page: order still reserved (demo copy); [FAILED METHOD] marked declined; radios or buttons for [METHODS] only; matching fake fields (card, or a Simulate wallet sheet); total unchanged; Demo only. Do not add a method I did not list. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - No live wallets or processors. - Accessible method list. Mobile-first. No lorem ipsum. - Do not change the total. Mark gaps as [VERIFY]. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then list the method order you used and why.

You are a support-minded checkout writer who explains insufficient funds without shame. <context> Build a complete insufficient-funds page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Honest reason, same cart, fake retry. No real charges. Not a landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Amount: [AMOUNT] - Items: [CART ITEMS] - Suggestion I allow: [SPLIT OR RETRY] - Currency: [CURRENCY] - Support contact: [SUPPORT OR NONE] </inputs> <task> Build the page: headline that names insufficient funds and [AMOUNT]; cart recap; one suggestion from [SPLIT OR RETRY] (if split, only describe it if I explained how; otherwise retry another card); fake card retry; optional support line. Calm tone. Demo banner. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not invent a pay-in-3 product I did not name. - Accessible error. Mobile-first. No lorem ipsum. - No live charges. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then quote the one sentence that stays kind.

You are a checkout designer who recovers expired-card failures by focusing the expiry fields. <context> Build a complete expired-card page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Same order, fake update. No real charges. Not a landing page. Not a pricing page. </context> <inputs> - Store: [STORE] - Amount: [AMOUNT] - Last four if I have them: [LAST FOUR OR NONE] - Cart recap: [CART ITEMS] - Currency: [CURRENCY] </inputs> <task> Build the page: expired-card headline; masked card using [LAST FOUR OR NONE] or a [VERIFY] slot; expiry and CVC (and number if last four is missing) as the loud fields; Simulate update and pay; cart and total unchanged. Inline error if demo expiry is in the past. Demo banner. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not invent a full PAN. Do not store a real card. - Accessible labels. Mobile-first. No lorem ipsum. - No live charges. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then say which field gets focus on load.

You are a payments UX writer who explains a failed bank authentication challenge in plain words. <context> Build a complete failed-auth page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Mock 3D Secure style sheet that already failed, then retry. No real charges. Not a landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Amount: [AMOUNT] - Fail reason I can state: [AUTH FAIL] - Cart recap: [CART ITEMS] - Currency: [CURRENCY] - Other method if any: [OTHER METHOD OR CARD RETRY] </inputs> <task> Build the page: a mock bank-challenge overlay already in a failed state (demo bank name generic, not a real bank logo unless I named one); plain-language [AUTH FAIL]; Try again (reopens a short demo challenge that can succeed) and Use [OTHER METHOD OR CARD RETRY]; cart preserved. Never contact a real ACS. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Do not impersonate a real bank brand I did not name. - Accessible overlay. Focus trap while open. - No live charges. No 3DS SDK. - Mobile-first, no lorem ipsum. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then write the one sentence that tells them it was the bank check, not a lost cart.

You are a post-purchase designer who builds confirmation pages people can forward to themselves. <context> Build a complete thank-you page as one self-contained HTML file with inline CSS, returned as a working page I can open in the chat. Confirmation only. Not a landing page. Not a /pricing page. Payment on this file is already a demo success. </context> <inputs> - Store: [STORE] - Order id format: [ORDER ID] - Items and total: [CART ITEMS] - Email the receipt goes to: [EMAIL] - What happens next: [NEXT STEPS] - Currency: [CURRENCY] </inputs> <task> Build the page: Thank you headline; [ORDER ID] as a sample like ORD-1001 (label it sample); item table; total; [EMAIL] line; numbered [NEXT STEPS]; a Demo order, no live charge note; optional print-friendly styles. Do not invent a tracking number. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Do not invent courier tracking or delivery dates I did not give. Use [VERIFY]. - Mobile-first, semantic HTML, no lorem ipsum. - No second sales landing layout. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then list the three facts a buyer will screenshot.

You are a digital-goods designer who builds thank-you pages that get the file to the buyer. <context> Build a complete digital thank-you page as one self-contained HTML file with inline CSS, returned as a working page I can open in the chat. Demo purchase already done. Not a landing page. Not a pricing page. </context> <inputs> - Product name and file type: [PRODUCT] - Order id: [ORDER ID] - Delivery: [INSTANT BUTTON / EMAIL LINK] - License or use note: [LICENSE OR NONE] - Help email: [HELP] - Sample filename: [FILENAME] </inputs> <task> Build the page: success headline; [ORDER ID]; a download button or email-link honesty from [INSTANT BUTTON / EMAIL LINK] (if instant, point at a placeholder [FILENAME], do not invent a real CDN); [LICENSE OR NONE]; what to do if the file fails; [HELP]. Demo purchase banner. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Do not claim an instant file if I said email link. - Do not invent license terms. Mark [VERIFY]. - Mobile-first, no lorem ipsum. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then say which line to swap the hour the real file URL exists.

You are a post-purchase designer who offers an optional account after the receipt is visible. <context> Build a complete thank-you page as one self-contained HTML file with inline CSS and vanilla JS, returned as a working page I can open in the chat. Receipt first, optional account second. Not a signup landing page. Not a /pricing page. </context> <inputs> - Store: [STORE] - Order id: [ORDER ID] - Items: [CART ITEMS] - Prefill email: [EMAIL] - Why create an account: [TRACK ORDER / REORDER] - Skip label: [NO THANKS, I HAVE THE RECEIPT] </inputs> <task> Build the page: confirmation block first (id, items, total); then an optional create-account card with password fields and [TRACK ORDER / REORDER]; a clear [NO THANKS, I HAVE THE RECEIPT] that hides the form and keeps the receipt; demo-only note. Do not block the receipt behind the form. </task> <constraints> - One self-contained, responsive HTML file; Google Fonts only plus vanilla JS. - Account is optional. Receipt is not gated. - Accessible fields. Mobile-first. No lorem ipsum. - No live charges. No invented loyalty points. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then say how you kept the receipt above the fold.

You are a subscription onboarding writer who confirms what just started and when it renews. <context> Build a complete subscription thank-you page as one self-contained HTML file with inline CSS, returned as a working page I can open in the chat. Plan started (demo). Not a /pricing page with other tiers. Not a marketing landing page. </context> <inputs> - Plan: [PLAN] - Cadence and price: [CADENCE] - Next charge: [NEXT CHARGE] - What they can do today: [FIRST STEPS] - Where to cancel or update card: [MANAGE URL OR PLACEHOLDER] - Currency: [CURRENCY] </inputs> <task> Build the page: You are in headline; plan tile; [CADENCE] and [NEXT CHARGE]; [FIRST STEPS] as 3 numbered actions; manage-billing link placeholder; Demo subscription, no live charge. If a date is missing, [VERIFY]. Do not upsell a second plan on this screen. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Do not invent a next charge date. - Mobile-first, semantic HTML, no lorem ipsum. - No live charges. No extra plan cards. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then quote the renew line finance will keep.

You are a fulfillment writer who sets honest shipping expectations on the thank-you page. <context> Build a complete shipping thank-you page as one self-contained HTML file with inline CSS, returned as a working page I can open in the chat. Physical order, demo pay already done. Not a landing page. Not a pricing page. </context> <inputs> - Store: [STORE] - Order id: [ORDER ID] - Items: [CART ITEMS] - Ship-to city or country: [SHIP TO] - Window I can keep: [SHIP WINDOW] - Tracking status: [NOT YET / SAMPLE LINK] - Support: [SUPPORT] </inputs> <task> Build the page: thanks; [ORDER ID]; ship-to; [SHIP WINDOW]; a tracking slot that says not created yet unless I gave [SAMPLE LINK]; packing next-steps; [SUPPORT]. No fake courier logos. Demo order banner. </task> <constraints> - One self-contained, responsive HTML file; no dependencies except Google Fonts. - Do not invent a tracking number or a Tuesday 10am delivery. - Mobile-first, no lorem ipsum. - No live charges. No leftover upsell grid. </constraints> <format> Return the full HTML as a working page you can open in the chat. If Canvas is available, put the file there. Then list the two lines to swap when the real tracker exists.