[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>

[Onxi95]

Additionally to @Daumas-hugo's modification, there is also an issue with isStripe function. (/src/lib/constants.tsx)

export const isStripe = (providerId?: string) => {
  return providerId?.startsWith("pp_stripe_")
}

it checks if there's a trailing _, but in a runtime, there's a - instead - I've removed it in order to make it work.

[VariableVic]

Hey folks,

Thanks for letting me know about the issues. I'll take a look at both of them shortly.

Apologies for the late response, I was off for the holidays.

And @Daumas-hugo, welcome to Medusa!

[thoward27]

I'm seeing the same thing on my store, the button remains greyed out and the card-details cannot be input into the ui:

When I log the providerId inside of the isStripe function, I get no value. Additionally, as mentioned in the original post, I am also seeing card.payment_collection as being undefined.

Is there any additional information that would help move this issue forward?

---

edit: in case it is helpful, I just instantiated a new storefront from the latest available, copied my config over, wired it to my existing api, and am still seeing the same behavior from the credit-card payment flow:

I also took an opportunity to upgrade my API server to the latest version of all medusa dependencies, that also did not fix this issue for me.

---

The button fix above does seem to move me closer to getting this working. Once I change to the proposed boolean for disabled and press "enter card details", I get the card form. But, then "continue to review" is enabled and can be clicked without entering a credit card.

Here's what I'm going to use for now:

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

This disables the button if it is stripe, there's an active session and the card isn't complete, or if there's no selected payment method and the customer has not paid by giftcard.

Using this, the button is disabled until someone selects a payment method, at which point they can press it to generate a session and activate the card input. Once stripe returns that the card is complete, the button is enabled again so the user can proceed to review.

[VariableVic]

Hey folks,

Found the culprit and refactored the Stripe card payment container. The payment session wasn't initiated properly, resulting in the Stripe context not rendering and stripeReady always returning false.

Could you guys give this a PR spin and see if this solves the issues for you? #454