Components

The Drop-In UI consists of various components.

Region

For some countries, it is required to collect the region code for tax calculation and/or reporting purposes. In this case, a select field should be displayed instead of a text field. Taxamo Drop-in UI can show the select field when appropriate and will populate the options with the correct values.

To enable this, you can use the TaxamoDropInUI.attachRegion function to attach the component to your HTML elements as shown here:

<div class="col-md-6">
    <div class="form-group bmd-form-group"
         id="taxamo-region-text">
        <label class="bmd-label-floating" for="taxamo-region-text-field">Region</label>
        <input id="taxamo-region-text-field" class="form-control"/>
    </div>
    <div class="form-group bmd-form-group is-filled"
         id="taxamo-region-select">
        <label class="bmd-label-floating" for="taxamo-region-select-field">Region</label>
        <select id="taxamo-region-select-field" class="form-control" size="1">
        </select>
    </div>
</div>

ui.attachRegion(document.getElementById("taxamo-region-select"),
                document.getElementById("taxamo-region-text"),
                document.getElementById("taxamo-region-select-field"),
                document.getElementById("taxamo-region-text-field"));

Alternatively, the Drop-In UI can create and manage the region fields in the div marked with the data-taxamo-region HTML tag attribute:

<div class="col-md-6" data-taxamo-region></div>

Tax Number

The tax number component provides user interface logic for tax number validation, taking into account the following:

Validation messages
Tax number name
Self-declaration disclaimers
Captcha logic and display for tax number validation services which require it (currently: India and Russia)

To enable this, you can call the TaxamoDropInUI.attachBuyerTaxNumberWidget function as shown here:

<div class="col-md-6" style="display:none;" id="tax-number"></div>

// labels can be customised - this one adds : to the end of the label
ui.attachBuyerTaxNumberWidget(document.getElementById("tax-number"),
                              {numberNameLabel: "<span data-taxamo-label='ui_configuration.b2b_current.business_number_name'></span>:"});

Alternatively, the Drop-In UI can create and manage the tax number field in the div marked with the data-taxamo-tax-number HTML tag attribute:

<div class="col-md-6" data-taxamo-tax-number style="display:none;"></div>