Stripe Pricing Table

The Stripe Pricing Table is the ready-made plan comparison you build in the Stripe Dashboard and paste onto your site as two lines of code. Customers pick a plan on your page and go straight into Stripe’s checkout. Referly tracks it by putting the referral identifier onto the pricing table before a visitor picks a plan, so Stripe carries it through to the payment. There’s a snippet that does this for you.

Using a single button instead of a full table? See Stripe Buy Button. Sharing plain checkout URLs? See Stripe Payment Links. Building checkout from your own backend? The Stripe Session API method is the most precise of all.

What this method tracks

What happens	Tracked	Notes
Someone clicks a referral link	Yes	Recorded by the tracking script, before Stripe is involved
A visitor becomes a referral at checkout	Yes	Created when the checkout started from the table completes
A free trial started from the table	Yes	The referral appears with the plan name. No reward until the first real payment
The first payment	Yes	Sale, amount, plan and commission arrive together
Subscription renewals	Yes	Matched to the original referral by the customer’s email
Plan changes and upgrades	Yes	The new amount is used for the next commission
Multiple currencies	Yes	Converted into your program’s currency
Which plan was bought	Yes	Used for product-based commissions
Tax	Yes	Captured separately, and excluded from the commission if you’ve turned that on in Settings then Program Details
Refunds	Yes	The matching reward is voided — see refunds
A purchase made with an affiliate’s promo code	Yes	Promo codes take priority over the link

What it can’t track

Sign-ups before payment. The referral only exists once someone completes checkout. If you want a referral recorded at sign-up, you need the Session API method.
A table that finished loading before the referral identifier was ready. Both load independently, so this needs verifying rather than assuming — see make sure the identifier arrived.
A referral identifier Stripe rejects. Stripe only accepts letters, numbers, dashes and underscores here and silently ignores anything else. Keep affiliate codes plain — no spaces, dots or accented characters.
A buyer who switches devices between clicking the referral link and paying.
A buyer whose browser blocked the script, or who cleared their cookies in between.
A purchase after the cookie window closed. See tracking methods.
Live payments while you’re connected in test mode, and the reverse. Referly deliberately ignores the mismatched ones.

Before you start

A Stripe account you can log into as an administrator

You’ll authorize Referly from inside Stripe, so you need permission to connect apps.

Somewhere to paste code on your site

You need to be able to add code to the head section of your pages, and to place the pricing table where you want it.

Your commission plan set up

Have it ready before the first sale arrives. See affiliate program setup.

Step 1: Build your pricing table in Stripe

Skip this if your table is already on your site.

Open pricing tables in Stripe

In the Stripe Dashboard, go to Product catalog, then Pricing tables.

Create the table

Select Create pricing table and add your products — up to four per billing interval. Add a free trial here if you offer one.

Set the look and the payment settings

Use Display settings to match your brand, and Payment settings to choose what customer information Stripe collects. Stripe’s full walkthrough is in their pricing table guide.

Turn on promotion codes if your affiliates use them

In the payment settings, allow customers to enter a promotion code at checkout. Without it, an affiliate’s promo code can’t be used. See coupons and promo codes.

Copy the embed code

Select Copy code. Stripe gives you two lines — a script tag and the table itself:

<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<stripe-pricing-table
  pricing-table-id="prctbl_YOUR_TABLE_ID"
  publishable-key="pk_live_YOUR_KEY">
</stripe-pricing-table>

Paste it where you want the table to appear on your page.

You don’t need to change the embed code for Referly. The identifier gets added to it automatically once the snippet in Step 4 is in place.

Step 2: Install the tracking script

The tracking script records clicks and remembers which affiliate sent each visitor. Nothing works without it. Open Integrations from the left sidebar, find the Stripe Pricing Table card, and select it. The guide that opens has your script already filled in with your program’s ID. Copy that snippet and paste it into the head section of every page on your site — especially your pricing page. It looks like this:

<script
  src="https://referly.so/affiliate-tracker.js"
  data-affiliate
  data-program-id="YOUR_PROGRAM_ID"
  async>
</script>

Copy the snippet from your dashboard rather than from this page. Your program ID is unique, and programs run by an agency load the script from a different address.

If you use Google Tag Manager, the same guide has a Tag Manager version to add as a Custom HTML tag firing on all pages.

Step 3: Connect your Stripe account

Connecting Stripe is what lets Referly hear about payments. You don’t create API keys and you don’t set anything up by hand — you authorize Referly’s app from inside Stripe.

Open the connect dialog

On the Integrations page, select Connect Integration at the top right, then choose Stripe.

Choose live or test

Select Connect Stripe Account for your real account, or Connect Test Mode to connect a sandbox first. Testing first is the safer order.

Authorize Referly in Stripe

A Stripe page opens in a new tab. Sign in, pick the account from the account picker at the top, and confirm. If you’re connecting test mode, make sure a sandbox is selected — Stripe explains sandboxes in their test mode guide.

Confirm the connection

