Having an issue after payment using stripe

[MatteoGauthier]

After processing the checkout the app is crashing

error - src/modules/order/components/payment-details/index.tsx (45:36) @ StripeDetails
error - TypeError: Cannot read properties of undefined (reading 'data')
    at StripeDetails (webpack-internal:///./src/modules/order/components/payment-details/index.tsx:86:39)
    at processChild (/Users/matteogauthier/dev/nearby-rental-store/storefront/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/matteogauthier/dev/nearby-rental-store/storefront/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/matteogauthier/dev/nearby-rental-store/storefront/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/matteogauthier/dev/nearby-rental-store/storefront/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/Users/matteogauthier/dev/nearby-rental-store/storefront/node_modules/.pnpm/react-dom@17.0.2_react@17.0.2/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/matteogauthier/dev/nearby-rental-store/storefront/node_modules/.pnpm/next@12.3.4_oh345hcsaunslvozv24xisnbli/node_modules/next/dist/server/render.js:680:46)
    at Object.defaultGetInitialProps (/Users/matteogauthier/dev/nearby-rental-store/storefront/node_modules/.pnpm/next@12.3.4_oh345hcsaunslvozv24xisnbli/node_modules/next/dist/server/render.js:350:67)
    at Function.getInitialProps (webpack-internal:///./node_modules/.pnpm/next@12.3.4_oh345hcsaunslvozv24xisnbli/node_modules/next/dist/pages/_document.js:19:20)
    at Object.<anonymous> (/Users/matteogauthier/dev/nearby-rental-store/storefront/node_modules/.pnpm/next@12.3.4_oh345hcsaunslvozv24xisnbli/node_modules/next/dist/shared/lib/utils.js:75:33) {
  page: '/order/confirmed/[id]'
}
  43 |     exp_year: number
  44 |     exp_month: number
> 45 |   } = (payment.data.charges as any).data[0].payment_method_details.card
     |                                    ^
  46 | 
  47 |   return (
  48 |     <div className="flex flex-col text-base-regular">

[Charlio99]

Same happening to me

[kasperkristensen]

Thanks for reporting it!

Just to give an update, in regards to this. After looking into it with members of our discord it seems like some users (myself included) receive a charges array as part of the payment object that Stripe populates, which is used to render the payment details on the order page.

Why some users get it, and others don't I haven't been able to pinpoint. It's not documented in the Stripe API documentation, and because of that I've just gone ahead and removed the component that was causing the error.

If you pull the latest main branch the issue should be resolved.