asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: update docusaurus to v3 (#5625)

Browse Source 
* update dependencies

* update onboarding mdx

* fixes for mdx issues

* fixes for mdx compatibility

* resolve mdx errors

* fixes in reference

* fix check errors

* revert change in vale action

* fix node version in action

* fix summary in markdown
This commit is contained in:
Shahed Nasser
2023-11-13 20:11:50 +02:00
committed by GitHub
parent cedab58339
commit c6dff873de
2265 changed files with 46163 additions and 47195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/docs/content/modules/carts-and-checkout/storefront/implement-cart.mdx
+385 -385
View File
@@ -53,60 +53,60 @@ It's also assumed you already have [used CartProvider higher in your component t
You can create a cart with the following code snippet:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.create()
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
// assuming you have a state variable to store the cart
setCart(cart)
})
```
```ts
medusa.carts.create()
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
// assuming you have a state variable to store the cart
setCart(cart)
})
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCart } from "medusa-react"
```tsx
import { useCart } from "medusa-react"
const Cart = () => {
const { cart, createCart } = useCart()
const Cart = () => {
const { cart, createCart } = useCart()
const handleCreateCart = () => {
createCart.mutate(
{}, // create an empty cart
{
onSuccess: ({ cart }) => {
localStorage.setItem("cart_id", cart.id)
},
const handleCreateCart = () => {
createCart.mutate(
{}, // create an empty cart
{
onSuccess: ({ cart }) => {
localStorage.setItem("cart_id", cart.id)
},
}
)
}
)
}
// ...
}
// ...
}
export default Cart
```
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URLL>/store/carts`, {
method: "POST",
credentials: "include",
})
.then((response) => response.json())
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
// assuming you have a state variable to store the cart
setCart(cart)
})
```
```ts
fetch(`<BACKEND_URLL>/store/carts`, {
method: "POST",
credentials: "include",
})
.then((response) => response.json())
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
// assuming you have a state variable to store the cart
setCart(cart)
})
```
</TabItem>
</TabItem>
</Tabs>
This request does not require any parameters. It returns the created cart in the response.
@@ -116,70 +116,70 @@ The cart by default will have a random region assigned to it. You can specify th
Otherwise, you can assign it a specific region during creation:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```jsx
medusa.carts.create({
region_id,
})
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
// assuming you have a state variable to store the cart
setCart(cart)
})
```
```jsx
medusa.carts.create({
region_id,
})
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
// assuming you have a state variable to store the cart
setCart(cart)
})
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCart } from "medusa-react"
```tsx
import { useCart } from "medusa-react"
const Cart = () => {
const { cart, createCart } = useCart()
const Cart = () => {
const { cart, createCart } = useCart()
const handleCreateCart = () => {
createCart.mutate(
{
region_id,
},
{
onSuccess: ({ cart }) => {
localStorage.setItem("cart_id", cart.id)
},
const handleCreateCart = () => {
createCart.mutate(
{
region_id,
},
{
onSuccess: ({ cart }) => {
localStorage.setItem("cart_id", cart.id)
},
}
)
}
)
}
// ...
}
// ...
}
export default Cart
```
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
</TabItem>
<TabItem value="fetch" label="Fetch API">
```jsx
fetch(`<BACKEND_URLL>/store/carts`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
region_id,
}),
})
.then((response) => response.json())
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
// assuming you have a state variable to store the cart
setCart(cart)
})
```
```jsx
fetch(`<BACKEND_URLL>/store/carts`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
region_id,
}),
})
.then((response) => response.json())
.then(({ cart }) => {
localStorage.setItem("cart_id", cart.id)
// assuming you have a state variable to store the cart
setCart(cart)
})
```
</TabItem>
</TabItem>
</Tabs>
Check out the [API Reference](https://docs.medusajs.com/api/store#carts_postcart) for a full list of available request body parameters.
@@ -199,52 +199,52 @@ Notice that in the previous code snippets, you set the cart’s ID in the local
You can retrieve the cart at any given point using its ID with the following code snippet:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
const id = localStorage.getItem("cart_id")
```ts
const id = localStorage.getItem("cart_id")
if (id) {
medusa.carts.retrieve(id)
.then(({ cart }) => setCart(cart))
}
```
if (id) {
medusa.carts.retrieve(id)
.then(({ cart }) => setCart(cart))
}
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React" default>
</TabItem>
<TabItem value="medusa-react" label="Medusa React" default>
```tsx
import { useCart } from "medusa-react"
```tsx
import { useCart } from "medusa-react"
const Cart = () => {
const { cart } = useCart()
const Cart = () => {
const { cart } = useCart()
return (
<div>
Items in Cart: {cart?.items.length || 0}
</div>
)
}
return (
<div>
Items in Cart: {cart?.items.length || 0}
</div>
)
}
export default Cart
```
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
const id = localStorage.getItem("cart_id")
```ts
const id = localStorage.getItem("cart_id")
if (id) {
fetch(`<BACKEND_URLL>/store/carts/${id}`, {
credentials: "include",
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
}
```
if (id) {
fetch(`<BACKEND_URLL>/store/carts/${id}`, {
credentials: "include",
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
}
```
</TabItem>
</TabItem>
</Tabs>
This request accepts the ID of the cart as a path parameter and returns the cart of that ID.
@@ -266,57 +266,57 @@ A cart has different data associated with it including the region, email, addres
You can use the following snippet to update any of the cart’s data:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.update(cartId, {
region_id,
})
.then(({ cart }) => setCart(cart))
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCart } from "medusa-react"
const Cart = () => {
// ...
const { updateCart } = useCart()
const changeRegionId = (region_id: string) => {
updateCart.mutate({
```ts
medusa.carts.update(cartId, {
region_id,
})
}
.then(({ cart }) => setCart(cart))
```
// ...
}
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
export default Cart
```
```tsx
import { useCart } from "medusa-react"
</TabItem>
<TabItem value="fetch" label="Fetch API">
const Cart = () => {
// ...
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
region_id,
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
const { updateCart } = useCart()
</TabItem>
const changeRegionId = (region_id: string) => {
updateCart.mutate({
region_id,
})
}
// ...
}
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
region_id,
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
</TabItem>
</Tabs>
This request accepts the ID of the cart as a path parameter. In its body, you can pass any data you want to update in the cart such as the region.
@@ -332,57 +332,57 @@ A customer might add items to their cart, then creates an account or log in. In
You can do that using the same update operation:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.update(cartId, {
customer_id,
})
.then(({ cart }) => setCart(cart))
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCart } from "medusa-react"
const Cart = () => {
// ...
const { updateCart } = useCart()
const changeCustomerId = (customer_id: string) => {
updateCart.mutate({
```ts
medusa.carts.update(cartId, {
customer_id,
})
}
.then(({ cart }) => setCart(cart))
```
// ...
}
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
export default Cart
```
```tsx
import { useCart } from "medusa-react"
</TabItem>
<TabItem value="fetch" label="Fetch API">
const Cart = () => {
// ...
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
customer_id,
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
const { updateCart } = useCart()
</TabItem>
const changeCustomerId = (customer_id: string) => {
updateCart.mutate({
customer_id,
})
}
// ...
}
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
customer_id,
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
</TabItem>
</Tabs>
This updates the `customer_id` associated with the cart to make sure it belongs to a specific customer.
@@ -394,57 +394,57 @@ In case the customer doesn't want to use their own account, you must at least as
You can do that using the same update operation:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.update(cartId, {
email: "user@example.com",
})
.then(({ cart }) => setCart(cart))
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCart } from "medusa-react"
const Cart = () => {
// ...
const { updateCart } = useCart()
const changeEmail = (email: string) => {
updateCart.mutate({
email,
```ts
medusa.carts.update(cartId, {
email: "user@example.com",
})
}
.then(({ cart }) => setCart(cart))
```
// ...
}
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
export default Cart
```
```tsx
import { useCart } from "medusa-react"
</TabItem>
<TabItem value="fetch" label="Fetch API">
const Cart = () => {
// ...
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: "user@example.com",
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
const { updateCart } = useCart()
</TabItem>
const changeEmail = (email: string) => {
updateCart.mutate({
email,
})
}
// ...
}
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: "user@example.com",
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
</TabItem>
</Tabs>
---
@@ -454,60 +454,60 @@ fetch(`<BACKEND_URLL>/store/carts/${cartId}`, {
To create a line item of a product and add it to a cart, you can use the following code snippet:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```jsx
medusa.carts.lineItems.create(cartId, {
variant_id,
quantity: 1,
})
.then(({ cart }) => setCart(cart))
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCreateLineItem } from "medusa-react"
const Cart = () => {
// ...
const createLineItem = useCreateLineItem(cart_id)
const handleAddItem = () => {
createLineItem.mutate({
```jsx
medusa.carts.lineItems.create(cartId, {
variant_id,
quantity,
quantity: 1,
})
}
.then(({ cart }) => setCart(cart))
```
// ...
}
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
export default Cart
```
```tsx
import { useCreateLineItem } from "medusa-react"
</TabItem>
<TabItem value="fetch" label="Fetch API">
const Cart = () => {
// ...
```jsx
fetch(`<BACKEND_URLL>/store/carts/${cartId}/line-items`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
variant_id,
quantity: 1,
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
const createLineItem = useCreateLineItem(cart_id)
</TabItem>
const handleAddItem = () => {
createLineItem.mutate({
variant_id,
quantity,
})
}
// ...
}
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```jsx
fetch(`<BACKEND_URLL>/store/carts/${cartId}/line-items`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
variant_id,
quantity: 1,
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
</TabItem>
</Tabs>
This request accepts the ID of the cart as a path parameter. In the body, it's required to send the ID of the product variant you want to add to the cart and its quantity.
@@ -529,60 +529,60 @@ If you’re using Sales Channels, make sure that the cart and the product belong
To update a line item's quantity in the cart, you can use the following code snippet:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.lineItems.update(cartId, lineItemId, {
quantity: 3,
})
.then(({ cart }) => setCart(cart))
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useUpdateLineItem } from "medusa-react"
const Cart = () => {
// ...
const updateLineItem = useUpdateLineItem(cart_id)
const handleUpdateItem = () => {
updateLineItem.mutate({
lineId,
```ts
medusa.carts.lineItems.update(cartId, lineItemId, {
quantity: 3,
})
}
.then(({ cart }) => setCart(cart))
```
// ...
}
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
export default Cart
```
```tsx
import { useUpdateLineItem } from "medusa-react"
</TabItem>
<TabItem value="fetch" label="Fetch API">
const Cart = () => {
// ...
const updateLineItem = useUpdateLineItem(cart_id)
const handleUpdateItem = () => {
updateLineItem.mutate({
lineId,
quantity: 3,
})
}
// ...
}
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
<!-- eslint-disable max-len -->
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}/line-items/${lineItemId}`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
quantity: 3,
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}/line-items/${lineItemId}`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
quantity: 3,
}),
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
</TabItem>
</TabItem>
</Tabs>
This request accepts the ID of the cart and the ID of the line item as path parameters. In the body, it accepts the quantity of the line item.
@@ -596,51 +596,51 @@ It returns the updated cart.
To delete a line item from the cart, you can use the following code snippet:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.lineItems.delete(cartId, lineItemId)
.then(({ cart }) => setCart(cart))
```
```ts
medusa.carts.lineItems.delete(cartId, lineItemId)
.then(({ cart }) => setCart(cart))
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useDeleteLineItem } from "medusa-react"
```tsx
import { useDeleteLineItem } from "medusa-react"
const Cart = () => {
// ...
const Cart = () => {
// ...
const deleteLineItem = useDeleteLineItem(cart_id)
const deleteLineItem = useDeleteLineItem(cart_id)
const handleDeleteItem = () => {
deleteLineItem.mutate({
lineId,
})
}
const handleDeleteItem = () => {
deleteLineItem.mutate({
lineId,
})
}
// ...
}
// ...
}
export default Cart
```
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
</TabItem>
<TabItem value="fetch" label="Fetch API">
<!-- eslint-disable max-len -->
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}/line-items/${lineItemId}`, {
method: "DELETE",
credentials: "include",
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
```ts
fetch(`<BACKEND_URLL>/store/carts/${cartId}/line-items/${lineItemId}`, {
method: "DELETE",
credentials: "include",
})
.then((response) => response.json())
.then(({ cart }) => setCart(cart))
```
</TabItem>
</TabItem>
</Tabs>
This request accepts the ID of the cart and the ID of the line item as path parameters.
www/apps/docs/content/modules/carts-and-checkout/storefront/implement-checkout-flow.mdx
+379 -379
View File
@@ -63,95 +63,95 @@ In this step, the customer generally enters their shipping info, then chooses th
After the customer enters their shipping address information, you must send a `POST` request to the [Update a Cart API Route](https://docs.medusajs.com/api/store#carts_postcartscart):
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.update(cartId, {
shipping_address: {
company,
first_name,
last_name,
address_1,
address_2,
city,
country_code,
province,
postal_code,
phone,
},
})
.then(({ cart }) => {
console.log(cart.shipping_address)
})
```
```ts
medusa.carts.update(cartId, {
shipping_address: {
company,
first_name,
last_name,
address_1,
address_2,
city,
country_code,
province,
postal_code,
phone,
},
})
.then(({ cart }) => {
console.log(cart.shipping_address)
})
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCart } from "medusa-react"
```tsx
import { useCart } from "medusa-react"
const Cart = () => {
// ...
const Cart = () => {
// ...
const { updateCart } = useCart()
const { updateCart } = useCart()
const addShippingAddress =
(address: Record<string, string>) => {
updateCart.mutate({
shipping_address: {
company: address.company,
first_name: address.first_name,
last_name: address.last_name,
address_1: address.address_1,
address_2: address.address_2,
city: address.city,
country_code: address.country_code,
province: address.province,
postal_code: address.postal_code,
phone: address.phone,
},
})
const addShippingAddress =
(address: Record<string, string>) => {
updateCart.mutate({
shipping_address: {
company: address.company,
first_name: address.first_name,
last_name: address.last_name,
address_1: address.address_1,
address_2: address.address_2,
city: address.city,
country_code: address.country_code,
province: address.province,
postal_code: address.postal_code,
phone: address.phone,
},
})
}
// ...
}
// ...
}
export default Cart
```
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}`, {
method: "POST",
credentials: "include",
body: JSON.stringify({
shipping_address: {
company,
first_name,
last_name,
address_1,
address_2,
city,
country_code,
province,
postal_code,
phone,
},
}),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.shipping_address)
})
```
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}`, {
method: "POST",
credentials: "include",
body: JSON.stringify({
shipping_address: {
company,
first_name,
last_name,
address_1,
address_2,
city,
country_code,
province,
postal_code,
phone,
},
}),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.shipping_address)
})
```
</TabItem>
</TabItem>
</Tabs>
This request accepts the ID of the cart as a path parameter and the new shipping address in the request body.
@@ -167,67 +167,67 @@ After updating the cart with the customer’s address, the list of available [sh
You can retrieve the list of shipping options by sending a `GET` request to the [Retrieve Shipping Options for Cart API Route](https://docs.medusajs.com/api/store#shipping-options_getshippingoptionscartid):
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.shippingOptions.listCartOptions(cartId)
.then(({ shipping_options }) => {
console.log(shipping_options.length)
})
```
```ts
medusa.shippingOptions.listCartOptions(cartId)
.then(({ shipping_options }) => {
console.log(shipping_options.length)
})
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCartShippingOptions } from "medusa-react"
```tsx
import { useCartShippingOptions } from "medusa-react"
type Props = {
cartId: string
}
type Props = {
cartId: string
}
const ShippingOptions = ({ cartId }: Props) => {
const { shipping_options, isLoading } =
useCartShippingOptions(cartId)
const ShippingOptions = ({ cartId }: Props) => {
const { shipping_options, isLoading } =
useCartShippingOptions(cartId)
return (
<div>
{isLoading && <span>Loading...</span>}
{shipping_options && !shipping_options.length && (
<span>No shipping options</span>
)}
{shipping_options && (
<ul>
{shipping_options.map(
(shipping_option) => (
<li key={shipping_option.id}>
{shipping_option.name}
</li>
)
return (
<div>
{isLoading && <span>Loading...</span>}
{shipping_options && !shipping_options.length && (
<span>No shipping options</span>
)}
</ul>
)}
</div>
)
}
{shipping_options && (
<ul>
{shipping_options.map(
(shipping_option) => (
<li key={shipping_option.id}>
{shipping_option.name}
</li>
)
)}
</ul>
)}
</div>
)
}
export default ShippingOptions
```
export default ShippingOptions
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URL>/store/shipping-options/${cartId}`, {
credentials: "include",
})
.then((response) => response.json())
.then(({ shipping_options }) => {
console.log(shipping_options.length)
})
```
```ts
fetch(`<BACKEND_URL>/store/shipping-options/${cartId}`, {
credentials: "include",
})
.then((response) => response.json())
.then(({ shipping_options }) => {
console.log(shipping_options.length)
})
```
</TabItem>
</TabItem>
</Tabs>
The request accepts the ID of the cart as a path parameter. It returns the array of [shipping options](https://docs.medusajs.com/api/store#shipping-options_getshippingoptions). Typically you would display those options to the customer to choose from.
@@ -237,61 +237,61 @@ The request accepts the ID of the cart as a path parameter. It returns the array
Once the customer chooses one of the available shipping options, send a `POST` request to the [Add a Shipping Method API Route](https://docs.medusajs.com/api/store#carts_postcartscartshippingmethod). This will create a [shipping method](../shipping.md#shipping-method) based on the shipping option chosen and will associate it with the customer’s cart:
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.addShippingMethod(cartId, {
option_id: shippingOptionId, // the ID of the selected option
})
.then(({ cart }) => {
console.log(cart.shipping_methods)
})
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useAddShippingMethodToCart } from "medusa-react"
// ...
const ShippingOptions = ({ cartId }: Props) => {
// ...
const addShippingMethod = useAddShippingMethodToCart(cartId)
const handleAddShippingMethod = (option_id: string) => {
addShippingMethod.mutate({
option_id,
```ts
medusa.carts.addShippingMethod(cartId, {
option_id: shippingOptionId, // the ID of the selected option
})
}
.then(({ cart }) => {
console.log(cart.shipping_methods)
})
```
// ...
}
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
export default ShippingOptions
```
```tsx
import { useAddShippingMethodToCart } from "medusa-react"
// ...
</TabItem>
<TabItem value="fetch" label="Fetch API">
const ShippingOptions = ({ cartId }: Props) => {
// ...
const addShippingMethod = useAddShippingMethodToCart(cartId)
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}/shipping-methods`, {
method: "POST",
credentials: "include",
body: JSON.stringify({
option_id: shippingOptionId, // ID of the selected option
}),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.shipping_methods)
})
```
const handleAddShippingMethod = (option_id: string) => {
addShippingMethod.mutate({
option_id,
})
}
</TabItem>
// ...
}
export default ShippingOptions
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}/shipping-methods`, {
method: "POST",
credentials: "include",
body: JSON.stringify({
option_id: shippingOptionId, // ID of the selected option
}),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.shipping_methods)
})
```
</TabItem>
</Tabs>
The request accepts the ID of the cart as a path parameter and its body the ID of the selected shipping option.
@@ -311,65 +311,65 @@ When the page opens and before the payment providers are displayed to the custom
To initialize the payment sessions, send a `POST` request to the [Initialize Payment Sessions API Route](https://docs.medusajs.com/api/store#carts_postcartscartpaymentsession):
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.createPaymentSessions(cartId)
.then(({ cart }) => {
console.log(cart.payment_sessions)
})
```
```ts
medusa.carts.createPaymentSessions(cartId)
.then(({ cart }) => {
console.log(cart.payment_sessions)
})
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCart } from "medusa-react"
import { useEffect } from "react"
```tsx
import { useCart } from "medusa-react"
import { useEffect } from "react"
const PaymentProviders = () => {
const { cart, startCheckout } = useCart()
const PaymentProviders = () => {
const { cart, startCheckout } = useCart()
useEffect(() => {
startCheckout.mutate()
}, [])
useEffect(() => {
startCheckout.mutate()
}, [])
return (
<div>
{!cart?.payment_sessions.length && (
<span>No payment processors</span>
)}
<ul>
{cart?.payment_sessions.map(
(paymentSession) => (
<li key={paymentSession.id}>
{paymentSession.provider_id}
</li>
)
)}
</ul>
</div>
)
}
return (
<div>
{!cart?.payment_sessions.length && (
<span>No payment processors</span>
)}
<ul>
{cart?.payment_sessions.map(
(paymentSession) => (
<li key={paymentSession.id}>
{paymentSession.provider_id}
</li>
)
)}
</ul>
</div>
)
}
export default PaymentProviders
```
export default PaymentProviders
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}/payment-sessions`, {
method: "POST",
credentials: "include",
})
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.payment_sessions)
})
```
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}/payment-sessions`, {
method: "POST",
credentials: "include",
})
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.payment_sessions)
})
```
</TabItem>
</TabItem>
</Tabs>
This API Route accepts the ID of the cart as a path parameter. It returns the updated cart with the initialized payment sessions available on `cart.payment_sessions`.
@@ -379,62 +379,62 @@ This API Route accepts the ID of the cart as a path parameter. It returns the up
When the customer chooses the payment processor they want to complete purchase with, you should select the payment session associated with that payment processor. To do that, send a `POST` request to the [Select a Payment Session API Route](https://docs.medusajs.comapi/store#carts_postcartscartpaymentsession):
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.setPaymentSession(cartId, {
// retrieved from the payment session selected by the customer
provider_id: paymentProviderId,
})
.then(({ cart }) => {
console.log(cart.payment_session)
})
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCart } from "medusa-react"
const PaymentProviders = () => {
const { cart, startCheckout, pay } = useCart()
// ...
const handleSetPaymentSession = (provider_id: string) => {
pay.mutate({
provider_id,
```ts
medusa.carts.setPaymentSession(cartId, {
// retrieved from the payment session selected by the customer
provider_id: paymentProviderId,
})
}
// ...
}
.then(({ cart }) => {
console.log(cart.payment_session)
})
```
export default PaymentProviders
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
</TabItem>
<TabItem value="fetch" label="Fetch API">
```tsx
import { useCart } from "medusa-react"
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}/payment-session`, {
method: "POST",
credentials: "include",
body: JSON.stringify({
// the payment session selected by the customer
provider_id: paymentProviderId,
}),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.payment_session)
})
```
const PaymentProviders = () => {
const { cart, startCheckout, pay } = useCart()
// ...
</TabItem>
const handleSetPaymentSession = (provider_id: string) => {
pay.mutate({
provider_id,
})
}
// ...
}
export default PaymentProviders
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}/payment-session`, {
method: "POST",
credentials: "include",
body: JSON.stringify({
// the payment session selected by the customer
provider_id: paymentProviderId,
}),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.payment_session)
})
```
</TabItem>
</Tabs>
The request accepts the ID of the cart as a path parameter, and the ID of the payment processor in the request's body.
@@ -454,79 +454,79 @@ This step is optional and is only necessary for some payment processors. As ment
If you need to update that data at any point before the purchase is made, send a request to [Update a Payment Session API Route](https://docs.medusajs.com/api/store#carts_postcartscartpaymentsessionupdate):
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.updatePaymentSession(cartId, paymentProviderId, {
data: {
// pass any data you want to add in the `data` attribute
// for example:
"test": true,
},
})
.then(({ cart }) => {
console.log(cart.payment_session.data)
})
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useUpdatePaymentSession, useCart } from "medusa-react"
// ...
const PaymentProviders = () => {
const { cart } = useCart()
const updatePaymentSession = useUpdatePaymentSession(cart.id)
// ...
const handleUpdatePaymentSession = (
provider_id: string,
data: Record<string, any>
) => {
updatePaymentSession.mutate({
provider_id,
data,
})
}
// ...
}
export default PaymentProviders
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
<!-- eslint-disable max-len -->
```ts
fetch(
`<BACKEND_URL>/store/carts/${cartId}/payment-sessions/${paymentProviderId}`,
{
method: "POST",
credentials: "include",
body: JSON.stringify({
```ts
medusa.carts.updatePaymentSession(cartId, paymentProviderId, {
data: {
// pass any data you want to add in the `data` attribute
// for example:
"test": true,
},
}),
headers: {
"Content-Type": "application/json",
},
}
)
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.payment_session.data)
})
```
})
.then(({ cart }) => {
console.log(cart.payment_session.data)
})
```
</TabItem>
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useUpdatePaymentSession, useCart } from "medusa-react"
// ...
const PaymentProviders = () => {
const { cart } = useCart()
const updatePaymentSession = useUpdatePaymentSession(cart.id)
// ...
const handleUpdatePaymentSession = (
provider_id: string,
data: Record<string, any>
) => {
updatePaymentSession.mutate({
provider_id,
data,
})
}
// ...
}
export default PaymentProviders
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
<!-- eslint-disable max-len -->
```ts
fetch(
`<BACKEND_URL>/store/carts/${cartId}/payment-sessions/${paymentProviderId}`,
{
method: "POST",
credentials: "include",
body: JSON.stringify({
data: {
// pass any data you want to add in the `data` attribute
// for example:
"test": true,
},
}),
headers: {
"Content-Type": "application/json",
},
}
)
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.payment_session.data)
})
```
</TabItem>
</Tabs>
This request accepts the ID of the cart and the ID of the payment session's payment processor as path parameters. In the request's body, it accepts a `data` object where you can pass any data relevant for the payment processor.
@@ -540,54 +540,54 @@ The last step is to place the order by completing the cart. When you complete th
To complete a cart, send a `POST` request to the [Complete a Cart API Route](https://docs.medusajs.com/api/store#carts_postcartscartcomplete):
<Tabs groupId="request-type" isCodeTabs={true}>
<TabItem value="client" label="Medusa JS Client" default>
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.carts.complete(cartId)
.then(({ type, data }) => {
console.log(type, data)
})
```
```ts
medusa.carts.complete(cartId)
.then(({ type, data }) => {
console.log(type, data)
})
```
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
</TabItem>
<TabItem value="medusa-react" label="Medusa React">
```tsx
import { useCart } from "medusa-react"
// ...
```tsx
import { useCart } from "medusa-react"
// ...
const Cart = () => {
const { completeCheckout } = useCart()
// ...
const Cart = () => {
const { completeCheckout } = useCart()
// ...
const handleCompleteCheckout = () => {
completeCheckout.mutate()
}
const handleCompleteCheckout = () => {
completeCheckout.mutate()
}
// ...
}
// ...
}
export default Cart
```
export default Cart
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}/complete`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then(({ type, data }) => {
console.log(type, data)
})
```
```ts
fetch(`<BACKEND_URL>/store/carts/${cartId}/complete`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then(({ type, data }) => {
console.log(type, data)
})
```
</TabItem>
</TabItem>
</Tabs>
This request accepts the ID of the cart as a path parameter.