Setup Stripe Payment Button

PreviousSetup Stripe Payment Links NextCashfree

Last updated 4 months ago

Setup Stripe Payment Button

The Buy Button, powered by Stripe Payment Links, lets you accept payments or sell subscriptions directly from your website without building a separate store. Create a button by selecting or creating a Payment Link, customising the products, and designing the checkout experience. The button supports over 20 payment methods, including cards, Apple Pay, and Google Pay, and adapts to your customer’s preferred language. Once configured, generate the embed code and paste it into your website to start accepting payments seamlessly.

In this guide, you will learn how to set up your buy button 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

To track referrals, add the ReferralRocket global script to your website. This script will automatically capture any referral links on your site.

Here’s how to add it:

You can find the global script under "Installation" on the Campaign Detail page in your Referral Rocket account.
1. This includes your unique Referral Rocket campaign ID

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

Copy the script and paste it into the landing page or the custom code section of your website, inside the <head> or <body> tags.

How to Add Custom Code with Popular Website Builders

Step 2: Update Your buy button Page

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

Add this script to your payment page:

<script>
        const updateStripeBtns = () => {
            const referralCode = window.Rocket.getCampaign().getReferralCode();
            if (referralCode && referralCode.trim() !== '') {
                const buyButtons = document.querySelectorAll("stripe-buy-button");
                if (buyButtons.length > 0) {
                    buyButtons.forEach(BuyBtn => {
                        BuyBtn.setAttribute("client-reference-id", referralCode);
                    });
                }
            }
        };


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

This script ensures that the referral code is included when the customer clicks the buy button, 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 buy button:
1. Click the buy button 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.