Tiptop-JS Reference

tiptop.js

To integrate Tiptop functionality into your store, add the following loader script within the head section of your global page template. This script will asynchronously load the necessary Tiptop JavaScript library without blocking the loading of other elements on your page.

The lightweight Tiptop.js library is responsible for rendering promotional messages as well as launching the Tiptop payments experience.

As part of the Tiptop Partner onboarding process you'll be granted both test and production keys. When you're ready to accept live transactions, replace the test key with your production key.

You can find your public API keys in the Tiptop Partner Dashboard (opens in a new tab).

<script>
  var _tiptop_config = {
    public_api_key: "YOUR_PUBLIC_API_KEY",
    script: "https://cdn.tiptop.com/js/v1/tiptop.js",
  };
 
  !(function (t, e) {
    var n = t.tiptop || {},
      c = document.createElement("script");
    (c.async = !0), (c.src = e.script);
    var i = document.getElementsByTagName("script")[0];
    i.parentNode?.insertBefore(c, i), (t.tiptop = n);
  })(window, _tiptop_config);
</script>

Ready

A callback function can be attached to tiptop.ui.ready(). This function will be triggered once the tiptop.js script has finished loading completely.

tiptop.ui.ready(function () {
  console.log("Tiptop JS ready!");
});