A Stripe buy button can be identified in Developer tools by the text “buy-button”. This means that you are using Stripe’s buy button integration: https://docs.stripe.com/payment-links/buy-button

This works for one or more buttons on a page.

Integration steps:

Install the Trackdesk app.
Our Stripe app is available here in the Stripe marketplace: https://marketplace.stripe.com/apps/trackdesk
Fill in all necessary information in the settings of the Stripe app and save changes.
1. Tenant ID: Click Your Trackdesk identifiers at the top right of any Settings page to copy your Tenant ID.
  See where to find your Tenant ID.
2. Personal token: Copy it from Your Trackdesk identifiers at the top right of any Settings page, or create a new one in Settings → Integrations → Personal tokens.
  See Personal tokens and API access.
Add the click script.
Track clicks by adding the following code to every page of your website, including all landing pages. Place it as high as possible in the <head>, ideally right after the opening <head> tag, so the click is recorded before the visitor can leave the page.
```

<script async src="//TENANT_ID.trackdesk.com/main.js"></script>
<script>
(function(t,d,k){(t[k]=t[k]||[]).push(d);t[d]=t[d]||t[k].f||function(){(t[d].q=t[d].q||[]).push(arguments)}})(window,"trackdesk","TrackdeskObject");

trackdesk("TENANT_ID", "click");
</script>

```
Replace both occurrences of TENANT_ID with your Tenant ID.

The next step is integrating a help script that will establish a connection for the Stripe app.

Add the snippet below right before the closing </body> tag of every page where your buy buttons are, so the elements it updates already exist.

The help script will differ depending on whether the Stripe buy button is on a different page than the landing page or on the same page.

Buy button on different page than landing page

This script is pasted to the page where the Stripe buy button/s are present if this page is different from the landing page.

<!-- Trackdesk set client_reference_id buy button help function begin -->
<script>
(function () {
    var cookie = document.cookie.match("(^|;)\\s*trakdesk_cid\\s*=\\s*([^;]+)");
    if (Array.isArray(cookie)) {
        try {
            var trakdeskCid = JSON.parse(cookie.pop());
            var cid = trakdeskCid["cid"];
            document.querySelectorAll("stripe-buy-button").forEach(function (e) {
                e.setAttribute("client-reference-id", cid)
            });
        } catch (e) {
            console.log(e);
        }
    }
})();
</script>
<!-- Trackdesk set client_reference_id buy button help function end -->

Buy button on same page as landing page

This script is pasted to the page where the Stripe buy button/s are present if this page is the landing page itself. This version waits briefly so the Click ID exists before the buy buttons are updated.

<!-- Trackdesk set client_reference_id buy button help function, same page as click script begin -->
<script>
(function () {
    var linksUpdated = false;
    setInterval(function () {
        var cookie = document.cookie.match("(^|;)\\s*trakdesk_cid\\s*=\\s*([^;]+)");
        if (Array.isArray(cookie) && !linksUpdated) {
            try {
                var trakdeskCid = JSON.parse(cookie.pop());
                var cid = trakdeskCid["cid"];
                document.querySelectorAll("stripe-buy-button").forEach(function (e) {
                    e.setAttribute("client-reference-id", cid)
                });
            } catch (e) {
                console.log(e);
            } finally {
                linksUpdated = true;
            }
        }
    }, 300)
})();
</script>
<!-- Trackdesk set client_reference_id buy button help function, same page as click script end -->

Please note that Stripe payment links (buy.stripe...), Stripe pricing tables and Stripe buy buttons all have slightly different code.

Stripe Buy Button

Buy button on different page than landing page

Buy button on same page as landing page