BillToShippingAddress container

The BillToShippingAddress is a conditional container. It includes a checkbox that allows users to indicate if the billing address is the same as the shipping address. If unchecked, the billing address form will be displayed.

BillToShippingAddress configurations

The BillToShippingAddress container provides the following configuration options:

Option	Type	Req?	Description
hideOnEmptyCart (*)	boolean	No	Hides the container if the cart is empty (default value is true).
hideOnVirtualCart (*)	boolean	No	Hides the container if the cart is virtual (default value is false).
onChange	function	No	Callback function that is called when the checkbox state changes.

(*) Properties inherited from ConditionalContainer

These configuration options implement the BillToShippingAddressProps interface:

BillToShippingAddressProps interface

The BillToShippingAddress container receives an object as a parameter which implements the BillToShippingAddressProps interface with the following properties:

export interface BillToShippingAddressProps {
  onChange?: (checked: boolean) => void;
}

The onChange property is a handler used to perform actions called when the checkbox is checked/unchecked.

Example

The following example renders the BillToShippingAddress container on a checkout page. It includes functionality to hide the empty and/or virtual cart component and handle changes to the billing address form visibility and validation. If the billing address form is shown, it validates the form data and updates the billing address on the cart.

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

const DEBOUNCE_TIME = 1000;

const $billToShipping = checkoutFragment.querySelector(
  '.checkout__bill-to-shipping',
);
const $billingForm = checkoutFragment.querySelector(
  '.checkout__billing-form',
);

const billingFormRef = { current: null };

CheckoutProvider.render(BillToShippingAddress, {
  hideOnVirtualCart: true,
  onChange: (checked) => {
    $billingForm.style.display = checked ? 'none' : 'block';
    if (!checked && billingFormRef?.current) {
      const { formData, isDataValid } = billingFormRef.current;

      setAddressOnCart({
        api: checkoutApi.setBillingAddress,
        debounceMs: DEBOUNCE_TIME,
        placeOrderBtn: placeOrder,
      })({ data: formData, isDataValid });
    }
  },
})($billToShipping),