Automatically Apply a Coupon a Checkout

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. These are handy for applying automatic discounts to plans on your site (Black Friday, sales, etc), selling discounted add-ons, etc. 

1. 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.
   
2. 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.
   
3. 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.
   
4. 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. 

1. 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.
   
2. Create a link with a query parameter: Navigate to your website and create a link with a query parameter. The query parameter should look lik ?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.
3. 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!