{"id":28167,"date":"2022-03-21T18:53:05","date_gmt":"2022-03-21T18:53:05","guid":{"rendered":"http:\/\/Building-a-Shopping-Cart-with-Redwood"},"modified":"2022-03-21T18:53:05","modified_gmt":"2022-03-21T18:53:05","slug":"building-a-shopping-cart-with-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/","title":{"rendered":"Building a Shopping Cart with Redwood"},"content":{"rendered":"

Having a shopping cart before you check out is something that good online stores have. It shows all of the items you want to be shipped to you and then you get to check out. It\u2019s important to have this functionality implemented securely so that you aren\u2019t putting users\u2019 information at risk<\/p>\n

We\u2019re going to build a quick shopping cart with checkout abilities in Redwood, using Stripe to handle all of the checkout functionality.<\/p>\n

Generating the project<\/h2>\n

There are a couple of things you\u2019ll want to do before we start writing code. First, create a Stripe account<\/a> if you don\u2019t already have one. Create a Cloudinary account<\/a> as well because this is where we\u2019ll pull the media for the items from. So go ahead and upload the images or videos you want to use for your items. We\u2019ll be using these two services throughout the app. The last thing you\u2019ll need is a local instance of Postgres. You can find the free install here<\/a>.<\/p>\n

Now we can go ahead and bootstrap the Redwood app by running the following line in a terminal. This will generate a TypeScript project for us.<\/p>\n

yarn create redwood-app --typescript shop-checkout\n<\/code><\/span><\/pre>\n
You\u2019ll notice a lot of new files and directories in the shop-checkout<\/code> folder. The main folders we\u2019ll be working with are api<\/code>, which holds the back-end code, and web<\/code>, which holds the front-end code.<\/p>\n
Since it\u2019s usually a good practice to start building the business logic first, let\u2019s start writing code for the back-end.<\/p>\n
Working on the back-end<\/h2>\n
Inside api > db<\/code>, you\u2019ll find a schema.prisma<\/code> file. This is where all of your database changes happen. Whenever you make a change to a model in this file, you\u2019ll need to run a migration for that change to be reflected in your database.<\/p>\n
The first thing we need to do is set up the connection to the database. Update the provider<\/code> value from sqlite<\/code> to postgresql<\/code>. That tells Prisma that we\u2019re working with a Postgres database so it knows what to expect. Then we need to set the right value for DATABASE_URL<\/code>.<\/p>\n
To do this, look for the .env<\/code> file in the root of the project. You\u2019ll see a line that\u2019s commented out with a DATABASE_URL<\/code> value. Uncomment that line and update it to match your local connection string. That might look something like this where shop<\/code> is the name we\u2019re giving the database.<\/p>\n
DATABASE_URL=postgres:\/\/admin:postgres@localhost:5432\/shop<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
That\u2019s all we need to connect our back-end to the database. Now we need to define some models for the tables and rows we need data for.<\/p>\n
Creating the models<\/h3>\n
You can delete the UserExample<\/code> model and add the following models.<\/p>\n
model Item {\n  id      String<\/span>  @id @default<\/span>(uuid())\n  name    String<\/span>\n  price   Float\n  url     String<\/span>\n  Order   Order?  @relation(fields: [orderId], references<\/span>: [id])\n  orderId String<\/span>?\n}\n\nmodel Order {\n  id         String<\/span>   @id @default<\/span>(cuid())\n  created_at DateTime\n  items      Item[]\n  total      Float\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019ve created the models for the Item<\/code> selections customers make in an Order<\/code>. The main thing to note in these models is the relation between the two of these models. The orderId<\/code> acts as a foreign key into the Order<\/code> table. So there can be multiple items associated with one order.<\/p>\n
Since we have the models, we can go ahead and run a migration with this command.<\/p>\n
yarn rw prisma migrate dev\n<\/code><\/span><\/pre>\n
You\u2019ll be prompted to name this migration after the connection has been established and you can call it anything you want.<\/p>\n
Seeding the database<\/h3>\n
To keep the scope of this tutorial in focus, we\u2019re not going to build out the system for users to select items. Instead, we\u2019re going to seed the database with some items and orders to simulate having an order ready for check out.<\/p>\n
In api > db<\/code>, open the seed.js<\/code> file. This is where we\u2019re going to write our seed data. You can delete all of the commented out code in the main<\/code> function and add the code for our models.<\/p>\n
const<\/span> ordersData = [\n    { createdAt<\/span>: new<\/span> Date<\/span>('09\/21\/2021'<\/span>), total<\/span>: 123.34<\/span> },\n    { createdAt<\/span>: new<\/span> Date<\/span>('04\/21\/2021'<\/span>), total<\/span>: 424.13<\/span> },\n  ]\n  const<\/span> itemsData = [\n    { name<\/span>: 'Spoon'<\/span>, price<\/span>: 34.99<\/span>, url<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580786\/samples\/landscapes\/landscape-panorama.jpg'<\/span> },\n    { name<\/span>: 'Blow Dryer'<\/span>, price<\/span>: 89.99<\/span>, url<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580785\/samples\/landscapes\/nature-mountains.jpg'<\/span> },\n    { name<\/span>: 'Pet Bed'<\/span>, price<\/span>: 57.99<\/span>, url<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580779\/samples\/landscapes\/architecture-signs.jpg'<\/span> },\n    { name<\/span>: 'Wicker Chair'<\/span>, price<\/span>: 124.99<\/span>, url<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580776\/samples\/landscapes\/girl-urban-view.jpg'<\/span> },\n    { name<\/span>: 'Paint'<\/span>, price<\/span>: 42.99<\/span>, url<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/video\/upload\/v1606580790\/elephant_herd.mp4'<\/span> },\n    { name<\/span>: 'Flooring'<\/span>, price<\/span>: 15.99<\/span>, url<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/video\/upload\/v1606580788\/sea-turtle.mp4'<\/span> },\n  ]\n\n  return<\/span> Promise<\/span>.all(\n    ordersData.map(async<\/span> (order) => {\n      const<\/span> record = await<\/span> db.order.create({\n        data<\/span>: { createdAt<\/span>: order.createdAt, total<\/span>: order.total },\n      })\n      console<\/span>.log(record)\n    }),\n    itemsData.map(async<\/span> (item) => {\n      const<\/span> record = await<\/span> db.item.create({\n        data<\/span>: {name<\/span>: item.name, price<\/span>: item.price, url<\/span>: item.url, orderId<\/span>: 'cktm7yt8l00001jxh5f26yg2z'<\/span>},\n      })\n\n      console<\/span>.log(record)\n    })\n  )\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With this seed data in place, we can go ahead and seed the database with this command.<\/p>\n
yarn rw prisma db seed\n<\/code><\/span><\/pre>\n
This will add all of your data to the database, so when we get ready to load the shopping cart view there\u2019s data available for us.<\/p>\n
Creating the GraphQL types and resolvers<\/h3>\n
The last thing we need to do on the back-end is add the methods we need to call the data on the front-end. We\u2019ll wrap this up pretty quick with a couple of Redwood commands to generate the GraphQL types and resolvers we need.<\/p>\n
yarn rw g sdl item\nyarn rw g sdl order\n<\/code><\/span><\/pre>\n
If you take a look in api > src > graphql<\/code>, you\u2019ll see two new files. Take a look at the items.sdl.ts<\/code> file and you\u2019ll see all fo the types you need to make your GraphQL queries and mutations.<\/p>\n
Now take a look in api > src > services<\/code>. There are two new folders here that hold a few different files. There are a couple of test files and the main file that holds the resolvers. Open either the items.ts<\/code> file or the orders.ts<\/code> file. You\u2019ll see the resolver to get all of the items or orders.<\/p>\n
With that, we\u2019ve finished the back-end! Now we can switch our attention to the front-end, where we\u2019ll build a quick shopping cart and check out page.<\/p>\n
Taking it to the front-end<\/h2>\n
Before we start working on components, there is a package we\u2019ll need to add in order to work with Stripe. In a terminal, go to the web<\/code> directory and run this command.<\/p>\n
yarn add react-stripe-checkout\n<\/code><\/span><\/pre>\n
This is the only package we needed to install, so we can get started on the shopping cart page.<\/p>\n
Making the shopping cart<\/h3>\n
We\u2019ll use another Redwood command to generate the files we need for the shopping cart. In the terminal, go back to the root of the directory and run this command.<\/p>\n
yarn rw g page ShoppingCart \/cart\n<\/code><\/span><\/pre>\n
This generates a page component that displays at the \/cart<\/code> route. If you take a look in web > src > page<\/code>, you\u2019ll see a new folder named ShoppingCartPage<\/code>. In this folder, there are couple of files related to tests and the main ShoppingCartPage.tsx<\/code> file. Open this up and delete everything inside of the return statement of the component.<\/p>\n
You can keep the <MetaTags><\/code> component if you like. I\u2019m just deleting everything to keep things simple.<\/em><\/p>\n
First, we\u2019ll add a GraphQL query to get the items. You can look up one of the order ids from the seeded data in your Postgres instance.<\/p>\n
Remember, this is supposed to be about the shopping cart and checkout experience so we\u2019ll hard-code an order id. In a fully connected app, the order id would probably come from some parameter being passed from another component.<\/p>\n
So let\u2019s add that GraphQL query above the ShoppingCartPage<\/code> component.<\/p>\n
export<\/span> const<\/span> QUERY = gql`\nquery Items {\n  items {\n    name\n    price\n    url\n    orderId\n  }\n}\n`<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This will let us get all of the items we have seeded. Next, we need to execute this query so we have the data available and we\u2019re able to filter by order id. At the top of the file, add this import statement.<\/p>\n
import<\/span> { useQuery } from<\/span> '@redwoodjs\/web'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Inside the ShoppingCartPage<\/code> component, add this code at the top.<\/p>\n
const<\/span> { data, loading } = useQuery(QUERY)\n\nif<\/span> (loading) {\n  return<\/span> <div<\/span>><\/span>Loading...<\/div<\/span>><\/span><\/span>\n}\n\nconst<\/span> orderItems = data.items.filter(item<\/span> =><\/span> item.orderId === 'cktm7yt8l00001jxh5f26yg2z'<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This will fetch the items from the database and also return a loading state. When the data is loading, we need to handle that condition in the app so it doesn\u2019t crash. That\u2019s why we have that early return statement if the data is still loading.<\/p>\n
Once it finishes loading, then we create a new variable to hold all of the items in the order. Now we need to display the info for each item. We\u2019ll add the following return statement to our component.<\/p>\n
return<\/span> (\n  <div<\/span> style<\/span>={{<\/span>\n    display:<\/span> 'flex<\/span>',\n    flexDirection:<\/span> 'row<\/span>',\n    flexWrap:<\/span> 'wrap<\/span>'\n  }}><\/span>\n    {orderItems.map(item => {\n      return (\n        <div<\/span> style<\/span>={{<\/span>\n          border:<\/span> '1px<\/span> solid<\/span>',\n          margin:<\/span> '0<\/span> 12px<\/span> 24px<\/span>',\n          padding:<\/span> '24px<\/span>',\n          height:<\/span> '500px<\/span>',\n          width:<\/span> '20<\/span>%'\n        }}><\/span>\n          {item.url.includes('mp4') ?\n            <video<\/span> controls<\/span> src<\/span>={item.url}<\/span> height<\/span>={200}<\/span> style<\/span>={{<\/span> maxWidth:<\/span> '100<\/span>%' }}><\/span><\/video<\/span>><\/span> :\n            <img<\/span> src<\/span>={item.url}<\/span> height<\/span>={200}<\/span> style<\/span>={{<\/span> maxWidth:<\/span> '100<\/span>%' }} \/><\/span>\n          }\n          <h2<\/span>><\/span>{item.name}<\/h2<\/span>><\/span>\n          <h3<\/span>><\/span>{item.price}<\/h3<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      )\n    })\n    }\n  <\/div<\/span>><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We have a couple of styled <div><\/code> elements to make the shopping cart look decent. For each of the items in the order, we check if its media is an image or a video and then we create a card to show the media, the name, and the price.<\/p>\n
If you start your app with yarn rw dev<\/code> in a terminal in the root directory and go the \u2018cart\u2019 route, you\u2019ll see something similar to this.<\/p>\n
\"picture<\/p>\n
Now we need to add the Stripe elements to handle the check out after we click the button we\u2019re about to create.<\/p>\n
Adding Stripe for checkouts<\/h3>\n
Let\u2019s start by importing that Stripe package. This is a good place to go grab the \u2018Publishable key\u2019 from your Stripe account<\/a> because you\u2019ll need it for the component we\u2019re about to work with.<\/p>\n
import<\/span> StripeCheckout from<\/span> 'react-stripe-checkout'<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This adds a simple checkout modal on the page when the customer is ready to check out. All of the checkout and payment functionality is bundled into this one component. We\u2019ll add the component above our list of items.<\/p>\n
<StripeCheckout<\/span>\n  amount<\/span>={36694}<\/span>\n  billingAddress<\/span>\n  description<\/span>={<\/span>`The<\/span> ${orderItems.length<\/span>} items<\/span> you<\/span> selected<\/span> are<\/span> here<\/span>`}\n image<\/span>=\"https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580786\/samples\/landscapes\/landscape-panorama.jpg\"<\/span>\n  locale<\/span>=\"auto\"<\/span>\n  name<\/span>=\"Your Cart\"<\/span>\n  stripeKey<\/span>={process.env.STRIPE_ID}<\/span>\n  token<\/span>={processToken}<\/span>\n  zipCode<\/span>\n\/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The main two props to note are the stripeKey<\/code> and the token<\/code>. The stripeKey<\/code> is that publishable key you grabbed from your account earlier. You\u2019ll notice that token<\/code> is a callback that will have the token from the successful Stripe transaction.<\/p>\n
We\u2019ll define the method for processToken<\/code> right above the return statement in our component.<\/p>\n
const<\/span> processToken = (token<\/span>) =><\/span> {\n  console<\/span>.log('This is where some back-end things would happen after a successful transaction.'<\/span>)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Everything\u2019s in place and ready to go! If you take a look in your browser, you\u2019ll see a new button in the top left of the page.<\/p>\n
\"checkout<\/p>\n
Go ahead and click the button to see the checkout flow in action.<\/p>\n
\"customer<\/p>\n
Since we\u2019re using a test account, you\u2019ll see a yellow indicator in the upper right corner of your page that says you\u2019re in test mode. Now if you continue, this will take you to where a customer can input their card info.<\/p>\n
\"customer<\/p>\n
When you submit, you\u2019ll see a loading icon in the pay button and then a green checkmark confirming the transaction.<\/p>\n
\"order<\/p>\n
With a successful transaction, the token gets passed to the processToken<\/code> function we made so you\u2019ll see our message in the console.<\/p>\n
Now you have a shopping cart with Stripe checkout functionality!<\/p>\n
Finished code<\/h2>\n
You can see the full code in the shop-checkout<\/code> folder in this repo<\/a> and you can see some of this in action in this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
Knowing how to handle payments is a valuable developer skill because there are so many platforms and applications that rely on payment systems being implemented correctly and securely. It gives you the flexibility to make a site that does everything a customer needs.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28168,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,177,246,371],"class_list":["post-28167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nBuilding a Shopping Cart with Redwood<\/title>\n<meta name=\"description\" content=\"E-commerce sites are popping up every day and maybe you might want to make one. In this tutorial, you'll learn how to make a basic shopping cart and checkout flow using Stripe. This can be extended to work with more complex functionality as you need.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Shopping Cart with Redwood\" \/>\n<meta property=\"og:description\" content=\"E-commerce sites are popping up every day and maybe you might want to make one. In this tutorial, you'll learn how to make a basic shopping cart and checkout flow using Stripe. This can be extended to work with more complex functionality as you need.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T18:53:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"4032\" \/>\n\t<meta property=\"og:image:height\" content=\"3024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building a Shopping Cart with Redwood\",\"datePublished\":\"2022-03-21T18:53:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/\",\"name\":\"Building a Shopping Cart with Redwood\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA\",\"datePublished\":\"2022-03-21T18:53:05+00:00\",\"description\":\"E-commerce sites are popping up every day and maybe you might want to make one. In this tutorial, you'll learn how to make a basic shopping cart and checkout flow using Stripe. This can be extended to work with more complex functionality as you need.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA\",\"width\":4032,\"height\":3024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Shopping Cart with Redwood\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a Shopping Cart with Redwood","description":"E-commerce sites are popping up every day and maybe you might want to make one. In this tutorial, you'll learn how to make a basic shopping cart and checkout flow using Stripe. This can be extended to work with more complex functionality as you need.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/","og_locale":"en_US","og_type":"article","og_title":"Building a Shopping Cart with Redwood","og_description":"E-commerce sites are popping up every day and maybe you might want to make one. In this tutorial, you'll learn how to make a basic shopping cart and checkout flow using Stripe. This can be extended to work with more complex functionality as you need.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-21T18:53:05+00:00","og_image":[{"width":4032,"height":3024,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/"},"author":{"name":"","@id":""},"headline":"Building a Shopping Cart with Redwood","datePublished":"2022-03-21T18:53:05+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA","keywords":["Guest Post","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/","name":"Building a Shopping Cart with Redwood","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA","datePublished":"2022-03-21T18:53:05+00:00","description":"E-commerce sites are popping up every day and maybe you might want to make one. In this tutorial, you'll learn how to make a basic shopping cart and checkout flow using Stripe. This can be extended to work with more complex functionality as you need.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA","width":4032,"height":3024},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-shopping-cart-with-redwood\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Shopping Cart with Redwood"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925234\/Web_Assets\/blog\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829\/84e1e0b1b1288f29d73ec6b99895b8b96ee0d64b-4032x3024-1_28168f1829.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28167"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28167\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28168"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Usually you\u2019ll pass that token to the back-end and do some processing before saving a record to your database. This is out of scope for this particular tutorial, but if you want to learn more about that back-end implementation, check out Stripe\u2019s docs<\/a> on it.<\/p>\n
This component has a ton of props and it would be worthwhile to check out the docs<\/a> on them. We have the amount<\/code> which could be calculated dynamically, but you\u2019ll have to watch out for the format expected by the component. Then we include the billingAddress<\/code> to show this part of the process.<\/p>\n