Hello there! In this article, I'll demonstrate how to pre-fill your Stripe checkout with coupons, which can be an excellent way to reward your customers and encourage conversions. I'll cover two methods: using data attributes and using coupon links. Let's dive in!
Method 1: Using Data Attributes
This method will launch the checkout immediately after sign up. These are handy for applying automatic discounts to plans on your site (Black Friday, sales, etc), selling discounted add-ons, etc.
- Set up your pricing table: For this example, let's say I have a pricing table with three plans: Pro, Empire, and Unicorn. I want to add a 25% off coupon to the Pro plan so that when a member clicks on the "Buy Now" button, the checkout will open and be pre-filled with the 25% off coupon.
- Navigate to Stripe: Head over to your Stripe dashboard and click on the coupon you'd like to pre-fill, in this case, the 25% off coupon. Copy the coupon ID from the top right corner.
- Add the data attribute to your button: Go back to your Webflow project and click on the "Buy Now" button for the Pro plan. Add an attribute called
data-ms-coupon="Your-Coupon-Id", and for the value, paste the ID you copied from Stripe. Only works for new customers. Existing customers must use a coupon code. - Publish your site: Publish your site and navigate back to the pricing table. Refresh the page, and when you click the "Buy Now" button for the Pro plan, the checkout will open with the 25% off coupon already applied.
Note: If you add a coupon via a data attribute, it only applies to that specific button.
Method 2: Using Coupon Links
This method will save the coupon to session storage and apply the coupon whenever the member clicks a pricing button. These are handy if you want to include coupon links inside of your marketing emails, want to send a coupon link directly to a member, or you want to give someone a coupon in your UI without immediately launching the Stripe checkout.
- Select your coupon: Go back to your Stripe dashboard, navigate to coupons, and select the coupon you want to use, say a 50% off coupon. You can either copy the promo ID or the coupon ID; either one will work. You cannot use the member-facing promotion code.
- Create a link with a query parameter: Navigate to your website and create a link with a query parameter. The query parameter should look like
?couponId=ID_From_Stripe, where the Id is the coupon ID or promo ID of the coupon you want to apply. This link can point anywhere on your website: directly to your signup page, your pricing page, or your homepage – it doesn't matter. The parameter is case sensitive. - Use the link: When a customer clicks on the link you've created and goes to your website, the coupon will be applied automatically. If you've also set a data attribute on a button, the data attribute will always take priority.
That's it! If you have any questions about this process, please feel free to reach out. Thanks for reading!
Comments
8 comments
Hi Duncan, thank you for the update! I have a question. I'd like to give our customers the option to fill out a discount code in a field input. Then check if it's valid or not, then update the price on the order page before going to stripe. Any any idea how to make this work?
Hi Theorie Boef 👋
I can see why you'd want to do that, but I'm afraid it's not possible. We decided to let Stripe handle all of that UI to reduce complexity. Customers will need to enter coupons on the Stripe page.
That said, it might be possible if you create your own input that is able to lookup the coupon using the Stripe API (or a lookup in your own database). However this would need to be custom built by you.
Hello Duncan from Memberstack,
I cannot make it the Method 2 work by adding
?couponID=promo_example... like I do for Method 1. (I'm testing on this page where no data-ms-coupon is used :'( https://www.ordotype.fr/membership/stockage-supplementaire?couponID=promo_XXXXXXXXXXXXX). Do you know why it might happen ? thanksHmmm, very strange! Its not working for me either. Can you double check the coupon settings to confirm that it is enabled for all plans?
Does the promotion code work if you enter it manually at checkout?
If that doesn't work I wonder if it has something to do with SEPA being enabled... Will need to look into this more if that's the case.
Side note: You may want to remove the animated gradient from your signup/login pages. They were slowing my computer down quite a bit and made it hard to login.
Hi Duncan from Memberstack,
I doubled checked the promo code (promo_XXXXXXXXXXX) and it works for this product(for all the products in fact) when I enter it manually at checkout.
I would like to keep the SEPA on if possible :pray:
Thanks for the side note, I'll look into it :)
William de Broucker William de Broucker
The docs were slightly wrong - we just updated it.
You need to use `?couponId` instead of `?couponID` (the correct way has a lower case d)
Thanks a lot ! it works now :)
Hey there! Just wanted to mention that appending ?couponId=XXXXXX to the target URL behind the button didn't work for me so I checked the Stripe documentation and it mentioned the parameter prefilled_promo_code=XXXXXX which I implemented and it worked for me. :)
Please sign in to leave a comment.