Installation

tip

Be sure to follow our Javascript SDK installation instructions found here before continuing

<div data-zt-type="estimated-taxes" data-zt-amount="19999"></div>

Method Arguments

Argument	Required/Optional	Type	Value
type	Required	string	estimated-taxes
amount	Required	string	the amount in USD cents
currency	Optional	string	the currency type to use. Please see this guide for more information. Defaults to USD
language	Optional	string	the language of the page. Must adhere to these guidelines. Defaults to en-US
callback	Optional	string	the name of the method for the callback

Optional Callback

<div
  data-zt-type="estimated-taxes"
  data-zt-amount="19999"
  data-zt-callback="myMethod"
></div>
<script>
  function myMethod(data) {
    console.log(data);
  }
  // or
  // window.myMethod
  // if using React and scoping prevents accessing the method
</script>

Callback Response Structure

{
  "tax_amount": 1792.3805,
  "currency": "USD",
  "language": "en-US",
  "estimated_tax_percent": "11.95%",
  "estimated_tax_rate": "0.1195"
}

Templating

You are not limited to the default estimated taxes display when using our SDK. You can use a few defined template variables to adjust the display on your website. Outside of a few required variables, you are free to adjust in any way you see fit.

Template variables can be passed using the data-zt-template attribute. This attribute takes a string of bracketed reserved words which will be replaced during render with the appropriate values.

An example of templating looks like:

<div
  data-zt-type="estimated-taxes"
  data-zt-amount="19999"
  data-zt-template="{TRANSLATE_ESTIMATED_TAXES} ({ESTIMATED_TAX_RATE}) [{ZIP_CODE_UPDATE_LINK}] {HELP_TIP}: {ESTIMATED_TAX_AMOUNT}"
></div>

The table below lists all available template variables used for estimated taxes. The required template variables must be within your template string and must be available and accessible to your end user.

Variable	Required/Optional	Example Value	Description
ZIP_CODE_UPDATE_LINK	Required	90210	The zip code that can be edited/updated by the end user. This field is required since users should always be allowed to update the guessed value in order to correct discrepencies.
HELP_TIP	Required	(?)	The help-tip that is displayed. This variable is required because it informs the user about the input box and provides required accessibility and legal information.
TRANSLATE_ESTIMATED_TAXES	Optional	Estimated Taxes	The translated value for 'Estimated Taxes'.
ESTIMATED_TAX_RATE	Optional	5%	The tax rate for the zip code in percentage form
ESTIMATED_TAX_AMOUNT	Optional	1125	The amount of tax based off the rate and the subtotal supplied. This value will be in USD cents so it can be easily converted to different currency formats.

Table Structure

If you have your taxes listed in a table/grid for your checkout component, you can split the display for estimated taxes into two seperate columns if needed using templates. Splitting your output up in this way effectively calls the render logic twice but with different template variables on each element.

<tr>
  <td
    data-zt-type="estimated-taxes"
    data-zt-amount="<SUBTOTAL AMOUNT IN USD CENTS>"
    data-zt-currency="US"
    data-zt-template="Estimated Taxes ({ESTIMATED_TAX_RATE}) [{ZIP_CODE_UPDATE_LINK}] {HELP_TIP}"
    data-zt-callback="callbackMethod"
  ></td>
  <td
    data-zt-type="estimated-taxes"
    data-zt-amount="<SUBTOTAL AMOUNT IN USD CENTS>"
    data-zt-currency="USD"
    data-zt-template="{ESTIMATED_TAX_AMOUNT}"
  ></td>
</tr>

info

You could also stuff the entire table row into the data-zt-template attribute and it would render as expected, but we found that in doing this, the table would produce a 'flicker' effect as the row is inserted into the DOM after page load causing the table to shift rows down. This was noticable to the end user so we recommend the split table structure mentioned above.