Back in Referly, the Stripe panel shows a green Connected badge with your account name, or a yellow Test Mode badge for a sandbox.

The badge colour decides which payments count. Yellow Test Mode means real payments are ignored. Green Connected means test payments are ignored. This is the most common reason a correct setup appears to record nothing.

Step 4: Add the pricing table snippet

This is the piece that does the work. It waits for the referral identifier, then adds it to your pricing table so it travels with the customer into Stripe’s checkout. Copy it from the Stripe Pricing Table guide on the Integrations page and paste it into the head section, after the tracking script from Step 2. Order matters — the snippet needs the tracking script to have loaded first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
(function () {
  let linksUpdated = false;
  let updateAttempts = 0;
  const MAX_ATTEMPTS = 5;

  function updateStripeLinks() {
    updateAttempts++;
    if (updateAttempts > MAX_ATTEMPTS) return;
    if (linksUpdated) return;

    const affiliateId = window.affiliateId;
    if (!affiliateId) return;

    let updatedCount = 0;

    $('a[href^="https://buy.stripe.com/"]').each(function () {
      const $link = $(this);
      const oldUrl = $link.attr("href");
      if (!oldUrl.includes("client_reference_id")) {
        const separator = oldUrl.includes("?") ? "&" : "?";
        $link.attr("href", oldUrl + separator + "client_reference_id=" + affiliateId);
        updatedCount++;
      }
    });

    $("[pricing-table-id]").each(function () {
      $(this).attr("client-reference-id", affiliateId);
      updatedCount++;
    });

    $("[buy-button-id]").each(function () {
      $(this).attr("client-reference-id", affiliateId);
      updatedCount++;
    });

    if (updatedCount > 0) linksUpdated = true;
  }

  if (typeof jQuery === "undefined") {
    console.error("[Referly Stripe] jQuery is required but not loaded");
    return;
  }

  $(document).ready(function () {
    window.addEventListener("affiliate_id_ready", function () {
      setTimeout(updateStripeLinks, 150);
    });
    window.addEventListener("affiliate_referral_ready", function () {
      setTimeout(updateStripeLinks, 150);
    });

    const checkInterval = setInterval(function () {
      if (window.affiliateId && !linksUpdated) updateStripeLinks();
      if (linksUpdated || updateAttempts >= MAX_ATTEMPTS) clearInterval(checkInterval);
    }, 500);

    setTimeout(function () {
      clearInterval(checkInterval);
      if (!linksUpdated && window.affiliateId) updateStripeLinks();
    }, 3000);
  });
})();
</script>

The snippet needs jQuery, which is why the first line loads it. If your site already loads jQuery, delete that first line — loading it twice can break other scripts on your page.

The same snippet also handles payment links and buy buttons, so you only need it once even if you use more than one.

Make sure the identifier arrived

This step matters more for a pricing table than for a plain link, and it’s worth doing properly rather than assuming. The pricing table is loaded and drawn by Stripe’s own code, and your visitor’s referral identifier is fetched by Referly’s code. The two happen independently, so the only way to know they lined up is to check.

Visit your pricing page through a referral link

Use a private window and a real affiliate’s code, for example your-domain.com/pricing?ref=THEIRCODE.

Inspect the pricing table element

Right-click the pricing table and choose Inspect. Find the stripe-pricing-table element in your page. It should now carry a client-reference-id attribute with a value in it.

Then confirm with a real test purchase

The attribute being present is a good sign, but not proof. Complete a test checkout from the table and confirm the value reaches Stripe — the next section walks through it.

If the identifier never lands

If your test purchase shows an empty Client reference ID in Stripe, the table had already finished loading before the identifier was ready. Set the attribute yourself instead of relying on the snippet, and hold the table back until you have a value:

<div id="pricing-table-slot"></div>

<script>
  function renderPricingTable(referralId) {
    const table = document.createElement("stripe-pricing-table");
    table.setAttribute("pricing-table-id", "prctbl_YOUR_TABLE_ID");
    table.setAttribute("publishable-key", "pk_live_YOUR_KEY");
    if (referralId) {
      table.setAttribute("client-reference-id", referralId);
    }
    document.getElementById("pricing-table-slot").appendChild(table);
  }

  if (window.affiliateId) {
    renderPricingTable(window.affiliateId);
  } else {
    let rendered = false;
    window.addEventListener("affiliate_id_ready", function (event) {
      if (!rendered) {
        rendered = true;
        renderPricingTable(event.detail.clickId);
      }
    });
    // Draw the table anyway if no referral turns up
    setTimeout(function () {
      if (!rendered) {
        rendered = true;
        renderPricingTable(window.affiliateId || null);
      }
    }, 2000);
  }
</script>

Keep Stripe’s own pricing-table.js script tag on the page as well — this only replaces the table element, not the script that powers it.

Always draw the table eventually, even when there’s no referral. Most of your visitors won’t come from an affiliate, and they still need to be able to buy.

Step 5: Test the whole flow

