Mobile Web Merchant Button Library Integration

Mobile Web Merchant Button Library Integration


Routing traffic to native applications is the best way to drive commerce for your Brand. Under circumstances where the user either cannot route to your native application or chooses not to, Button's Merchant Libary can still help with attribution during this last resort scenario.

The Button Merchant Library for the mobile web is a light-weight, open-source library designed to assist in handling the Button Attribution Token, which describes the full user journey as they enter your Brand’s mobile iOS application from the outside world. By the end of this section you’ll be able to associate all incoming users against their subsequent taps in other applications that brought them to your mobile web application.


Add ButtonJS


Add ButtonJS to your base HTML template to access the primary bttnio function. ButtonJS must be accessible from each HTML webpage that is rendered.


    <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


Once the user has placed an order in your app, include the Button Attribution Token before sending the user’s checkout request to your Brand’s checkout API. The Button Attribution Token can be retrieved by passing in "getReferrerToken" as an argument to the bttnio function.




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

Once the Button Attribution Token has been retrieved, include it in the order’s request parameters and execute a call to your Brand’s checkout API as you normally would.


    // Set parameters for POST, including Attribution Token
    var parameters = {
      "btn_ref": btn_ref, // Button Attribution Token
      "price": 50.00,
      "location": "New York"
    };
    
    $.post("https://checkout-api.example.com", parameters, function(data, status){
        console.log("Data: " + data + "\nStatus: " + status);
    });

This concludes handling last resort scenarios where users are attributed after being routed to your mobile web application.