From 92b7371b0bbaa3a9d9627747627df417dfd8a2cb Mon Sep 17 00:00:00 2001 From: Lucy Macartney <64803272+lmac-1@users.noreply.github.com> Date: Sat, 15 Apr 2023 19:34:25 -0500 Subject: [PATCH] Improves getting started section and fixes typos (#317) --- docs/docs/usage/components/CartProvider.mdx | 2 +- docs/docs/welcome/getting-started-client-mode.mdx | 10 +++++++--- docs/docs/welcome/getting-started-serverless.mdx | 12 +++++++----- docs/docs/welcome/getting-started.mdx | 2 +- docs/docs/welcome/typescript.mdx | 4 ++-- docs/src/pages/index.js | 2 +- 6 files changed, 19 insertions(+), 13 deletions(-) diff --git a/docs/docs/usage/components/CartProvider.mdx b/docs/docs/usage/components/CartProvider.mdx index d409eeaf..df71d507 100644 --- a/docs/docs/usage/components/CartProvider.mdx +++ b/docs/docs/usage/components/CartProvider.mdx @@ -51,7 +51,7 @@ const products = [ ] ``` -Additionally, you must verify the cartItems on the server-side before creating the CheckoutSession. For this you can use the [validateCartItems() helper](docs/usage/validate-cart-items). +Additionally, you must verify the cartItems on the server-side before creating the CheckoutSession. For this you can use the [validateCartItems() helper](/docs/usage/serverless/validate-cart-items). ## Client-only Checkout mode diff --git a/docs/docs/welcome/getting-started-client-mode.mdx b/docs/docs/welcome/getting-started-client-mode.mdx index c5dbf38c..e94a74a6 100644 --- a/docs/docs/welcome/getting-started-client-mode.mdx +++ b/docs/docs/welcome/getting-started-client-mode.mdx @@ -46,11 +46,13 @@ https://stripe.com/docs/api/checkout/sessions/object#checkout_session_object-mod ## Using the hook -The hook `useShoppingCart()` provides several utilities and pieces of data for you to use in your application. The examples below won't cover every part of the `useShoppingCart()` API but you can [look at the API](#API) below. +The hook `useShoppingCart()` provides several utilities and pieces of data for you to use in your application. The examples below won't cover every part of the `useShoppingCart()` API but you can explore the documentation to find out more. ### Products Created on Stripe's Dashboard -This is for products you created on the Stripe Dashboard. Stripe provides you with a Price ID String. You don't need a server(less) +To use client only mode, you'll need to add some products on the Stripe Dashboard. Check out [Stripe's documentation](https://stripe.com/docs/products-prices/manage-prices) for more information on how to do this. + +Stripe provides you with a Price ID String. You don't need a server(less) set up to use this library this way unless you want more control over how the payments are handled. ```jsx @@ -62,6 +64,7 @@ const productData = [ { name: 'Bananas', price_id: 'price_GBJ2Ep8246qeeT', + // price in smallest currency unit (e.g. cent for USD) price: 400, image: 'https://www.fillmurray.com/300/300', currency: 'USD' @@ -69,6 +72,7 @@ const productData = [ { name: 'Tangerines', price_id: 'price_GBJ2WWfMaGNC2Z', + // price in smallest currency unit (e.g. cent for USD) price: 100, image: 'https://www.fillmurray.com/300/300', currency: 'USD' @@ -76,7 +80,7 @@ const productData = [ ] export function App() { - /* Gets the totalPrice and a method for redirecting to stripe */ + /* Gets the totalPrice and a method for redirecting to Stripe */ const { totalPrice, redirectToCheckout, cartCount } = useShoppingCart() return ( diff --git a/docs/docs/welcome/getting-started-serverless.mdx b/docs/docs/welcome/getting-started-serverless.mdx index 10d548e2..7d496181 100644 --- a/docs/docs/welcome/getting-started-serverless.mdx +++ b/docs/docs/welcome/getting-started-serverless.mdx @@ -38,19 +38,20 @@ ReactDOM.render( ## Using the hook -The hook `useShoppingCart()` provides several utilities and pieces of data for you to use in your application. The examples below won't cover every part of the `useShoppingCart()` API but you can [look at the API](#API) below. +The hook `useShoppingCart()` provides several utilities and pieces of data for you to use in your application. The examples below won't cover every part of the `useShoppingCart()` API but you can explore the documentation to find out more. ### Serverless implementation -If you're data source isn't coming from Stripe's dashboard, you can still make products and process payments. +If your data source isn't coming from Stripe's dashboard, you can still make products and process payments. -You're product data should look like this: +Your product data should look like this: ```js const productData = [ { name: 'Bananas', id: 'some_unique_id_1', + // price in smallest currency unit (e.g. cent for USD) price: 400, image: 'https://www.fillmurray.com/300/300', currency: 'USD' @@ -68,6 +69,7 @@ const productData = [ { name: 'Tangerines', id: 'some_unique_id_2', + // price in smallest currency unit (e.g. cent for USD) price: 100, image: 'https://www.fillmurray.com/300/300', currency: 'USD', @@ -85,7 +87,7 @@ const productData = [ ] ``` -_NOTE_: `price_data` and `product_data` are not required for use-shopping-cart to work, but they are required for creating Sessions with Stripe. +_Note_: `price_data` and `product_data` are not required for use-shopping-cart to work, but they are required for creating Sessions with Stripe. This library manages `price_data` and `product_data` for you, but if you need to pass extra data to your Sessions, you can add them directly to your product objects. @@ -177,7 +179,7 @@ return { } ``` -_NOTE_: `price_data` and `product_data` are not required for use-shopping-cart to work, but they are required for creating Sessions with Stripe. +_Note_: `price_data` and `product_data` are not required for use-shopping-cart to work, but they are required for creating Sessions with Stripe. This library manages `price_data` and `product_data` for you, but if you need to pass extra data to your Sessions, you can add them directly to your product objects. diff --git a/docs/docs/welcome/getting-started.mdx b/docs/docs/welcome/getting-started.mdx index 73a32cd5..83a564b3 100644 --- a/docs/docs/welcome/getting-started.mdx +++ b/docs/docs/welcome/getting-started.mdx @@ -9,7 +9,7 @@ There are two ways you can implement this library. Client Only mode and Checkout ## Client Only Mode -This is for anyone who wants to make their products on the Stripe dashboard and doesn't want to manage their +This is for anyone who wants to [configure their products](https://stripe.com/docs/products-prices/manage-prices) on the Stripe Dashboard and doesn't want to manage their own server. This is a secure, easy way to get up and running. diff --git a/docs/docs/welcome/typescript.mdx b/docs/docs/welcome/typescript.mdx index 6b1b0d88..171e7e8b 100644 --- a/docs/docs/welcome/typescript.mdx +++ b/docs/docs/welcome/typescript.mdx @@ -1,9 +1,9 @@ --- -title: Getting Started with TypeScript +title: Getting started with TypeScript id: getting-started-with-typescript --- -This library now works with TypeScript! You can use `use-shopping-cart` just the same as before but now with types. Take for example these two files from our very own `typescript-usage` example workspace. +This library now works with TypeScript! You can use `use-shopping-cart` just the same as before but now with types. Take for example these two files from our very own [`typescript-usage` example workspace](https://github.com/dayhaysoos/use-shopping-cart/tree/master/examples/typescript-usage). ```tsx import * as React from 'react' diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 35460219..4e0107ae 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -37,7 +37,7 @@ const Home = () => {