docs: update create payment collection route usage in store development (#8736)

www/apps/resources/app/storefront-development/checkout/payment/page.mdx

@@ -36,23 +36,24 @@ export const fetchHighlights = [
   ["7", "fetch", "Retrieve available payment providers."],
   ["18", "selectPaymentProvider", "This function is executed when the customer submits their chosen payment provider."],
   ["25", "fetch", "Create a payment collection for the cart when it doesn't have one."],
-  ["47", "fetch", "Initialize the payment session in the payment collection for the chosen provider."],
+  ["44", "fetch", "Initialize the payment session in the payment collection for the chosen provider."],
-  ["65", "fetch", "Retrieve the cart again to update its data."],
+  ["62", "fetch", "Retrieve the cart again to update its data."],
-  ["76", "getPaymentUi", "This function shows the necessary UI based on the selected payment provider."],
+  ["73", "getPaymentUi", "This function shows the necessary UI based on the selected payment provider."],
-  ["77", "activePaymentSession", "The active session is the first in the payment collection's sessions."],
+  ["74", "activePaymentSession", "The active session is the first in the payment collection's sessions."],
-  ["83", "", "Test which payment provider is chosen based on the prefix of the provider ID."],
+  ["80", "", "Test which payment provider is chosen based on the prefix of the provider ID."],
-  ["84", `"pp_stripe_"`, "Check if the chosen provider is Stripe."],
+  ["81", `"pp_stripe_"`, "Check if the chosen provider is Stripe."],
-  ["88", `"pp_system_default"`, "Check if the chosen provider is the default systen provider."],
+  ["85", `"pp_system_default"`, "Check if the chosen provider is the default systen provider."],
-  ["90", "default", "Handle unrecognized providers."],
+  ["87", "default", "Handle unrecognized providers."],
+  ["94", "handlePayment", "The function that handles the payment process using the above functions."]
 ]
 
-  ```ts highlights={fetchHighlights}
+```ts highlights={fetchHighlights}
-  // assuming the cart is previously fetched
+// assuming the cart is previously fetched
-  const cart = {
+const cart = {
   // cart object...
-  }
+}
 
-  const retrievePaymentProviders = async () => {
+const retrievePaymentProviders = async () => {
   const { payment_providers } = await fetch(
     `http://localhost:9000/store/payment-providers?region_id=${
       cart.region_id
@@ -62,11 +63,11 @@ export const fetchHighlights = [
     .then((res) => res.json())
 
   return payment_providers
-  }
+}
 
-  const selectPaymentProvider = async (
+const selectPaymentProvider = async (
   selectedPaymentProviderId: string
-  ) => {
+) => {
   let paymentCollectionId = cart.payment_collection?.id
 
   if (!paymentCollectionId) {
@@ -81,9 +82,6 @@ export const fetchHighlights = [
         },
         body: JSON.stringify({
           cart_id: cart.id,
-            region_id: cart.region_id,
-            currency_code: cart.currency_code,
-            amount: cart.total,
         }),
       }
     )
@@ -120,9 +118,9 @@ export const fetchHighlights = [
   .then((res) => res.json())
 
   return updatedCart
-  }
+}
 
-  const getPaymentUi = () => {
+const getPaymentUi = () => {
   const activePaymentSession = cart?.payment_collection?.
     payment_sessions?.[0]
   if (!activePaymentSession) {
@@ -141,8 +139,19 @@ export const fetchHighlights = [
         activePaymentSession.provider_id
       } which is in development.`
   }
-  }
+}
-  ```
+
+const handlePayment = () => {
+  retrievePaymentProviders()
+
+  // ... customer chooses payment provider
+  // const providerId = ...
+
+  selectPaymentProvider(providerId)
+
+  getPaymentUi()
+}
+```
 
   </CodeTab>
   <CodeTab label="React" value="react">
@@ -164,14 +173,14 @@ export const highlights = [
   ["160", "getPaymentUi", "If a provider is chosen, render its UI."]
 ]
 
-  ```tsx highlights={highlights}
+```tsx highlights={highlights}
-  "use client" // include with Next.js 13+
+"use client" // include with Next.js 13+
 
-  import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
-  import { useCart } from "../../../providers/cart"
+import { useCart } from "../../../providers/cart"
-  import { HttpTypes } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
 
-  export default function CheckoutPaymentStep() {
+export default function CheckoutPaymentStep() {
   const { cart, setCart } = useCart()
   const [paymentProviders, setPaymentProviders] = useState<
     HttpTypes.StorePaymentProvider[]
@@ -225,9 +234,6 @@ export const highlights = [
           },
           body: JSON.stringify({
             cart_id: cart.id,
-              region_id: cart.region_id,
-              currency_code: cart.currency_code,
-              amount: cart.total,
           }),
         }
       )
@@ -327,8 +333,8 @@ export const highlights = [
       {getPaymentUi()}
     </div>
   )
-  }
+}
-  ```
+```
 
   </CodeTab>
 </CodeTabs>
@@ -340,3 +346,5 @@ In the example above, you:
     1. Check whether the cart has a payment collection. If not, create one using the [Create Payment Collection API route](!api!/store#payment-collections_postpaymentcollections).
     2. Initialize the payment session for the chosen payment provider using the [Initialize Payment Session API route](!api!/store#payment-collections_postpaymentcollectionsidpaymentsessions).
 - Once the cart has a payment session, you optionally render the UI to perform additional actions. For example, if the customer chose stripe, you can show them the card form to enter their credit card.
+
+In the `Fetch API` example, the `handlePayment` function implements this flow.

www/packages/docs-ui/src/components/MDXComponents/index.tsx

@@ -153,6 +153,7 @@ export const MDXComponents: MDXComponentsType = {
       <li
         className={clsx(
           "text-medusa-fg-subtle [&:not(:last-child)]:mb-docs_0.5",
+          "[&_ol]:mt-docs_0.5 [&_ul]:mt-docs_0.5",
           className
         )}
         {...props}