Using Stripe's Checkout Promotions & Coupons feature with Bubble.io

Using Stripe's Checkout Promotions & Coupons feature with Bubble.io

Simon Jenner

Wednesday, 7 October 2020

We explore Stripe checkouts new promotions feature

Posted in:

No-Code

In August 2020 Stripe launched new features into their Checkout which provided the support for promotions & coupons.
Coupons are merchant-facing objects you can use to control discounts on subscriptions or invoices. Promotion codes are customer-facing codes that are created on top of coupons and can be shared directly with your customers.
As of October 2020 none of the major Stripe plugins for Bubble.io currently support this feature, so if we want to take advantage of this feature and any other new features then we need to move away from plugins and create our own API calls for Stripe.
Although lots of bubblers shy away from doing this, because its more complicated it has some major advantages:
1- You don't need to wait for the plugin developer to update their plugin (this can take months, most will not commit to timescales so its a complete unknown)
2- You can take advantage of features as soon as they are released by updating your API calls yourself.
3- You are not stuck with the limitations of a plugin which supports at best a small percentage of Stripe's API's and often only the bare bones of each individual API call.
In this lesson we are going to show you how to call Stripe's checkout with the promotion feature enabled. This lesson assumes you have the basics of a Stripe API already built.
Adding Promotions to the checkout API call
We need to add a new parameter in our API creation session call called 'allow_promotion_codes' which can have either a value of true to enable promotions or false to disable promotions.
Creating a session
Prior to calling the Stripe checkout you have to create a session in Stripe and then use the ID of the session to pass to the Stripe Checkout. This image shows the call to the CreateSession API call with our new parameter for allowing promotions set too true.

Calling the checkout
Once a session is created in Stripe we pass the ID that Stripe allocates to the Session to our call to the Checkout. In order to use Stripe.js we need to use a tool to run javascript in Bubble, we can do this with the Toolbox plugin by Misha V. We use the Run Javascript tool within the toolbox to call the Stripe Checkout.

Promotions in the Checkout
Here is a checkout without promotions

Here is a checkout with promotions enabled, you can see you can add a promotion code and apply it to influence the total.
Here is a checkout with a promotion code "BOOTCAMP50" applied to it which provides a 50% discount.

Creating Promotions/Coupons
Stripe does provide an API to be able to create and manage promotions, we are not going to cover these here. You can also create them via the Stripe Dashboard under the products menu.

Launch Your Startup Fast and Affordably! Our no-code approach is perfect for non-tech founders. With a simple 3-step process: START, LAUNCH, GROW, join over 1400 startups we've successfully launched. Start your journey today!

Join