[Bug]: Customize Stripe Integration guide failing (paymentElement)

[420coupe]

Package.json file

{
  "name": "medusa-next",
  "version": "1.0.3",
  "private": true,
  "description": "Next.js Starter to be used with Medusa V2",
  "keywords": [
    "medusa-storefront"
  ],
  "scripts": {
    "dev": "next dev --turbopack -p 8000",
    "build": "next build",
    "start": "next start -p 8000",
    "lint": "next lint",
    "analyze": "ANALYZE=true next build"
  },
  "dependencies": {
    "@headlessui/react": "^2.2.0",
    "@medusajs/icons": "latest",
    "@medusajs/js-sdk": "latest",
    "@medusajs/ui": "latest",
    "@meilisearch/instant-meilisearch": "^0.7.1",
    "@radix-ui/react-accordion": "^1.2.1",
    "@stripe/react-stripe-js": "^1.7.2",
    "@stripe/stripe-js": "^1.29.0",
    "@supabase/supabase-js": "^2.45.4",
    "algoliasearch": "^4.20.0",
    "lodash": "^4.17.21",
    "next": "^15.0.3",
    "pg": "^8.11.3",
    "qs": "^6.12.1",
    "react": "19.0.0-rc-66855b96-20241106",
    "react-country-flag": "^3.1.0",
    "react-dom": "19.0.0-rc-66855b96-20241106",
    "react-instantsearch-hooks-web": "^6.47.3",
    "react-intersection-observer": "^9.3.4",
    "react-swipeable": "^7.0.1",
    "server-only": "^0.0.1",
    "sharp": "^0.33.5",
    "tailwindcss-radix": "^2.8.0",
    "webpack": "^5"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@medusajs/types": "latest",
    "@medusajs/ui-preset": "latest",
    "@types/lodash": "^4.14.195",
    "@types/node": "17.0.21",
    "@types/pg": "^8.11.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@types/react-instantsearch-dom": "^6.12.3",
    "ansi-colors": "^4.1.3",
    "autoprefixer": "^10.4.2",
    "babel-loader": "^8.2.3",
    "eslint": "8.10.0",
    "eslint-config-next": "15.0.3",
    "postcss": "^8.4.8",
    "prettier": "^2.8.8",
    "tailwindcss": "^3.0.23",
    "typescript": "^5.3.2"
  },
  "packageManager": "[email protected]",
  "resolutions": {
    "@types/react": "npm:[email protected]",
    "@types/react-dom": "npm:[email protected]"
  },
  "overrides": {
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106"
  }
}

Node.js version

v22.12.0

Operating system name and version

Ubuntu 22.04.5

Browser name

Brave, Safari

What happended?

Followed the guide below, and that implementation does not work correctly. No order is created when place order button is pressed, but the payment is successfully captured and multiple request to capture PaymentIntent are called.

https://docs.medusajs.com/resources/nextjs-starter/guides/customize-stripe

I solved this by adding the following to the .then statement in the file below
src/modules/checkout/components/payment-button/index.tsx

// added paymentIntent
.then(({ error, paymentIntent }) => {
        if (error) {
          const pi = error.payment_intent

          if (
            (pi && pi.status === "requires_capture") ||
            (pi && pi.status === "succeeded")
          ) {
            onPaymentCompleted()
          }

          setErrorMessage(error.message || null)
          return
        }
        // if payment intent is present and meets condition, process order
        if ((paymentIntent && paymentIntent.status === "requires_capture") || paymentIntent.status === "succeeded") {
          return onPaymentCompleted()
        }

        return
      })
  }

Expected behavior

correct paymentElement implementation that successfully creates order after payment is captured and only one request to capture a PaymentIntent is called.

medusa-config.ts

{
      resolve: "@medusajs/medusa/payment",
      options: {
        providers: [
          {
            resolve: "@medusajs/medusa/payment-stripe",
            id: "stripe",
            options: {
              apiKey: process.env.STRIPE_API_KEY,
              webhookSecret: process.env.STRIPE_WEBHOOK,
              automatic_payment_methods: true,
              capture: true,
            },
          },
        ],
      },
    },

Actual behavior

With my posted fix above it does process the payment and create the order, however the payment capture is still called twice after the payment has already been captured. see full activity below

Another weird part that is different from my previous implementation of paymentElement, is applepay payment confirmation is triggered when the Continue to review button is pressed. No payment is captured until the Place order button is pressed, but can be misleading from the customer experience.

Additionally when using cashapp on desktop, it opens the authorize payment in a new window and if payment is authorized it successfully redirects to the order confirmation page, but the original checkout page throws the error below.

Link to reproduction repo

https://dev.derftuned.com

[420coupe]

I also have 2 orders that payment was captured but no orders were ever created, how would I manually create the orders/complete the carts for these two successful payments?

i've tried running placeOrder(cartId) but getting the following errors below, i tried manually deleting the matching order_address.id and rerunning the placeOrder(cartId).

error below occurs after i delete above order_address.id and it creates a new order_address.id entry.

[sradevski]

I am doing some improvements to Stripe currently, and I will look into this as well in the next few days.

[420coupe]

Any update on this?

I am still struggling with being able to complete certain orders as I am getting the same errors above. This seems to be exclusively happening with payments using cashapp or link. It does not happen on every cashapp/link order as some go through successfully.

Out of 1008 txs, 19 had this complete order error.
out of the 19 - 2 card, 2 link, 15 cashapp

Additionally - for payments using link/cashapp no Statement Descriptor nor Card ID is being submitted with the payment where every other payment contains both the Statement Descriptor (DT MOTORSPORTS) and Card ID (pm_uniqueID).

[sradevski]

No updates yet, we'll let you know once we've started working on it.