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

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

@@ -36,14 +36,15 @@ 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}
@@ -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,
         }),
       }
     )
@@ -142,6 +140,17 @@ export const fetchHighlights = [
       } which is in development.`
   }
 }
+
+const handlePayment = () => {
+  retrievePaymentProviders()
+
+  // ... customer chooses payment provider
+  // const providerId = ...
+
+  selectPaymentProvider(providerId)
+
+  getPaymentUi()
+}
 ```
 
   </CodeTab>
@@ -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,
           }),
         }
       )
@@ -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}