Setup Stripe Pricing Table

Stripe offers a customizable Pricing Table component, which serves as an embeddable interface for displaying various subscription pricing options. It integrates seamlessly with Stripe Checkout, enabling users to easily embed pricing information on their websites.

The basic implementation of the Pricing Table component is as follows:

To send the referral code to Stripe using the Pricing Table, you need to include it as an attribute within the component. For example:

Stripe automatically retrieves the client_reference_id from the component and includes it in the Checkout Session object.

To add the referral code to the Pricing Table, users can insert the following script on the page where the Pricing Table is located. This script updates the client_reference_id and referral code as key-value pairs in the Pricing Table component. Unlike Payment Links or Buy Buttons, the referral code is not visible in the URL when customers click on the Pricing Table. However, Stripe internally tracks the referral data to ensure proper affiliate tracking.

Step 1

1. Add the universal script on the page

// Add this script in the HEAD tag
<script type="text/javascript" campaign-id="YOUR-CAMPAIGN-ID" 
defer src="https://app.referralrocket.io/widget/widgetIndex.js">
</script>

Step 2

Here’s the script for dynamically updating the Pricing Table component:

// Some code
<script>
        const updatePricingTables = () => {
            const refCode = window.Rocket.getCampaign().getReferralCode();
            if (refCode && refCode.trim() !== '') {
                const tables = document.querySelectorAll("stripe-pricing-table");
                if (tables.length > 0) {
                    tables.forEach(stripeTab => {
                        const code = stripeTab.getAttribute("client-reference-id")
                        // Update the client-reference-id only if it differs from
                        // the current referral code
                        if (code !== refCode) {
                            stripeTab.setAttribute("client-reference-id",refCode);
                        }
                    });
                }
            }
        };
        setTimeout(updatePricingTables, 1000);
        setTimeout(updatePricingTables, 2200);
        setTimeout(updatePricingTables, 3200);
</script>

This script ensures that the client_reference_id is updated dynamically for accurate affiliate tracking, even though the referral code will not be visible in the URL.