Skip to main content

Stripe Pricing Table

Written by Sasha Gerold
Updated over 2 weeks ago

This integration allows you to track affiliate referred clicks and conversions when using Stripe Pricing Tables. By connecting Trackdesk to your pricing table, the system automatically captures the Click ID and passes it to Stripe, ensuring accurate conversion attribution.

Note: You can identify if you are using this feature by inspecting your website's code. Look for the <stripe-pricing-table> HTML tag.

⚠️ Important:

  • Compatibility: This integration works for pages containing one or multiple pricing tables.


1. Before You Start

Ensure you have the following information and access ready:

  • Access to your Stripe Dashboard.

  • Your Trackdesk Tenant ID (Found at the bottom of your Settings page).

  • A Trackdesk Personal Token (Generated in Settings > Personal tokens).

  • Access to your website's HTML source code or tag manager.


2. Step-by-Step Instructions

Step 1: Install the Trackdesk Stripe App

  1. Visit the Stripe Marketplace and install the Trackdesk App.

  2. Once installed, open the app settings within your Stripe Dashboard.

  3. Enter your Tenant ID and Personal Token.

  4. Click Save Changes.

Step 2: Install the Click Tracking Script

You must place the global tracking script on every page of your website (including landing pages). For the best performance, place this code as high as possible within the <head> tag.

<!-- Trackdesk tracker begin -->
<script async src="//cdn.trackdesk.com/tracking.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('YOUR_TENANT_ID', 'click');
</script>
<!-- Trackdesk tracker end -->

Replace YOUR_TENANT_ID with your actual Tenant ID.

Step 3: Add the Pricing Table Helper Script

This script establishes the connection between the Click and the Stripe pricing table. Choose one of the following scenarios based on your website structure and place the code at the end of the <body> tag.

Scenario A: Pricing table is on a DIFFERENT page than the landing page

Use this if the user lands on your homepage but navigates to a separate pricing page to see the table.

<!-- Trackdesk set client_reference_id pricing table help fuction 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-pricing-table').forEach(function (e) {
e.setAttribute('client-reference-id', cid)
});
} catch (e) {
console.log(e);
}
}
})();
</script>
<!-- Trackdesk set client_reference_id pricing table help fuction end -->

Scenario B: Pricing table is on the SAME page as the landing page

Use this if your landing page directly contains the pricing table. This version includes a slight delay to ensure the tracking cookie is fully generated before updating the table.

<!-- Trackdesk set client_reference_id pricing table help fuction, click script on the same page as help 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-pricing-table').forEach(function (e) {
e.setAttribute('client-reference-id', cid)
});
} catch (e) {
console.log(e);
} finally {
linksUpdated = true;
}
}
}, 300)
})();
</script>
<!-- Trackdesk set client_reference_id pricing table help fuction, click script on the same page as help script end -->

Did this answer your question?