Taxamo

The Taxamo Developer Hub

Welcome to the Taxamo developer hub. You'll find comprehensive guides and documentation to help you start working with Taxamo as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    API Reference

Data Attributes

Taxamo Drop-In UI enables you to attach Taxamo UI logic to existing DOM tree elements. This supports:

  • updating form field values
    ** e.g. to display tax calculation results
  • control visibility of form elements
  • two-way binding of fields to Taxamo API data

Initialisation

The Taxamo drop-in UI library does not scan for the data-taxamo-* attributes automatically - it needs to be told to do so:

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

Attributes

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 the Taxamo is the seller (Intermediary Plus).

<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 Usage

<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>

Data Attributes


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.