Variable amount pricing in Stripe Checkout

Summary

In 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

00:00

💡 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.

05:02

📋 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.

Keywords

💡Variable Amount Pricing

Variable amount pricing refers to the ability to set flexible prices that are not fixed. In the video, this concept is applied to allow customers to input their own donation amounts or choose different pricing options during checkout. This is useful for dynamic pricing scenarios, such as tips or donations.

💡Checkout Session

A checkout session in Stripe is a pre-configured flow where users are redirected to finalize their payment. In the video, the process involves collecting the user's donation amount and passing it to Stripe, which creates a session and returns a URL to complete the payment. The checkout session is central to the customer’s payment experience.

💡Price ID

The Price ID is a unique identifier for a specific price associated with a product in Stripe. The video shows how a fixed $10 donation price is hard-coded using a price ID. This ID ensures that the correct price is applied during the checkout session.

💡Customer Chooses Price

This is a pricing model in Stripe that allows the customer to decide how much they want to pay. In the video, this model is used for donations, where users can input their own donation amount, with the default set to $10, and minimum and maximum amounts specified.

💡Price Data

Price data is a way to dynamically create a price during the creation of a checkout session, instead of relying on a pre-defined price. In the video, this approach is used when the price is calculated on the fly based on the customer’s input, allowing for flexible pricing without hard-coding price IDs.

💡Product Data

Product data refers to the attributes of a product that are passed dynamically when creating a checkout session. The video demonstrates creating a new product on the fly with a name, description, and image, which is especially useful for scenarios where products are not pre-defined.

💡Unit Amount

The unit amount is the actual price that the customer will be charged, typically represented in the smallest currency unit (e.g., cents for USD). In the video, the unit amount is calculated dynamically based on user input, and it is passed as part of the price data to Stripe.

💡Stripe API

The Stripe API is the programming interface that allows developers to interact with Stripe’s payment processing services. In the video, the API is used to create checkout sessions, dynamically generate prices, and pass product and pricing data for flexible payment processing.

💡Donation

A donation refers to a voluntary contribution, typically in the context of charity or non-profit organizations. In the video, the example revolves around setting up a page to collect donations, where the donation amount can be specified by the customer using the 'customer chooses price' model.

💡Submit Type

Submit type defines the label shown on the payment button in Stripe Checkout. In the video, the submit type is set to 'donate' for a donation page instead of the default 'pay.' This subtle customization helps tailor the checkout experience to the nature of the transaction (e.g., donations versus regular purchases).

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]