# 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. 

{% embed url="<https://drive.google.com/file/d/1Fuz95HJtC38QetDiUsSPDmjbjwsxwIH3/view?usp=sharing>" %}

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXelCZZwxOt_PwsHIVK5k76vTTFXps4T6UWKmkzny_e3fiHNpPICjGq4TD62kuZqvsCsFwVFk5x7_ijsIJADXqvd7FtEwKGLAEMNnNXIHlIBsOm7Zo7UrhNxmPpr021dK9lH08R8OJAQfABEwUahBVYA0mRi?key=Uwgfnkvj4e8YSfYdAFZr1Q" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXew3s5rtmLfjL-Shys-2Bh65N-yTYlc7e0l5A-oB3yqK_wCDjdiWP9uRSPfOm0qBZxDGJ5oJeYzmgSmt9jG2fqCbF_xFqBfz835WR6hyvrIaBTMZ6ZYDytnlf0bLA8xzNOp4UtPcwKTqfBwdJ9tt3UNc2fd?key=Uwgfnkvj4e8YSfYdAFZr1Q" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe1lqbxF5oe40UV8bq_iYYl5FaD-LCyHTbaXwlwTTUNtR9d8a3FaQ0X7iLCdBoQn1zv3MhtgJ4mO__ZK4rul-7H96JbNMikSu8XxT0lybuS92BVe9YT9LBXbpxgfIChHf3a1qbCJlJ7bVBePLuVdl5OPZ_M?key=Uwgfnkvj4e8YSfYdAFZr1Q" alt=""><figcaption></figcaption></figure>

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.

<br>