PaymentOnAccount container

The PaymentOnAccount container captures a reference number and displays the company credit limit with warnings when exceeded. The container is rendered automatically when Payment On Account is the selected payment method.

Configuration

Note

Shares configuration with PurchaseOrder but automatically displays company credit limits and warnings.

The PaymentOnAccount 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 PaymentOnAccountProps interface:

PaymentOnAccountProps interface

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

export interface PaymentOnAccountProps extends HTMLAttributes<HTMLDivElement> {
  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 PaymentOnAccount container on a checkout page.

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

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