[Bug]: Stripe Integration not working on Payment page

[Daumas-hugo]

Package.json file

{
  "name": "medusa-next",
  "version": "1.0.3",
  "private": true,
  "author": "Kasper Fabricius Kristensen <[email protected]> & Victor Gerbrands <[email protected]> (https://www.medusajs.com)",
  "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/js-sdk": "latest",
    "@medusajs/ui": "latest",
    "@radix-ui/react-accordion": "^1.2.1",
    "@stripe/react-stripe-js": "^1.7.2",
    "@stripe/stripe-js": "^1.29.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",
    "server-only": "^0.0.1",
    "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

v20.15.0

Operating system name and version

Windows 11 Business 23H2

Browser name

Firefox, Google Chrome, Edge

What happended?

I started using MedusaJS five days ago and created my project with the create-medusa-app CLI tool. According to the documentation, integrating Stripe should work out of the box if the storefront is configured with the API key. However, the "Enter card details" button remained disabled on the checkout page. Investigating the code in src/modules/checkout/components/payment-wrapper/index.tsx, I noticed that my cart object doesn’t have the payment_collection key, so paymentSession is always null.

Expected behavior

The Stripe integration should seamlessly enable me to enter card details and process payment in test mode as outlined in the documentation.

Actual behavior

Despite providing my Stripe API key, the "Enter card details" button is disabled due to the missing payment_collection key, leaving the payment session null and preventing any card entry

Link to reproduction repo

There is no code modification, i only put the NEXT_PUBLIC_STRIPE_KEY

[Daumas-hugo]

As I mentioned in my comment on this PR #428, I’ve been investigating the issue and noticed that reverting to the last commit before #427 (commit 8c0c29b) makes the Stripe (in test mode) integration work.

I saw that the cart object in the new version doesn’t have a payment_collection key in my case, which leads to a null paymentSession and at the end disable the following steps of the stripe integration visually disabling the “Enter card details” button. If anyone has insight into this behavior or a workaround, please let me know.

[Daumas-hugo]

I think i found why, when we first proceed in the payment workflow if we don't allow user to proceed since the button is disabled.
The button is disabled because cardComplete is false by default and so when we select Stripe we have isStripe true && !cardComplete true so the button is disabled

<Button
  size="large"
  className="mt-6"
  onClick={handleSubmit}
  isLoading={isLoading}
  disabled={
    (isStripe && !cardComplete) ||
    (!selectedPaymentMethod && !paidByGiftcard)
  }
  data-testid="submit-payment-button"
>
  {!activeSession && isStripeFunc(selectedPaymentMethod)
    ? " Enter card details"
    : "Continue to review"}
</Button>

To make it work temporarily i did :

<Button
  size="large"
  className="mt-6"
  onClick={handleSubmit}
  isLoading={isLoading}
  disabled={
    isStripe &&
    !cardComplete &&
    !selectedPaymentMethod &&
    !paidByGiftcard
  }
  data-testid="submit-payment-button"
>
  {!activeSession && isStripeFunc(selectedPaymentMethod)
    ? " Enter card details"
    : "Continue to review"}
</Button>