Skip to content

setBillingAddress(address: TBasketAddressDTO): Promise<Record<string, string[]> | undefined>

The setBillingAddress is an asynchronous method allowing to update a billing address in a basket. It is recommended to use this method as it automatically validates the provided data.

Input parameters

address

address is a mandatory parameter of the TBasketAddressDTO type which represents a new value of the billing address.

Returned value

A returned value has a type of Promise<Record<string, string[]> | undefined>. When the promise resolves, the result tells you if the operation was successful or if there were validation errors.

Event Bus events

This API method dispatches the following events with the Event Bus:

Example

In this example we showcase a basketAddressesApi call to update a billing address. It is similar to the implementation of billing-address-form webcomponent. Using the webcomponent is a recommended way of doing it.

A reactive-form webcomponent is used for management. Inside it, a regular HTML <form> element is placed. We attach an event listener to this form on submit which validates the form, takes all the form control values and uses them to effectively update a billing address. 

useStorefront(async ({ eventBus, getApi }) => {
    const messageStorageApi = storefront.getApiSync('messageStorageSystemApi');

    eventBus.on('basket.initialized', () => setupFormSubmit(getApi));

    const pastBasketInitializedEvents = messageStorageApi.getChannelMessages('basket.initialized');

    if (pastBasketInitializedEvents.length > 0) {
        pastBasketInitializedEvents.forEach(() => setupFormSubmit(getApi));
    }
});

function setupFormSubmit(getApi) {
    const $form = document.querySelector('form');

    $form.addEventListener('submit', () => validateAndSetBillingAddress(getApi));
}

async function validateAndSetBillingAddress(getApi) {
    const formService = document.querySelector('reactive-form').formService;

    formService.validateControls();

    const values = getFormValues(formService);

    if (!values || formService.getFormState() === 'validationFailed') return;

    const basketAddressesApi = await getApi('basketAddressesApi');

    basketAddressesApi.setBillingAddress({
        email: values.email,
        isCompany: value.isCompany,
        companyName: values.companyName,
        firstName: values.firstname,
        lastName: values.lastname,
        personalIdNumber: '',
        taxId: values.taxId,
        countryId: Number(values.countryId),
        city: values.city,
        postalCode: values.postalCode,
        street: values.street,
        street2: '',
        phone: values.phone,
        state: '',
        createUserAccount: values.createUserAccount === '1'
    });
}

function getFormValues(formService) {
    const controls = formService.getFormControls();

    const values: Record<string, string> = {};

    controls.forEach((control) => {
        if (control.type === 'radio') {
            if (control.checked) {
                values[control.name] = control.value as string;
            }
        } else {
            values[control.name] = control.value as string;
        }
    });

    return values;
}

    <reactive-form>
        <form>
            // here go all the fields necessary to get the address from a user
        </form>
    </reactive-form>

Basket Address API methods reference

Objects reference