> This page is for version v1 (default). > For other versions, use one of these documentation indexes: > - v1 (default): https://developers.truemed.com/v-1/llms.txt > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://developers.truemed.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.truemed.com/_mcp/server. # Checkout widgets > The Truemed checkout widgets for Shopify — what each one does, how to add them, and where they belong in your checkout. Most stores put their HSA/FSA message on the product page and nowhere else. That is a long way from the moment a shopper picks a payment method. The Truemed checkout widgets close that gap with drag-and-drop blocks that carry HSA/FSA messaging into your Shopify checkout. Each widget reads the eligibility that Truemed syncs onto your products, so it appears only on carts with items that may qualify. The copy adapts to your Truemed setup on its own — "pay with HSA/FSA" for payments stores, "get reimbursed" for reimbursement stores. There is nothing to write and nothing to configure. > **Note** > > These widgets ship inside the [Truemed Extensions App](/guides/setup/shopify/extensions-app). Install the app first. The blocks > do not appear in your checkout editor until you do. --- ## Before you start **The checkout widgets need a Shopify Plus plan.** Shopify only lets Plus stores, and partner development stores, add blocks to the checkout page. On any other plan the app shows a **Requires Shopify Plus** badge, and you cannot add the widgets. Your Shopify plan decides nothing else. Catalog sync, eligibility metafields, self-updating collections, the Thank You and Order Status reimbursement links, and the Cart Drawer widget when it ships all work on every plan. **The widgets are checkout extensions.** Checkout Extensibility is Shopify's framework for changing checkout with extensions instead of injected scripts. It replaces the **Additional Scripts** field, which Shopify is retiring: Plus stores had to migrate by August 2025, and every other store by August 2026. --- ## Add them to your checkout The app home page lists every widget as a tile with a preview. Each tile has an **Add** button that opens Shopify's checkout editor for you, and the app tracks how many you have placed. #### Start with the two recommended widgets On the app home page, add the **Product Badge** and **Subtle CTA** widgets. The badge marks each item in the order summary that may qualify, and the one-line CTA above it tells shoppers the cart holds them. Together they carry the message without crowding your checkout. #### Add the widget to your checkout The **Add** button opens the checkout editor. In the **Sections** editor, click **Add block** and search for "Truemed". Your widgets are grouped under **Truemed Checkout Widgets**. > **Note** > > A few things worth knowing: > > * These widgets can also show in your Shop Pay checkout. Toggle **Include block in Shop Pay** on after adding. > * Each widget has a **Display only for subscription orders** toggle in the editor. > * Widgets belong to the checkout profile you edit. If you test in a draft profile, add them there first, then repeat on your published profile. #### Place it and save Drag the widget where you want it, set its display settings, and click **Save**. If you run the Truemed Payments App, put the **Payment Banner** directly in the payment section. #### Explore the rest when you are ready **Checkout Banner**, **Estimated Savings**, and **Payment Banner** are additional messaging you can layer on. Add them the same way. > **Warning** > > **Just installed the Truemed Extensions App?** Truemed syncs each SKU's > HSA/FSA eligibility back to you through the app, and the checkout widgets stay > hidden from shoppers until that finishes. Pick your placements in the meantime, > and once the eligibility sync is done, the widgets will start appearing on > their own. --- ## Available widgets Widgets go in one of two checkout sections. Copy adapts to the shopper, so there is nothing to configure. #### Payments Five widgets are available. Messaging guides shoppers to select Truemed as their payment method. ![Shopify checkout with the five Truemed HSA/FSA widgets in place](/_fern-img/bf8a28e7cf7ee38e529ac5ba37b9cdf74a9dbdcdd2a1a3c236e4ef7f56a0c79e.webp) Section: Main **Checkout Banner** * A full Truemed callout that teaches shoppers how to pay with their HSA/FSA at checkout * Sits at any of several positions in the checkout form — drag and drop to place it ![Checkout Banner, payments messaging](/_fern-img/d5cba004f8cf2873ea1d9de9d85af99dd58a276cf3e486ed650fc446d8b2fcad.webp) **Payment Banner** * Sits directly above the payment method options, so shoppers see it at the moment of decision * Prompts shoppers to pay with their health savings account * Truemed Payments App installations only ![Payment Banner](/_fern-img/f73a3b1e3d7aa548f3efb5f72791b2bffb9ec753efd355467dfd9c2e09d4e038.webp) Section: Order summary **Product Badge** — recommended * Puts a "Pay with HSA/FSA" badge on each line item that may qualify * Shows shoppers which products in their cart may qualify for HSA/FSA payment ![Product Badge, payments messaging](/_fern-img/fd0aeb1b9f3427ae877ede0a14a274c2c433450d9c7b77ada70f4c71f9ebbbae.webp) **Subtle CTA** — recommended * A compact banner that tells shoppers the cart holds items that may qualify: "Pay using pre-tax HSA/FSA funds" * Goes in either the **Main** or **Order summary** section ![Subtle CTA, payments messaging](/_fern-img/846f7d5b62427a0e83968ec4f8b3afe95dc28bc6235681c8b55a0304720743d0.webp) **Estimated Savings** * Shows the estimated tax savings — "Average tax savings: \~\$100" — next to the order totals * Puts a dollar figure on the tax-free savings at the moment shoppers review their total * The savings figure is an estimate. Actual savings depend on the shopper's tax rate. The widget carries the Truemed disclaimer behind its info icon. See [truemed.com/disclosures](https://www.truemed.com/disclosures). ![Estimated Savings, payments messaging](/_fern-img/cc8296a1e153540ad365de94a3c34266c4604f78ee9a23a362d2db0dd308ad5b.webp) #### Reimbursements Four widgets are available. Messaging explains the post-purchase reimbursement path. ![Shopify checkout with the four Truemed HSA/FSA widgets in place](/_fern-img/ac29393a6fe964af83dff84ea0937b3dfbcfba0932104a28ef55d627825c9b29.webp) Section: Main **Checkout Banner** * A full Truemed callout that teaches shoppers how to get reimbursed through their HSA/FSA after purchase * Sits at any of several positions in the checkout form — drag and drop to place it ![Checkout Banner, reimbursements messaging](/_fern-img/e7e04bb5a6faabe0df867072186f162ab01ab43be5cbe28e0bc250a7d35bd60e.webp) > **Note** > > The **Payment Banner** is available on Truemed Payments App installations only. > It points at the Truemed payment option, which reimbursement checkouts do not > have. Section: Order summary **Product Badge** — recommended * Puts a "Get Reimbursed via HSA/FSA" badge on each line item that may qualify * Shows shoppers which products in their cart may qualify for HSA/FSA reimbursement ![Product Badge, reimbursements messaging](/_fern-img/aef0811f35693853dcb0e905c29645aa967aac784196737cdcff62e73f7c6715.webp) **Subtle CTA** — recommended * A compact banner that tells shoppers the cart holds items that may qualify: "Get reimbursed from your HSA/FSA" * Goes in either the **Main** or **Order summary** section ![Subtle CTA, reimbursements messaging](/_fern-img/d5308b9c65dd263d8fc61760892575da421aa7ff459ee1e02697098122783ea6.webp) **Estimated Savings** * Shows the estimated tax savings — "Average tax savings: \~\$100" — next to the order totals * Puts a dollar figure on the tax-free savings at the moment shoppers review their total * Note: The savings figure is an estimate. Actual savings depend on the shopper's tax rate. The widget carries the Truemed disclaimer behind its info icon. See [truemed.com/disclosures](https://www.truemed.com/disclosures). ![Estimated Savings, reimbursements messaging](/_fern-img/59f9bd777d777521139f6d1548f61e72b91834d65b9e930d0a2edf311a7c28be.webp) > **Note** > > **Coming soon: Cart Drawer.** A banner in your theme's cart drawer that shows > HSA/FSA eligibility before shoppers reach checkout. It will work on every > Shopify plan. --- ## Need help? Reach out to your Customer Success representative or [merchants@truemed.com](mailto:merchants@truemed.com). --- ## Related * [Truemed Extensions App](/guides/setup/shopify/extensions-app) — Install the app that ships these widgets * [Product page widget](/guides/setup/shopify/widgets) — The HSA/FSA message earlier in the journey * [HSA/FSA eligible collections](/marketing/widgets/eligible-product-collections-and-badges) — Build a collection that maintains itself * [Subscription messaging](/marketing/widgets/checkout-messaging-for-subscription-products) — Checkout copy for subscription carts * [Testing](/guides/setup/shopify/how-to-test) — Place test orders without charging real funds