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 = () => {