PurchaseOrder container

The PurchaseOrder container captures a Purchase Order reference number for tracking. The container is rendered automatically when Purchase Order is the selected payment method.

Configuration

Note

Shares configuration with PaymentOnAccount but captures the reference number only.

The PurchaseOrder container provides the following configuration options:

Parameter	Type	Req?	Description
initialReferenceNumber	string	No	Sets the initial value for the purchase order reference number input field.
onReferenceNumberChange	function	No	Callback when the reference number input field changes.
onReferenceNumberBlur	function	No	Callback when the reference number input field loses focus.

These configuration options implement the PurchaseOrderProps interface:

PurchaseOrderProps interface

The PurchaseOrder container receives an object as a parameter that implements the PurchaseOrderProps interface with the following properties:

export interface PurchaseOrderProps extends HTMLAttributes<HTMLFormElement> {
  initialReferenceNumber?: string;
  onReferenceNumberChange?: (referenceNumber: string) => void;
  onReferenceNumberBlur?: (referenceNumber: string) => void;
}

• Set the initialReferenceNumber property to the initial value you want to display in the reference number input field.
• The onReferenceNumberChange property is a handler that is called when the reference number input field changes.
• The onReferenceNumberBlur property is a handler that is called when the reference number input field loses focus.

Example

The following example renders the PurchaseOrder container on a checkout page.

import * as checkoutApi from '@dropins/storefront-checkout/api.js';
import PurchaseOrder from '@dropins/storefront-checkout/containers/PurchaseOrder.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

CheckoutProvider.render(PurchaseOrder, {
  onReferenceNumberChange: (referenceNumber) => {
    // Handle reference number change
  },
})($purchaseOrder),