Data Attributes

The Drop-In UI enables you to attach the service's UI logic to existing DOM tree elements. This supports the following features:

Updating form field values. For example, to display tax calculation results.
Controlling the visibility of form elements.
Two-way binding of fields to the service's API data.

Initialisation

The Taxamo drop-in UI library does not scan for the data-taxamo-* attributes automatically. You need to tell it to do so. For example:

// needs to be invoked once per page load when using 
// data-taxamo-* attributes
ui.scanDataAttributes();

Attributes

The following list summarizes the attributes that are available:

`data-taxamo-display`

Checks if the provided field evaluates to true-ish value in the tax calculation response. If yes, sets the element.style.display to "", otherwise, sets the element.style.display to "none", hiding the element.

`data-taxamo-label`

Binds the provided element contents to a field from the tax calculation response.

Supports the following additional attributes:

data-taxamo-label-line-custom-id - makes the binding use a transaction line with provided custom id
data-taxamo-label-line-amount-custom-id - makes the binding use a transaction line with provided custom id and format the value as an amount using transaction.currency_code

`data-taxamo-field`

Two-way binds the provided element to a tax calculation request field. It will also manage the required attribute.

If the field is "billing_country_code", Taxamo Drop-in UI will populate the countries list in the select dropdown.

<div class="col-md-6">
    <div class="form-group bmd-form-group">
        <label class="bmd-label-floating" for="taxamo-buyer-name">Buyer name</label>
        <input id="taxamo-buyer-name" class="form-control"
               data-taxamo-field="buyer_name"/>
    </div>
</div>

`data-taxamo-loader`

Shows the element when tax calculation request is being processed, hides when it finishes.

`data-taxamo-logo`

Fills the element with an IMG tag containing the Taxamo logo when Taxamo is the seller (Taxamo Assure).

<style type="text/css">
  #taxamo-logo-placeholder img { width: 100px; };
</style>
 
<div data-taxamo-logo class="pull-right" id="taxamo-logo-placeholder">
  Logo goes here...
</div>

Example

The following example shows how these attributes can be used:

<div class="col-md-4" data-taxamo-display="transaction.amount">
    <h2>Pricing</h2>
    <p>Total: <span class="pull-right">$<b
            data-taxamo-label="total_amount"
            data-taxamo-label-line-amount-custom-id="1"></b></span></p>
 
    <p id="tax-wrapper" style="display: none"
        data-taxamo-display="transaction.tax_supported">
        <span data-taxamo-label="tax_name"
              data-taxamo-label-line-custom-id="1"></span> (<i data-taxamo-label="tax_rate"
                                                               data-taxamo-label-line-custom-id="1"></i>%):
        <span class="pull-right">$<b data-taxamo-label="tax_amount"
                                     data-taxamo-label-line-amount-custom-id="1"></b> </span></p>
 
    <style type="text/css">
    #taxamo-logo-placeholder img { width: 100px; };
    </style>
 
    <div data-taxamo-logo class="pull-right"
        id="taxamo-logo-placeholder">
        Logo goes here...
    </div>
</div>
<div data-taxamo-loader="1" class="pull-right" style="display: none; position:absolute; bottom:10px; right: 10px">
    <img src="/dropinui/loader.gif"/>
</div>