{"componentChunkName":"component---src-templates-blog-template-js","path":"/docs/shipping","result":{"data":{"markdownRemark":{"html":"

Cart and Checkout Pages

\n

The cart and checkout do not require any configuration to set up. For reference, here's what the cart looks like with our example product.

\n

\n \n \n \n \n

\n

Which flows to the checkout page, which captures the customer's email, shipping address, shipping choice (if applicable), and credit card information.

\n

\n \n shipping providers that integrate with the Stripe API.\n\n\n\n

Free Shipping

\n

If you do not set up paid shipping, the checkout flow will show free shipping like so.

\n

\n \n \n \n \n

\n

Flat-Rate Shipping

\n

To set up flat-rate shipping, you can add options in the /config?tab=4 route, by clicking on the \"Add Shipping Options\" button.

\n

\n \n \n \n \n

\n

Set the names and prices for each option that you want to add:

\n

\n \n \n \n \n

\n

In the checkout flow, step 3 will display the shipping options available.

\n

\n \n \n \n \n

\n

Wondering how this works on the backend? The app is creating a dummy product in Stripe, with different SKUs for the shipping options. If you open up your Stripe dashboard and look at the product list, you will see one of your products called \"Flat-Rate Shipping\".

\n

\n \n \n \n \n

\n

IMPORTANT Since the shipping ID is tied to your Stripe keys, you will need to set up shipping for both your test and live keys.

","frontmatter":{"path":"/docs/shipping","date":"2020-01-06T21:12:33.962Z","header":"Store Configuration","title":"Checkout & Shipping ๐Ÿ›’"}}},"pageContext":{"pages":[{"path":"/docs/changelog","title":"Changelog & To Do's ๐Ÿ“","header":"Beluga Next Steps","date":"2020-01-11T17:12:33.962Z"},{"path":"/docs/seo-social","title":"SEO and Social Media ๐Ÿ’ป","header":"Launching Your Store","date":"2020-01-10T17:12:33.962Z"},{"path":"/docs/deploy-to-heroku","title":"Deploying To Heroku ๐Ÿš€","header":"Launching Your Store","date":"2020-01-09T17:12:33.962Z"},{"path":"/docs/gmail-oauth","title":"Setting up Gmail Oauth2 ๐Ÿ“ฌ","header":"Managing Orders","date":"2020-01-07T19:12:33.962Z"},{"path":"/docs/email-templates","title":"Email Templates ๐Ÿงพ","header":"Managing Orders","date":"2020-01-07T18:12:33.962Z"},{"path":"/docs/managing-orders","title":"Order Admin ๐Ÿ“ฆ","header":"Managing Orders","date":"2020-01-07T16:12:33.962Z"},{"path":"/docs/custom-products","title":"Advanced: Custom Product Data ๐Ÿ’ซ","header":"Store Configuration","date":"2020-01-06T22:12:33.962Z"},{"path":"/docs/shipping","title":"Checkout & Shipping ๐Ÿ›’","header":"Store Configuration","date":"2020-01-06T21:12:33.962Z"},{"path":"/docs/additional-pages","title":"Adding Pages ๐Ÿ“„","header":"Store Configuration","date":"2020-01-06T20:12:33.962Z"},{"path":"/docs/adding-collections","title":"Adding Collections ๐Ÿ“‚","header":"Store Configuration","date":"2020-01-06T19:12:33.962Z"},{"path":"/docs/adding-products","title":"Adding Products ๐ŸŽ","header":"Store Configuration","date":"2020-01-06T18:12:33.962Z"},{"path":"/docs/theming-design","title":"Theming & Design ๐ŸŽจ","header":"Store Configuration","date":"2020-01-06T17:12:33.962Z"},{"path":"/docs/store-config","title":"Store Settings ๐Ÿ› ","header":"Store Configuration","date":"2020-01-05T16:12:33.962Z"},{"path":"/docs/stripe","title":"Setting up Stripe ๐Ÿ’ต","header":"Introduction","date":"2020-01-04T17:12:33.962Z"},{"path":"/docs/new-store","title":"Creating a New Store ๐Ÿ›","header":"Introduction","date":"2020-01-03T17:12:33.962Z"},{"path":"/docs/dev-environment","title":"Setting up the Dev Environment ๐Ÿงช","header":"Introduction","date":"2020-01-02T17:12:33.962Z"},{"path":"/docs/project-structure","title":"Overview of Project Structure ๐Ÿ—","header":"Introduction","date":"2020-01-01T17:12:33.962Z"}]}},"staticQueryHashes":["45326706"]}