PurchaseOrderConfirmation Container

The PurchaseOrderConfirmation container displays the purchase order confirmation page shown after completing the checkout process. This container is a simple view-only component that receives a single main prop - purchaseOrderNumber. It does not perform any data fetching. The component displays a success message along with the provided purchase order number, which is rendered as a clickable link redirecting to the corresponding purchase order details page.

The redirect behavior is controlled by the routePurchaseOrderDetails callback prop. No actions are available within this container. Clicking the purchase order number link redirects to the purchase order details page.

PurchaseOrderConfirmation container

Displayed information

• Success message
• Purchase order number as a clickable link to the PO details page

Parameter	Type	Req?	Description
purchaseOrderNumber	string | number	Yes
routePurchaseOrderDetails	function	Yes	Generates the URL for navigating to purchase order details. Returns a URL string or performs navigation. Use to implement custom routing logic, add query parameters, or integrate with your application’s routing system.

Basic

import { PurchaseOrderConfirmation } from '@dropins/storefront-purchase-order/containers/PurchaseOrderConfirmation.js';
import { render as provider } from '@dropins/storefront-purchase-order/render.js';

await provider.render(PurchaseOrderConfirmation, {
  purchaseOrderNumber: 'PO000123',
  routePurchaseOrderDetails: () => '/purchase-order/details?poRef=MTQ2',
})(element);

Dynamic

const poNumber = checkoutResponse.number;
const poUid = checkoutResponse.uid;
await provider.render(PurchaseOrderConfirmation, {
  purchaseOrderNumber: poNumber,
  routePurchaseOrderDetails: () => `/purchase-order/details/${poUid}`,
})(element);

Configuration

Parameter	Type	Required	Description
purchaseOrderNumber	`string	number`	Yes
routePurchaseOrderDetails	() => string	Yes	Function that returns the URL to the purchase order details page. Return the full URL path to the PO details page. The link allows the user to view their newly created purchase order. Include the PO number or ID in the URL.
className	any	No	Additional CSS classes for custom styling. Apply custom layout for the checkout success page, add theme-specific styles, or adjust spacing for specific page layouts.

Admin panel configuration

No admin panel configurations directly affect the container’s functionality.