Token Management on
Mobile Web

Token Management

This guide walks you through how to add Button to your mobile website. In this guide, we'll:

  1. Add ButtonJS
  2. Pass the Button Attribution Token to your Checkout API (Server)

Add ButtonJS

Add ButtonJS to your base HTML template (i.e. ButtonJS must be on each page).

<script>
window.ButtonWebConfig = {
  applicationId: 'app-xxxxxxxxxxxxxxxx' // Replace app-xxxxxxxxxxxxxxxx with your App ID from the Button Dashboard https://app.usebutton.com
};
(function(u,s,e,b,t,n){
  u['__bttnio']=b;u[b]=u[b]||function(){(u[b].q=u[b].q||[]).push(arguments)};t=s.createElement(e);n=s.getElementsByTagName(e)[0];t.async=1;t.src='https://web.btncdn.com/v1/button.js';n.parentNode.insertBefore(t,n)
})(window, document, 'script', 'bttnio');
</script>

Note: Whereas our native iOS and Android Merchant Libraries are explicitly passed deep-links, our JavaScript library doesn't require this as it can access the DOM, and thus the window.url.


Pass the Button Attribution Token to your Checkout API (Server)

When an order has been placed in your app, and just before the request to your own Checkout API (server) is made, fetch the Button Attribution token via the Button SDK.

// Obtain Attribution Token
var btn_ref = bttnio('getReferrerToken');

  • It is a case-sensitive ASCII-encoded string
  • It is under 256 bytes
  • It is an uninterpretable random value, corresponding to the impression which drove the most recent app or mobile website visit (do not attempt to parse or interpret its contents)
  • Although most attribution tokens include the string prefix srctok-, this prefix is not guaranteed to exist; do not test for or rely on this

Then execute a call to your Checkout API just like you currently do, adding the Button Attribution Token retrieved to the request payload along with the order details:

// Set parameters for POST, including Attribution Token
var parameters = {
  "btn_ref": btn_ref, // Attribution Token
  "price": 50.00,
  "location": "New York"
};

$.post("https://api.yourapi.com", parameters, function(data, status){
    console.log("Data: " + data + "\nStatus: " + status);
});