Setup Stripe Payment Links

Payment Links are a simple way to accept payments or sell subscriptions online without the need to create a full digital storefront. You can accept more than 20 payment methods—including credit and debit cards, Apple Pay, and Google Pay—all through a single payment link. Additionally, Payment Links automatically adapt to your customer’s preferred browser language, supporting over 30 languages.

In this guide, you will learn how to set up your payment link to track referrals. Once a successful payment is made through a referral link, Referral Rocket will track the referral.

Step 1: Add the Referral Rocket Global Script to Your Website

You can find the global script under "Installation" on the Campaign Detail page in your Referral Rocket account. Copy the script and paste it into the landing page or the custom code section of your website, inside the <Head> tags.

<script
        type="text/javascript"
        campaign-id="your-campaign-Id"
        defer
        src="https://referralrocket.io/widget/widgetIndex.js">
    </script>

How to Add Custom Code with Popular Website Builders

Webflow: Go to Project Settings > Custom Code > Paste the script.
Framer: Open the project settings > Code tab > Paste the script.
WordPress: Use the header/footer plugin or paste it directly in the theme’s header file.

Step 2: Update Your Payment Link Page

After adding the global script, the next step is to configure your payment link page. This script will track referral data and associate it with your Stripe payment information, allowing Stripe to properly track referral details.

 <script>
        function updateButtonUrls() {
            const prefix = 'a[href^="https://buy.stripe.com"]';
            var buttons = document.querySelectorAll(prefix);
            const referralCode = window.Rocket.getCampaign().getReferralCode();
            if (referralCode && referralCode.trim() !== '') {
                buttons.forEach(function (btn) {
                    
                    let url = new URL(btn.href);
                    let params = new URLSearchParams(url.search);
                    
                    if (!params.has("client_reference_id")) {
                        params.set("client_reference_id", referralCode);
                        url.search = params.toString();
                        btn.href = url.toString();
                    }
                });
            }
        }


        setTimeout(updateButtonUrls, 1000);
        setTimeout(updateButtonUrls, 2000);
</script>

This script ensures that the referral code is included when the customer clicks the payment link, allowing Stripe to track the referral.

Step 3: Test the Integration

After adding the necessary scripts, you can test to ensure everything is working correctly with your Stripe integration. Follow these steps to perform a test:

Create a Test Affiliate Participant:
1. Go to the Referral Rocket hosted campaign widget, or embed it on your site.
2. You can use any email address to sign up as a participant.
Get the Referral Link:
1. After submitting, Referral Rocket will generate a unique affiliate link for the participant.
2. Open this link in a new tab. It will land you on your landing page.
Test the Payment Link:
1. Click the payment link to proceed to the Stripe Checkout page.
2. Use Stripe's Test Mode to avoid any charges while testing.
Complete the Payment:
1. Complete the test payment to verify that the referral information is being tracked correctly.
2. Head over to Referral Rocket and ensure that the referred participant is properly recorded in the system.
3. You can also check the reward section to confirm that rewards are being tracked and assigned.

PreviousSetup Stripe Pricing Table NextSetup Stripe Payment Button

Last updated 1 month ago

Step 1: Add the Referral Rocket Global Script to Your Website

You can find the global script under "Installation" on the Campaign Detail page in your Referral Rocket account. Copy the script and paste it into the landing page or the custom code section of your website, inside the <Head> tags.

<script
        type="text/javascript"
        campaign-id="your-campaign-Id"
        defer
        src="https://referralrocket.io/widget/widgetIndex.js">
    </script>

How to Add Custom Code with Popular Website Builders

Webflow: Go to Project Settings > Custom Code > Paste the script.

Framer: Open the project settings > Code tab > Paste the script.

WordPress: Use the header/footer plugin or paste it directly in the theme’s header file.

Step 2: Update Your Payment Link Page

 <script>
        function updateButtonUrls() {
            const prefix = 'a[href^="https://buy.stripe.com"]';
            var buttons = document.querySelectorAll(prefix);
            const referralCode = window.Rocket.getCampaign().getReferralCode();
            if (referralCode && referralCode.trim() !== '') {
                buttons.forEach(function (btn) {
                    
                    let url = new URL(btn.href);
                    let params = new URLSearchParams(url.search);
                    
                    if (!params.has("client_reference_id")) {
                        params.set("client_reference_id", referralCode);
                        url.search = params.toString();
                        btn.href = url.toString();
                    }
                });
            }
        }


        setTimeout(updateButtonUrls, 1000);
        setTimeout(updateButtonUrls, 2000);
</script>

This script ensures that the referral code is included when the customer clicks the payment link, allowing Stripe to track the referral.

Step 3: Test the Integration

After adding the necessary scripts, you can test to ensure everything is working correctly with your Stripe integration. Follow these steps to perform a test:

Create a Test Affiliate Participant:

Go to the Referral Rocket hosted campaign widget, or embed it on your site.
You can use any email address to sign up as a participant.

Get the Referral Link:

After submitting, Referral Rocket will generate a unique affiliate link for the participant.
Open this link in a new tab. It will land you on your landing page.

Test the Payment Link:

Click the payment link to proceed to the Stripe Checkout page.
Use Stripe's Test Mode to avoid any charges while testing.

Complete the Payment:

Complete the test payment to verify that the referral information is being tracked correctly.
Head over to Referral Rocket and ensure that the referred participant is properly recorded in the system.
You can also check the reward section to confirm that rewards are being tracked and assigned.