Variable amount pricing in Stripe Checkout
Summary
TLDRIn this tutorial, you'll learn how to implement variable amount pricing using Stripe. It covers how to allow customers to specify their own amounts at checkout, which is useful for donations or tipping. The video demonstrates both hard-coded pricing and dynamic price creation, where users can input their preferred amounts. You’ll see how to handle pricing data, set default amounts, apply limits, and create products or prices on the fly. This approach is ideal for managing donations or handling a large product catalog outside of Stripe.
Takeaways
- 💡 Variable amount pricing allows customers to specify their own amounts for payments, useful for donations and tips.
- 🎯 In the demo, a fixed $10 donation is hardcoded, but Stripe offers a 'customer chooses price' option to allow flexible pricing.
- 🛠️ You can set default, minimum, and maximum price limits when using customer-chosen pricing in Stripe.
- 📋 Stripe checkout sessions are used to handle payments, and prices can be created dynamically through API calls.
- 📊 For dynamic pricing, developers can use 'price_data' to create prices on the fly during the checkout session creation process.
- 🖥️ Stripe API allows passing 'price_data' to dynamically generate prices and 'product_data' to create new products on the fly.
- 💲 Payment amounts are handled in the smallest currency denomination, such as cents, when creating a price in Stripe.
- 📝 Developers can pass a product ID from the Stripe dashboard or dynamically create a product using 'product_data'.
- 🚀 The script demonstrates an inline method for collecting donations directly on the website before redirecting to Stripe for payment.
- 🔧 Stripe's 'price_data' and 'product_data' features are versatile and can be used for invoicing and subscription management, especially with large catalogs.
Q & A
What is the purpose of variable amount pricing in Stripe?
-Variable amount pricing allows customers to specify their own payment amounts at checkout. This is useful for scenarios like donations or tips, where the amount might not be predefined.
How does the 'customer chooses price' model work in Stripe?
-In the 'customer chooses price' model, a default amount is shown to the customer, but they can modify the amount within set minimum and maximum limits before completing the transaction.
What is the difference between passing a price ID and using 'price_data' in Stripe's API?
-Passing a price ID involves using a pre-defined price, while 'price_data' dynamically creates a price when the checkout session is created, allowing for more flexibility like setting custom amounts on the fly.
How can the submit button's label in Stripe Checkout be customized?
-The submit button’s label can be customized by setting the 'submit_type' in the Stripe API. For example, setting it to 'donate' changes the button text to 'Donate' instead of the default 'Pay.'
What is the benefit of using 'product_data' when creating prices dynamically?
-'Product_data' allows you to create products dynamically at the time of checkout, instead of using pre-existing products. This is helpful for unique or ad hoc items, like donations, where you may want to customize the product details.
Why is it necessary to convert the amount into cents when passing it to Stripe?
-Stripe expects the payment amount to be provided in the smallest currency denomination (cents for USD). Therefore, when collecting an amount, it's necessary to multiply the value by 100 to convert dollars into cents.
In which scenarios is creating a price on the fly useful?
-Creating a price on the fly is useful in scenarios like donations, where the amount is user-specified, or when managing a large product catalog outside of Stripe where dynamically generating prices simplifies the checkout process.
What does the 'step' attribute in the input box represent when collecting a donation amount?
-The 'step' attribute defines the granularity of the number input. In this case, 'step=0.01' allows users to enter amounts in decimal form, which is essential for specifying donations down to the cent.
How can the payment flow be customized to support dynamic donation amounts?
-To support dynamic donation amounts, you can add an input box to collect the donation amount from the user and then pass this amount dynamically into the Stripe API using 'price_data' to create a price with that specific amount.
What is meant by subordinate object creation in Stripe’s API?
-Subordinate object creation in Stripe’s API refers to the ability to create related objects (like prices or products) on the fly within the context of another operation, such as creating a checkout session.
Outlines
💡 Introduction to Variable Amount Pricing
In this episode, the speaker introduces the concept of variable amount pricing, where users can pass custom amounts during checkout. This feature is useful for enabling customers to specify their own payment amounts, such as for donations or tips. It also allows for dynamic pricing without maintaining a product catalog in Stripe.
📋 Example: Collecting Donations with Hard-Coded Amounts
The speaker walks through an example where a page collects donations. The demo uses a hard-coded price ID of $10 for donations, with a Stripe API call to create a checkout session. The server redirects the user to the Stripe checkout page. The code demonstrates how Stripe generates a checkout session using a fixed price set in the Stripe dashboard for this donation.
🛠️ Creating Dynamic Prices with Customer-Specified Amounts
The speaker shows how to allow customers to choose their own price using Stripe’s 'Customer Chooses Price' model. You can set a default amount (e.g., $10) and configure minimum and maximum limits (e.g., $5 to $500). By modifying the server code, the checkout session can now accept custom donation amounts. The demo shows how the user can input a different amount, and the Stripe checkout page updates accordingly.
🔀 Passing Dynamic Prices via the Frontend
The speaker explains how to create a dynamic pricing input field on the frontend. Users can now specify their own amounts before being redirected to Stripe. On the server, the amount is extracted from the request and converted into cents to comply with Stripe's smallest denomination requirement. The amount is then used to dynamically create a price within the checkout session, eliminating the need for a fixed price ID.
🧩 Creating Prices On-the-Fly with Stripe
Instead of creating a fixed price, the speaker explains an alternative approach—creating prices dynamically during the checkout session using the `price_data` object. The price is defined at the time of the API call, specifying the unit amount and currency. This eliminates the need to pre-create prices and allows for more flexibility in use cases like donations or dynamic pricing products.
🛒 Creating Products On-the-Fly
The speaker expands on the dynamic pricing approach by demonstrating how to also create products on-the-fly with Stripe using `product_data`. Instead of using a predefined product, the demo shows how to dynamically set the product name, description, and even images during the checkout session. This flexibility is ideal for handling products that don’t exist in the Stripe dashboard.
🎉 Conclusion: Best Practices for Handling Large Catalogs
The speaker concludes by summarizing the dynamic price and product creation features. While these features are useful for specific scenarios like donations, the recommendation is to generally create products and prices inside the Stripe dashboard when managing larger product catalogs. The episode wraps up with a thank you message and a preview of upcoming content.
Mindmap
Keywords
💡Variable Amount Pricing
💡Checkout Session
💡Price ID
💡Customer Chooses Price
💡Price Data
💡Product Data
💡Unit Amount
💡Stripe API
💡Donation
💡Submit Type
Highlights
Introduction to variable amount pricing, allowing customers to specify their own amount at checkout.
Discussing the use of Stripe API to create a checkout session for donations and redirecting users to a Stripe-hosted payment page.
Hardcoding a fixed price ID for a donation of ten dollars in the initial setup.
Introducing the 'Customer Chooses Price' feature in Stripe, which allows customers to pick a price from a minimum to a maximum amount.
Demonstration of setting a default price with customer price selection options, such as accepting a minimum of five dollars and a maximum of five hundred dollars.
How to use the 'submit type' parameter to customize the Stripe button label to say 'donate' instead of 'pay'.
Dynamic price creation on the fly using the 'price_data' object in the Stripe API when creating a checkout session.
Demonstrating the creation of a custom price dynamically and charging customers based on their specified amount.
Using subordinate object creation in Stripe by passing '_data' suffix properties, allowing dynamic object creation within the API request.
How to handle dynamic product creation on the fly using 'product_data' in the API call, allowing customization of product name, description, and images.
Example of building an input field for users to enter the donation amount, which is then processed and sent to Stripe for dynamic checkout.
Explaining how Stripe processes amounts in the smallest denomination (cents) and how to convert dollars into cents before sending the request.
Recommendation to use pre-defined products and prices in the Stripe dashboard for regular use cases, rather than dynamically creating them unless necessary.
Overview of common use cases for variable amount pricing, such as donations, tips, or handling product catalogs managed outside of Stripe.
Stripe’s 'price_data' and 'product_data' features can also be applied to invoicing and subscription services, offering flexibility for businesses.
Transcripts
hey what's up welcome back in this
episode you're going to learn all about
variable amount pricing we're going to
talk about how you can pass in your own
amounts ad hoc and inline we're also
going to talk about how you might enable
your customers to specify their own
amounts at checkout this is useful for
things like tips or donations and it's
also useful to create inline prices if
you have a big product catalog that's
not actually maintained inside of stripe
[Music]
start off with a simple demo imagine you
had a page here to collect donations and
you have a button that says donate this
is going to make a post request back to
our server and then on our server we'll
make an API call to stripe to create a
checkout session and we're ultimately
redirected to this page
now at this point we are hard coding a
price ID for a donation amount of ten
dollars so we can say yeah we want to
donate ten dollars and we'll ultimately
be redirected back let's take a look at
the code for this so if we jump into vs
code here you'll see that this is the
API call for creating the checkout
session this gives us back a checkout
session object that we then use to
redirect to the session URL
in this case inside of our line items we
are specifying a price this is the ID of
a price if we head over to our stripe
dashboard and go to our products tab we
can see the product for this donation
has a price that has a fixed ten dollar
one-time amount
we can also create these new kinds of
prices so let's add another price here
and instead of using standard pricing we
can use this new pricing model called
customer chooses price
when the customer can choose their price
we can also set a an amount that is
shown by default so perhaps we want to
accept ten dollars by default but we
also might want to set limits like okay
we only want to accept five dollars
minimum and maybe we only want to accept
at most five hundred dollars so we can
add that price and now we have this new
price called customer chooses we can
copy that price ID head back into our
server and paste that in here now we're
using this brand new price
if we go back through our payment flow
restart our demo and click on donate now
when we get to the stripe checkout page
we'll see that the customer has this new
button that allows them to change the
amount from ten dollars to maybe one
hundred dollars and now they can see
that they're going to donate 100 notice
that the button said donate that's
instead of pay we're able to control
that by setting the submit type here to
donate instead of the default which is
just a pay you can also set it to book
there's a couple different options there
all right so now we have a successful
payment for one hundred dollars and that
was something that the customer was able
to set now if we wanted to there's also
another option here where we could
collect the amount on our own form and
then pass that in dynamically this is an
inline use case we're going to create
the price while we're creating the
checkout session so let's take a look at
our index.html file here we might add a
div
with an input box
of type number we're going to make the
step
0.0 because we're using USD today and
we're going to set the name to amount
and that should be good so now if we
head back over to our form we'll notice
that there's now an input box for
someone to specify the amount they want
to pay on the server we want to collect
that amount from the request body so
we're going to pull the amount off of
the request.body and this amount is
going to come in as a dollar amount with
cents so what we want to do is convert
that into a an integer value in cents so
we're going to say a const amount to
charge is actually parse int of amount
times 100 because stripe is going to
expect our amount in the smallest
denomination possible so this is going
to be the sense that we want to actually
charge so instead of passing price here
what we want to do is we're going to
create a price on the fly one option
would be to make an API call here and
say like I don't know a way
stripe.prices dot create and pass in the
unit amount
as the amount to charge
and then take this price this new price
that we created and pass its ID down
into the price but there's another
option and that alternative is instead
of passing the price we can pass price
underscore data and this will
dynamically create a price when the
checkout session is created now inside
of the stripe API this is one of the
patterns is that if you have a property
that has an underscore data suffix we
have this thing called subordinate
object creation that means we're going
to create an a new price object on the
fly so here we can specify the unit
amount as the amount to charge
we could also specify the currency
as USD and finally we do need to specify
the product so in this case we want to
pass we could either pass an ID of a
product so if we go back to the stripe
dashboard here we can grab this ID of
the product and pass that in or we can
create the product in the fly also so
we'll look at that in just a moment so
now if we go back over to our page here
and we entered in four two four two
let's say we want to donate 42.42 cents
now when we're redirected our donation
is for 42.42 so this is a really common
tool if you wanted to accept donations
and you you're collecting the amount
someone is going to donate on your site
before you're redirected it's also a
common use case if you are uh looking up
your products inside of your database
calculating an amount and passing that
to stripe but we still had to know the
ID of the product here so just like we
can pass price underscore data we can
also pass product underscore data and
all of the attributes that we could pass
to create a product are also available
here so we can pass in if we wanted a
name here
um like my donation and then we can pass
in a disc a description that's like
awesome donation
you can also pass images that's an array
of URLs publicly accessible images so
let's save that and go back to our
payment flow one last time if we were
now going to pay fifty dollars we want
to donate or redirect it back to stripe
and now we can see that this product
here is now related to the custom
product and the custom price that were
created
on the fly when we were making our
checkout sessions and now we see that we
are going to make this awesome donation
for fifty dollars and we are going to be
redirected back to our demo so that's a
couple different ways that you can pass
in variable amounts this price
underscore data and product underscore
data approach to creating an ad hoc
price on the Fly while you're making the
API call is also supported inside of
invoicing and subscriptions this is one
of the ways that you might manage a
large product catalog outside of stripe
in practice I would recommend creating
those products and prices inside of the
stripe dashboard and then passing the
price property here
instead of price data most of the time
unless again you are solving for this
donation use case thanks so much for
watching and we'll see in the next one
[Music]
Voir Plus de Vidéos Connexes
What is Transfer Pricing | Transfer Pricing Methods | CMA | CIMA | CA | ACCA | Commerce Specialist |
Donation System to Your Wix Studio Website (NO CODE)
How TO Make A TON Of Money (in just a few minutes)
Exposing price discrimination in online shopping (Marketplace)
Add Your Stripe Connect Account to Gavel Bundles
Stripe Subscriptions in Wized & Webflow (No-Code Stripe Integration in Wized!)
5.0 / 5 (0 votes)