OrderConfirmationHeader container

The OrderConfirmationHeader container displays the order confirmation page with order details after a customer places an order. It also includes a “Create an account” button for guest users.

OrderConfirmationHeader configurations

The OrderConfirmationHeader container provides the following configuration options:

Option	Type	Req?	Description
onSignUpClick	Function	No	The function to call when a customer clicks "Create an account".
orderData	Object	Yes	An object containing the order data, including details such as the email, shipping address, billing address, and order number.

Example

The following example renders the OrderConfirmationHeader container within an order confirmation page. It provides the necessary order data and a handler for the sign-up click event.

import OrderConfirmationHeader from '@dropins/storefront-checkout/containers/OrderConfirmationHeader.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $orderConfirmationHeader = orderConfirmationFragment.querySelector(
  '.order-confirmation__header'
);

CheckoutProvider.render(OrderConfirmationHeader, {
  orderData,
  onSignUpClick,
})($orderConfirmationHeader);