Offering dual-sided incentives

With Dub Partners, you can create dual-sided incentives for your affiliate/referral programs, which give special discounts to customers who sign up via a referral link.

Some examples include:

• 25% discount for the first 12 months
• 30% lifetime discount
• $50 one-off discount

This can drive powerful word-of-mouth growth as partners are more likely to share their link if it gives their audience/user base additional discounts, and on the other hand, their users are more likely to click on their links as well if they're getting a special deal.

You can create one default discount for all partners on your program, and additional discounts for specific partners.

In this article, we'll learn how to set up dual-sided incentives with Dub Partners.

Option 1: With Stripe coupon codes

If you're using Stripe for payments, you can follow these steps to set up dual-sided incentives on Dub:

1

Create coupon in Stripe

Follow this guide to create a coupon code in Stripe with your desired parameters. Once the coupon code is created, be sure to note the unique coupon ID, which we will be using in subsequent steps to create a discount on Dub.

We also recommend creating the same coupon in Stripe's test mode, which will allow you to test the implementation in your preview environment before shipping it to production.

2

Create a discount on Dub

In your group's , page, you're able to add one discount per group.

Click Create to create your first group discount:

Discount Type

• One-off (only for the first sale)
• Recurring (ongoing discounts, e.g. 3 months, 12 months)

Discount model

• Percentage (e.g. 20%, 50%)
• Flat (e.g. $30 off, $50 off)

Stripe coupon ID Input the ID of the Stripe coupon code you generated above here (should be a 8 alphanumeric character)

3

Add coupon logic to checkout flow

Lastly, you'll need to add the coupon logic to your Stripe checkout flow and leverage Dub's Customers API to determine if a user is eligible for a discount or not.

TypeScriptPythonRubyGo

import { dub } from "@/lib/dub.ts"
 
 
const customers = await dub.customers.list({
  externalId: userId, // their user ID within your app
  includeExpandedFields: true,
})
 
const customerDiscount = customers.length > 0 ? customers[0].discount : null
 
 
const stripeSession = await stripe.checkout.sessions.create({
  success_url: "https://app.domain.com/upgraded",
  ...(customerDiscount
    ? {
        discounts: [
          {
            coupon:
              process.env.NODE_ENV !== "production" &&
              customerDiscount.couponTestId
                ? customerDiscount.couponTestId
                : customerDiscount.couponId,
          },
        ],
      }
    : { allow_promotion_codes: true }),
  ...
})

Once this is set up, eligible customers will automatically see the coupon code applied at checkout:

Option 2: With Shopify discount codes

We're planning to add support for dual-sided incentives with Shopify checkout soon – stay tuned! If you want early access to this, feel free to reach out to us.

Displaying discount banner

Once you've set up dual-sided incentives, a potential next step would be to display the discount information on your pricing page / landing page hero.

To do that, all you need is to install the @dub/analytics script with client-side click-tracking enabled – then, when someone lands on your site via a valid referral link, the script will automatically fetch the partner and discount data for you.

This data will be stored as a JSON-stringified object in the dub_partner_data cookie in the following format:

{
  "clickId": "xxx", // unique ID of the click event
  "partner": {
    "id": "pn_xxx", // unique ID of the partner on Dub
    "name": "John Doe", // name of the partner
    "image": "https://example.com/john.png" // avatar of the partner
  },
  "discount": {
    "id": "disc_xxx", // unique ID of the discount on Dub
    "amount": 25, // discount amount (either a percentage or a fixed amount)
    "type": "percentage", // type of the discount (either "percentage" or "fixed")
    "maxDuration": 3, // maximum duration of the discount in months
    "couponId": "XZuejd0Q", // Stripe coupon code
    "couponTestId": "2NMXz81x" // Stripe test coupon ID
  }
}

You can access partner and discount data in your application code using the useAnalytics() hook. If you’re working in a non-React environment, you can use the DubAnalytics object directly.

Here is a quick example of how you can display a discount banner using the useAnalytics() hook:

// Display a banner that says: "John referred you to Acme and gave you 25% off"
import { useAnalytics } from "@dub/analytics/react";
 
function DiscountBanner() {
  const { partner, discount } = useAnalytics();
 
  if (!partner || !discount) {
    return null;
  }
 
  return (
    <div className="flex items-center gap-2">
      <img
        src={partner.image}
        alt={partner.name}
        className="size-6 rounded-full"
      />
      <p>
        {partner.name} referred you to Acme and gave you {discount.amount}{" "}
        {discount.type} off
      </p>
    </div>
  );
}

Here's an example of how the discount banner will look like: