--- title: Payments and returns description: >- Payments and returns extensions render inside the payment status and return status cards on the Order status page. Use them to display payment reminders, cost summaries, or return processing information alongside order details. api_version: 2026-04 source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/payments-and-returns md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/payments-and-returns.md --- # Payments and returns Payments and returns extensions render inside the payment status and return status cards on the Order status page. These cards appear alongside Shopify's native payment and return UI so customers see your extension content in direct context with their order's financial and return details. ### Use cases * **Payment reminders:** Display notices about outstanding balances, payment terms, or upcoming due dates for orders with pending payments. * **Cost breakdowns:** Show supplementary payment information such as installment details, loyalty point usage, or custom surcharges. * **Return status updates:** Provide customers with additional context about their return, such as estimated refund timelines or return shipping instructions. * **Return processing details:** Display app-specific return information, such as restocking status, exchange options, or return policy reminders. * **Order-specific messaging:** Surface contextual messages related to payment or return activity on an order. ![Order status page payments and returns section showing available extension target locations with highlighted slots near payment and return details.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/payments-and-returns-hero-img-CncBIO-9.png) *** ## Payments and returns targets Payments and returns targets render inside the payment status and return status cards on the Order status page. They're useful for adding contextual information about payments and returns tied to an order. ### Payment details (render after) target `customer-account.order-status.payment-details.render-after` Renders after the payment details in the payment status card on the Order status page. Use this target to display payment reminders, cost summaries, or supplementary payment information for an order. This target gives you access to the [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) and the [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/cart-lines-api). ### Support Components (62) APIs (29) ### Supported components * [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation) * [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement) * [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar) * [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner) * [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box) * [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button) * [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group) * [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox) * [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip) * [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list) * [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable) * [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip) * [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item) * [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox) * [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field) * [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action) * [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field) * [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker) * [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details) * [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider) * [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone) * [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field) * [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form) * [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid) * [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading) * [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image) * [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group) * [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link) * [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map) * [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu) * [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal) * [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field) * [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field) * [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list) * [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page) * [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph) * [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field) * [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon) * [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field) * [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover) * [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button) * [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail) * [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress) * [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code) * [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container) * [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box) * [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section) * [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select) * [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet) * [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph) * [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner) * [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack) * [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch) * [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text) * [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area) * [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field) * [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time) * [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip) * [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list) * [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field) ### Available APIs * [Addresses API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/addresses-api) * [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api) * [Attributes API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/attributes-api) * [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api) * [Authentication State API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authentication-state-api) * [Buyer Identity API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/buyer-identity-api) * [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cart-lines-api) * [Checkout Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/checkout-settings-api) * [Cost API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cost-api) * [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api) * [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api) * [Discounts API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/discounts-api) * [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api) * [Gift Cards API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/gift-cards-api) * [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api) * [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api) * [Metafields API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/metafields-api) * [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api) * [Note API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/note-api) * [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-api) * [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-status-localization-api) * [Require Login API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/require-login-api) * [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api) * [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api) * [Shop API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/shop-api) * [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api) * [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api) * [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api) * [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api) Examples ### Examples * #### ##### Description Show a banner in the payment status card reminding customers about pending payment. This example reads order data from \`shopify.order\` to include the order name for context. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(, document.body); }; function Extension() { const order = shopify.order.value; if (!order) { return null; } return ( Order {order.name} has an outstanding balance. Contact the merchant to complete your payment. ); } ``` * #### ##### Description Display a cost breakdown in the payment status card. This example reads cost data from \`shopify.cost\` and order data from \`shopify.order\` to display subtotal, shipping, tax, and total amounts. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(, document.body); }; function Extension() { const order = shopify.order.value; const subtotal = shopify.cost.subtotalAmount.value; const shipping = shopify.cost.totalShippingAmount.value; const tax = shopify.cost.totalTaxAmount.value; const total = shopify.cost.totalAmount.value; if (!order) { return null; } return ( Payment summary for {order.name} Subtotal {subtotal.amount} {subtotal.currencyCode} {shipping && ( Shipping {shipping.amount} {shipping.currencyCode} )} {tax && ( Tax {tax.amount} {tax.currencyCode} )} Total {total.amount} {total.currencyCode} ); } ``` ### Return details (render after) target `customer-account.order-status.return-details.render-after` Renders after the return details in the return status card on the Order status page. This card only appears when a return has been requested. A separate instance of this extension is rendered for each return. Use this target to display return processing updates, refund estimates, or supplementary return information for a specific return. This target provides `shopify.returnId` to identify the current return, and also gives you access to the [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) and the [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/cart-lines-api). ### Support Components (62) APIs (29) ### Supported components * [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation) * [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement) * [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar) * [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner) * [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box) * [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button) * [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group) * [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox) * [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip) * [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list) * [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable) * [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip) * [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item) * [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox) * [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field) * [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action) * [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field) * [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker) * [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details) * [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider) * [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone) * [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field) * [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form) * [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid) * [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading) * [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image) * [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group) * [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link) * [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map) * [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu) * [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal) * [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field) * [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field) * [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list) * [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page) * [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph) * [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field) * [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon) * [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field) * [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover) * [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button) * [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail) * [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress) * [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code) * [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container) * [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box) * [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section) * [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select) * [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet) * [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph) * [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner) * [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack) * [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch) * [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text) * [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area) * [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field) * [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time) * [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip) * [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list) * [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field) ### Available APIs * [Addresses API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/addresses-api) * [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api) * [Attributes API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/attributes-api) * [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api) * [Authentication State API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authentication-state-api) * [Buyer Identity API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/buyer-identity-api) * [Cart Lines API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cart-lines-api) * [Checkout Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/checkout-settings-api) * [Cost API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/cost-api) * [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api) * [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api) * [Discounts API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/discounts-api) * [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api) * [Gift Cards API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/gift-cards-api) * [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api) * [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api) * [Metafields API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/metafields-api) * [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api) * [Note API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/note-api) * [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-api) * [Order Status Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/order-status-localization-api) * [Require Login API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/require-login-api) * [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api) * [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api) * [Shop API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/order-apis/shop-api) * [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api) * [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api) * [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api) * [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api) Examples ### Examples * #### ##### Description Show a banner in the return status card informing customers about return processing. This example reads order data from \`shopify.order\` to include the order name for context. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(, document.body); }; function Extension() { const order = shopify.order.value; if (!order) { return null; } return ( Your return for order {order.name} is being processed. Refunds typically take 5–10 business days to appear on your statement. ); } ``` * #### ##### Description Display return shipping instructions specific to a return. This example uses \`shopify.returnId\` to reference the current return and provides contextual return information. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(, document.body); }; function Extension() { const order = shopify.order.value; const returnId = shopify.returnId; if (!order) { return null; } return ( Return shipping instructions Please ship your items back within 14 days. Include return reference{' '} {returnId} on the shipping label. Order {order.name} ); } ``` *** ## Best practices * **Keep content contextual:** These extensions render inside payment and return status cards, so content should be directly relevant to the payment or return being displayed. * **Guard against missing data:** Always check that [`shopify.order.value`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/order-apis/order-api) is defined before rendering order-specific content. The order data loads asynchronously and may be `undefined` on the initial render. * **Avoid heavy rendering:** These targets render inline within the Order status page. Avoid complex layouts or large data fetches that could cause layout shifts. Use [banner](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/banner) or lightweight [stack](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/layout-and-structure/stack) layouts for the best experience. ***