The Two Tap Developer Hub

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

Get Started    

Quick setup

If you plan on using the Cart on the web, there is a quick way to be up and running.

Just include the code below on your page and let Two Tap do the rest.

<script type='text/javascript'>
  (function() {
      TTPublicToken = '__YOUR_TWO_TAP_PUBLIC_TOKEN__';

      var tt = document.createElement('script'); 
      tt.type = 'text/javascript'; 
      tt.async = true; 
      tt.src = ''; 
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(tt, s);

The quick setup has two approaches: 'detect' and 'manual'.

Manual mode

'manual' allows you to transform your existing product links, that might redirect via affiliate marketing offsite, to an inline checkout.

'manual' is the default mode. TT will look at all links that have a 'data-tt' attribute. 'data-tt' can be 'open-checkout'.

<a href='http://store_url/product' 


You can send multiple product urls like this:

<a href='#' 


Detect mode

'detect' looks for product links in your content. If it finds products that can be bought it pops up a button that controls the checkout.

Every time a web page is loaded possible product URLs are scanned and sent to Two Tap's servers. Two Tap then fetches product information (title, images, prices, etc), a process that can take up to 30 seconds. The next time the page is loaded if Two Tap has finished getting information the gallery button will appear.

<script type='text/javascript'>
  TTInstantMode = 'detect';

  // Instant Setup code here.


After you add the code on the first page load it might appear that Instant isn't doing anything. That's because we scan all the product URLs and fetch information about them in the background. As soon as that process ends (which depends on the number of products, but is usually under a minute), the gallery/checkout functionality will be activated.

To see what Instant does in the background we've added a simple to use toggle. Append tt-debug=true to your page's URL and Instant will show you a message with what's happening.

The message will look something like below.



Your public token.


(Optional) You can customize the look & feel of Instant by using CSS. Include a https:// link to a CSS file.


(Optional) A hash that tells the checkout interface which API flow to use. Only ports 80 (http) and 443 (https) are allowed for outbound connections. We recommend the SMS flow for ease of use.

{ method: 'sms', sms_confirm_url: 'http(s)://your_endpoint', sms_update_url: 'http(s)://your_endpoint (optional)' }


{ method: 'http', http_confirm_url: 'http(s)://your_endpoint', http_update_url: 'http(s)://your_endpoint' }


(Optional) This controls how fresh you'd like Two Tap's product data to be. Please consult the 'Product Availability' section for more information. Default 300. In seconds.


(Optional) An unique token that will be sent with the purchase confirm callbacks.


(Optional) If you know most orders are coming from Japan, for instance, you can set this as your default country.



Use this to manually start a checkout with a list of products. Accepts an array of hashes like:

[ { url: productURL, affiliate_link: affiliateLink } ]


Cart reloads itself. This is useful if you are retrieving products via AJAX.



(Optional) Called after the Instant script was loaded on the page.


(Optional) In manual mode this method will be called once Instant attaches itself to a link.


(Optional) In manual mode this method will be called when Instant fails to attach itself to a link with 'data-tt' set.

Quick setup