Test before you send a single affiliate link out, with your Stripe connection showing the yellow Test Mode badge.

Switch Stripe to a sandbox and make a test table

In the Stripe Dashboard, use the account picker at the top to switch into a sandbox, then build a pricing table there. Test and live tables have different IDs and different publishable keys, so use the test embed code on a test page.

Visit your pricing page through a referral link

Open it in a private window with a real affiliate’s code.

Check the attribute is set

Inspect the pricing table element and confirm it has a client-reference-id with a value.

Buy a plan with a test card

Pick a plan and pay with Stripe’s test card 4242 4242 4242 4242, any future expiry, and any three-digit security code. The full list is in Stripe’s testing guide.

Confirm it in Stripe

Open the payment in the Stripe Dashboard and check the Checkout Session shows your value in Client reference ID. This is the check that actually matters.

Confirm it in Referly

Open Referrals in the left sidebar — the customer should be listed against the right affiliate with the plan name filled in. Then open Rewards to see the commission.

When the Checkout Session in Stripe carries the value and the referral in Referly shows the right affiliate, your setup works. Repeat once in live mode with a small real payment you refund afterwards — the refund should void the reward.

Go live

On the Integrations page, open the Stripe panel and select Disconnect.
Select Connect Stripe Account and authorize your live account.
Confirm the badge is green and reads Connected.
Swap the test pricing table embed code on your site for the live one, including the live publishable key.

Referrals created during testing stay in your dashboard. Delete them before you launch if you don’t want test data in your reports.

Troubleshooting

The pricing table has no client-reference-id attribute

Work through these in order:

Is the tracking script loading? Open your browser’s developer console and type window.affiliateId. If it’s empty, go back to Step 2 — the script isn’t running, or you didn’t arrive through a referral link.
Is jQuery loaded? The console shows an error mentioning jQuery if it’s missing. The snippet does nothing without it.
Is the snippet after the tracking script? If the order is reversed, the snippet runs too early.
Is the table added to the page later? If a pop-up or a tab reveals the table after the page has settled, the snippet has already stopped looking. Use the manual approach.

The attribute is there but Stripe's Client reference ID is empty

Two likely causes. Either the table finished drawing before the attribute was set, in which case use the manual approach. Or Stripe rejected the value — it only accepts letters, numbers, dashes and underscores, and drops anything else without warning. Check the affiliate’s code for spaces or punctuation.

Nothing appears in Referly at all

Almost always the test-mode mismatch. A yellow Test Mode badge means live payments are ignored, a green Connected badge means test payments are ignored. Reconnect in the mode you’re actually testing in.If the badge is right, confirm the payment actually succeeded in Stripe.

The referral appeared but there's no reward

Normal for a free trial — the reward is created when money actually moves. If a payment did go through, check the affiliate is on a commission plan that covers the plan they sold.

The wrong affiliate got the sale

Check whether a promo code was used at checkout. An affiliate’s promo code takes priority over the link, so someone who clicked one affiliate’s link but typed another’s code is credited to the code owner. You can move the sale by changing the referral’s affiliate.

Renewals aren't paying commission

Renewals are matched by the customer’s email address. Compare the email on the Stripe customer with the email on the referral in Referly — if they differ, the connection is broken.

The sale showed up late

If a payment arrives before Referly has finished creating the referral, it’s held and retried a few minutes later rather than dropped. Wait about ten minutes before assuming a sale is missing.

Stripe integration overview

Every way to connect Stripe, and which one fits you.

Stripe Buy Button

The same approach for a single embedded buy button.

Stripe Session API

The most precise method, if you have a developer.

Tracking methods

Set your cookie duration and how clicks are attributed.

Getting started

Managing your program

Engaging affiliates

Gamification

Growth

Program settings

Integrations

Billing and plans

For agencies

For affiliates

Stripe Pricing Table

What this method tracks

What it can’t track

Before you start

Step 1: Build your pricing table in Stripe

Step 2: Install the tracking script

Step 3: Connect your Stripe account

Step 4: Add the pricing table snippet

Make sure the identifier arrived

If the identifier never lands

Step 5: Test the whole flow

Go live

Troubleshooting

Stripe integration overview

Stripe Buy Button

Stripe Session API

Tracking methods

​What this method tracks

​What it can’t track

​Before you start

​Step 1: Build your pricing table in Stripe

​Step 2: Install the tracking script

​Step 3: Connect your Stripe account

​Step 4: Add the pricing table snippet

​Make sure the identifier arrived

​If the identifier never lands

​Step 5: Test the whole flow

​Go live

​Troubleshooting

​Related

Stripe integration overview

Stripe Buy Button

Stripe Session API

Tracking methods

What this method tracks

What it can’t track

Before you start

Step 1: Build your pricing table in Stripe

Step 2: Install the tracking script

Step 3: Connect your Stripe account

Step 4: Add the pricing table snippet

Make sure the identifier arrived

If the identifier never lands

Step 5: Test the whole flow

Go live

Troubleshooting

Related