> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Wix eCommerce: Thank You Page

## Article: Wix eCommerce: Thank You Page

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/supported-wix-app-pages/wix-e-commerce/wix-e-commerce-thank-you-page.md

## Article Content:

# Wix eCommerce (Checkout & Orders): Thank You Page

The following slots and APIs are available when building a [site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md) for the [Thank you page](https://dev.wix.com/docs/build-apps/develop-your-app/wix-business-solutions/wix-e-commerce/architecture-data-flow.md#thank-you-page).

<blockquote class="important">

  __Important:__ Some plugins may not support automatic addition upon installation, even with `autoAddToSite` enabled. In that case, you must:
  - [Create a dashboard page to manage your site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/build-a-dashboard-page-to-manage-your-site-plugin.md) that calls [Add Site Plugin](https://dev.wix.com/docs/sdk/host-modules/dashboard/add-site-plugin.md) to let Wix users add the plugin to a Thank you page slot.
  - Release at least 1 version of your app so the site plugin extension is registered with Wix for `addSitePlugin()` to work properly.
  
</blockquote>

## Slots

The following image shows slots in the Thank you page, into which Wix users can add plugins.

![thank-you-page-slots](https://wixmp-833713b177cebf373f611808.wixmp.com/images/5de65ee544e2c63bd9bbf10f707b86e6.png)

The slots are represented by the following `placement` object:

```json
{
  "appDefinitionId": "<WIX_ECOMMERCE_APP_ID>",
  "widgetId": "<THANK_YOU_PAGE_WIDGET_ID>",
  "slotId": "<SELECTED_SLOT_ID>"
}
```

Provide the following values for each property:

| Key               | Value                                                                                                                                                                                                                                 |
|-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `appDefinitionId` | "1380b703-ce81-ff05-f115-39571d94dfcd"                                                                                                                                                                                                |
| `widgetId`        | "1380bbb4-8df0-fd38-a235-88821cf3f8a4"                                                                                                                                                                                                |
| `slotId`          | ID of the slot you want [as displayed in the image above](#slots). </br> Supported values: <br /> <ul><li>`"thank-you-page:details:before"`</li><li>`"thank-you-page:items:after"`</li><li>`"thank-you-page:details:after"`</li></ul> |

For example, for your widget to appear between the order summary and the shipping, billing, and payment information, use the following object in your configuration:

```json
{
  "appDefinitionId": "1380b703-ce81-ff05-f115-39571d94dfcd",
  "widgetId": "1380bbb4-8df0-fd38-a235-88821cf3f8a4",
  "slotId": "thank-you-page:items:after"
}
```

## Thank you page plugin API

The Thank you page passes props to your plugin. Use them to call [related Wix backend APIs](#related-wix-backend-apis). The plugin exposes the following props:

| Name      | Type   | Description |
|-----------|--------|-------------|
| `orderId` | String | Order ID.   |

### Code example

The following example implements a [CLI Site Plugin](https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/site-plugins/add-a-site-plugin-extension.md) and accesses the `orderId` prop.

```typescript
class ThankYouPagePlugin extends HTMLElement {
  static get observedAttributes() {
    return ['order-id'];
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const orderId = this.getAttribute('order-id') ?? '';
    this.innerHTML = `
      <div>
        <!-- Your plugin UI using orderId -->
      </div>
    `;
  }
}

export default ThankYouPagePlugin;
```

## Related Wix backend APIs

Thank you page plugins integrate with the Wix eCommerce Orders APIs, as well as other backend APIs.

In your site plugin or in your app's server code, you can perform actions or implement logic that's dependent on the current order or related catalog data.

The following Wix APIs may be useful:

* [eCommerce Orders APIs](https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/orders/orders/introduction.md)
* [eCommerce APIs](https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/introduction.md)
* [Stores APIs](https://dev.wix.com/docs/api-reference/business-solutions/stores/introduction.md)

## Design guidelines

When you create a Thank you page plugin, we recommend the following content and layout guidelines. 

### Content guidelines

- The Thank you page is part of the post-purchase confirmation flow. Keep plugin content concise and secondary to the order confirmation details.
- Avoid duplicating the page's built-in order summary, totals, shipping, billing, or payment sections unless your plugin adds distinct value.

### Layout guidelines

- The page layout provides `32px` spacing between sections and plugins. Don't add large outer margins around your plugin.
- All slot placeholders are designed at `70px` height. 
- Design for compact content and responsive behavior on smaller screens.
- Use the [Thank you page design spec (Figma)](https://www.figma.com/design/YWxcr1HqP7VDTz3N5h2aMT/%F0%9F%99%8F%F0%9F%8F%BC-TYP-%7C-eCom-Platform?node-id=2933-5486&t=TVMm0mVhYcNHupHh-1) for reference styles and layout.