search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.43k stars 2.13k forks source link

Unable to access stripe checkout page #11193

Closed conner-giovenco1 closed 1 year ago

conner-giovenco1 commented 1 year ago

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Categories

Not applicable

Environment information

System: OS: macOS 11.7.3 CPU: (8) x64 Intel(R) Core(TM) i5-1030NG7 CPU @ 1.10GHz Memory: 1.19 GB / 8.00 GB Shell: 3.2.57 - /bin/sh Binaries: Node: 18.15.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.5.0 - /usr/local/bin/npm Browsers: Chrome: 111.0.5563.146 Safari: 16.3 npmPackages: @ampproject/toolbox-optimizer: undefined () @auth0/auth0-react: ^2.0.0 => 2.0.0 @auth0/auth0-spa-js: ^2.0.4 => 2.0.4 (2.0.3) @auth0/nextjs-auth0: ^2.2.1 => 2.2.1 @babel/core: undefined () @babel/runtime: 7.15.4 @edge-runtime/cookies: 3.0.4 @edge-runtime/primitives: 2.0.5 @emotion/react: ^11.10.6 => 11.10.6 @emotion/styled: ^11.10.6 => 11.10.6 @hapi/accept: undefined () @mui/icons-material: ^5.11.9 => 5.11.9 @mui/lab: ^5.0.0-alpha.121 => 5.0.0-alpha.121 @mui/material: ^5.11.9 => 5.11.10 @mui/styles: ^5.11.12 => 5.11.12 @napi-rs/triples: undefined () @next/font: 13.1.6 => undefined (13.1.6, ) @next/react-dev-overlay: undefined () @opentelemetry/api: undefined () @react-oauth/google: ^0.7.0 => 0.7.0 @segment/ajv-human-errors: undefined () @stripe/react-stripe-js: ^1.16.5 => 1.16.5 @stripe/stripe-js: ^1.47.0 => 1.47.0 @types/node: 18.13.0 => 18.13.0 (18.14.2) @types/react: 18.0.28 => 18.0.28 @types/react-dom: ^18.0.11 => 18.0.11 @types/react-image-crop: ^8.1.3 => 8.1.3 @types/styled-components: ^5.1.26 => 5.1.26 @vercel/nft: undefined () acorn: undefined () amphtml-validator: undefined () anser: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () aws-sdk: ^2.1317.0 => 2.1317.0 axios: ^1.3.3 => 1.3.4 babel-packages: undefined () browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () chalk: undefined () ci-info: undefined () cli-select: undefined () client-only: 0.0.1 comment-json: undefined () compress.js: ^1.2.2 => 1.2.2 compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () core-js: ^3.28.0 => 3.28.0 (2.6.12, 1.2.7) cross-spawn: undefined () crypto-browserify: undefined () css.escape: undefined () cssnano-simple: undefined () data-uri-to-buffer: undefined () debug: undefined () devalue: undefined () domain-browser: undefined () dotenv: ^16.0.3 => 16.0.3 edge-runtime: undefined () eslint: 8.34.0 => 8.34.0 eslint-config-next: 13.1.6 => 13.1.6 esm: ^3.2.25 => 3.2.25 events: undefined () find-cache-dir: undefined () find-up: undefined () formidable: ^2.1.1 => 2.1.1 formik: ^2.2.9 => 2.2.9 fresh: undefined () gapi-script: ^1.2.0 => 1.2.0 get-orientation: undefined () glob: undefined () gzip-size: undefined () heic-convert: ^1.2.4 => 1.2.4 heic-decode: ^1.1.2 => 1.1.2 heic2any: ^0.0.3 => 0.0.3 http-proxy: undefined () https-browserify: undefined () icss-utils: undefined () ignore-loader: undefined () image-size: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () jest-worker: undefined () json5: undefined () jsonwebtoken: undefined () loader-runner: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () material-ui: ^0.20.2 => 0.20.2 micromatch: undefined () mini-css-extract-plugin: undefined () nanoid: undefined () native-url: undefined () neo-async: undefined () next: ^13.2.1 => 13.2.1 node-fetch: undefined () node-html-parser: undefined () ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () pica: ^9.0.1 => 9.0.1 platform: undefined () postcss-flexbugs-fixes: undefined () postcss-modules-extract-imports: undefined () postcss-modules-local-by-default: undefined () postcss-modules-scope: undefined () postcss-modules-values: undefined () postcss-preset-env: undefined () postcss-safe-parser: undefined () postcss-scss: undefined () postcss-value-parser: undefined () process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: ^2.5.2 => 2.5.2 () react: ^18.2.0 => 18.2.0 (18.3.0-next-6ddcbd4f9-20230209) react-bootstrap: ^2.7.2 => 2.7.2 react-bootstrap/AbstractModalHeader: undefined () react-bootstrap/Accordion: undefined () react-bootstrap/AccordionBody: undefined () react-bootstrap/AccordionButton: undefined () react-bootstrap/AccordionCollapse: undefined () react-bootstrap/AccordionContext: undefined () react-bootstrap/AccordionHeader: undefined () react-bootstrap/AccordionItem: undefined () react-bootstrap/AccordionItemContext: undefined () react-bootstrap/Alert: undefined () react-bootstrap/Anchor: undefined () react-bootstrap/Badge: undefined () react-bootstrap/BootstrapModalManager: undefined () react-bootstrap/Breadcrumb: undefined () react-bootstrap/BreadcrumbItem: undefined () react-bootstrap/Button: undefined () react-bootstrap/ButtonGroup: undefined () react-bootstrap/ButtonToolbar: undefined () react-bootstrap/Card: undefined () react-bootstrap/CardGroup: undefined () react-bootstrap/CardHeader: undefined () react-bootstrap/CardHeaderContext: undefined () react-bootstrap/CardImg: undefined () react-bootstrap/Carousel: undefined () react-bootstrap/CarouselCaption: undefined () react-bootstrap/CarouselItem: undefined () react-bootstrap/CloseButton: undefined () react-bootstrap/Col: undefined () react-bootstrap/Collapse: undefined () react-bootstrap/Container: undefined () react-bootstrap/Dropdown: undefined () react-bootstrap/DropdownButton: undefined () react-bootstrap/DropdownContext: undefined () react-bootstrap/DropdownItem: undefined () react-bootstrap/DropdownMenu: undefined () react-bootstrap/DropdownToggle: undefined () react-bootstrap/ElementChildren: undefined () react-bootstrap/Fade: undefined () react-bootstrap/Feedback: undefined () react-bootstrap/Figure: undefined () react-bootstrap/FigureCaption: undefined () react-bootstrap/FigureImage: undefined () react-bootstrap/FloatingLabel: undefined () react-bootstrap/Form: undefined () react-bootstrap/FormCheck: undefined () react-bootstrap/FormCheckInput: undefined () react-bootstrap/FormCheckLabel: undefined () react-bootstrap/FormContext: undefined () react-bootstrap/FormControl: undefined () react-bootstrap/FormFloating: undefined () react-bootstrap/FormGroup: undefined () react-bootstrap/FormLabel: undefined () react-bootstrap/FormRange: undefined () react-bootstrap/FormSelect: undefined () react-bootstrap/FormText: undefined () react-bootstrap/Image: undefined () react-bootstrap/InputGroup: undefined () react-bootstrap/InputGroupContext: undefined () react-bootstrap/ListGroup: undefined () react-bootstrap/ListGroupItem: undefined () react-bootstrap/Modal: undefined () react-bootstrap/ModalBody: undefined () react-bootstrap/ModalContext: undefined () react-bootstrap/ModalDialog: undefined () react-bootstrap/ModalFooter: undefined () react-bootstrap/ModalHeader: undefined () react-bootstrap/ModalTitle: undefined () react-bootstrap/Nav: undefined () react-bootstrap/NavContext: undefined () react-bootstrap/NavDropdown: undefined () react-bootstrap/NavItem: undefined () react-bootstrap/NavLink: undefined () react-bootstrap/Navbar: undefined () react-bootstrap/NavbarBrand: undefined () react-bootstrap/NavbarCollapse: undefined () react-bootstrap/NavbarContext: undefined () react-bootstrap/NavbarOffcanvas: undefined () react-bootstrap/NavbarToggle: undefined () react-bootstrap/Offcanvas: undefined () react-bootstrap/OffcanvasBody: undefined () react-bootstrap/OffcanvasHeader: undefined () react-bootstrap/OffcanvasTitle: undefined () react-bootstrap/OffcanvasToggling: undefined () react-bootstrap/Overlay: undefined () react-bootstrap/OverlayTrigger: undefined () react-bootstrap/PageItem: undefined () react-bootstrap/Pagination: undefined () react-bootstrap/Placeholder: undefined () react-bootstrap/PlaceholderButton: undefined () react-bootstrap/Popover: undefined () react-bootstrap/PopoverBody: undefined () react-bootstrap/PopoverHeader: undefined () react-bootstrap/ProgressBar: undefined () react-bootstrap/Ratio: undefined () react-bootstrap/Row: undefined () react-bootstrap/SSRProvider: undefined () react-bootstrap/Spinner: undefined () react-bootstrap/SplitButton: undefined () react-bootstrap/Stack: undefined () react-bootstrap/Switch: undefined () react-bootstrap/Tab: undefined () react-bootstrap/TabContainer: undefined () react-bootstrap/TabContent: undefined () react-bootstrap/TabPane: undefined () react-bootstrap/Table: undefined () react-bootstrap/Tabs: undefined () react-bootstrap/ThemeProvider: undefined () react-bootstrap/Toast: undefined () react-bootstrap/ToastBody: undefined () react-bootstrap/ToastContainer: undefined () react-bootstrap/ToastContext: undefined () react-bootstrap/ToastFade: undefined () react-bootstrap/ToastHeader: undefined () react-bootstrap/ToggleButton: undefined () react-bootstrap/ToggleButtonGroup: undefined () react-bootstrap/Tooltip: undefined () react-bootstrap/TransitionWrapper: undefined () react-bootstrap/createChainedFunction: undefined () react-bootstrap/createUtilityClasses: undefined () react-bootstrap/createWithBsPrefix: undefined () react-bootstrap/divWithClassName: undefined () react-bootstrap/getInitialPopperStyles: undefined () react-bootstrap/getTabTransitionComponent: undefined () react-bootstrap/helpers: undefined () react-bootstrap/safeFindDOMNode: undefined () react-bootstrap/transitionEndListener: undefined () react-bootstrap/triggerBrowserReflow: undefined () react-bootstrap/types: undefined () react-bootstrap/useOverlayOffset: undefined () react-bootstrap/usePlaceholder: undefined () react-bootstrap/useWrappedRefWithWarning: undefined () react-dom: ^18.2.0 => 18.2.0 (18.3.0-next-6ddcbd4f9-20230209) react-dropzone: ^14.2.3 => 14.2.3 react-easy-crop: ^4.7.3 => 4.7.3 react-google-drive-picker: ^1.2.0 => 1.2.0 react-image-crop: ^10.0.9 => 10.0.9 react-image-file-resizer: ^0.4.8 => 0.4.8 react-is: 18.2.0 react-redux: ^8.0.5 => 8.0.5 react-refresh: 0.12.0 react-router-dom: ^6.8.1 => 6.8.1 react-server-dom-webpack: 18.3.0-next-6ddcbd4f9-20230209 react-slideshow-image: ^4.2.0 => 4.2.0 redux: ^4.2.1 => 4.2.1 regenerator-runtime: 0.13.4 sass-loader: undefined () scheduler: undefined () schema-utils: undefined () semver: undefined () send: undefined () server-only: 0.0.1 setimmediate: undefined () sharp: ^0.31.3 => 0.31.3 shell-quote: undefined () source-map: undefined () stacktrace-parser: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () stripe: ^11.12.0 => 11.12.0 styled-components: ^5.3.6 => 5.3.6 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tty-browserify: undefined () typescript: 4.9.5 => 4.9.5 ua-parser-js: undefined () undici: undefined () unistore: undefined () util: undefined () vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () ws: undefined () yup: ^1.0.0 => 1.0.0 npmGlobalPackages: corepack: 0.15.3 npm: 9.5.0 yarn: 1.22.19

Describe the bug

I am able to go through my flow locally and get redirected to the stripe checkout page, no problems. When my app is deployed on amplify, I receive an error "You did not provide an API key. You need to provide your API key in the Authorization header, using Bearer auth (e.g. 'Authorization: Bearer YOUR_SECRET_KEY'). See https://stripe.com/docs/api#authentication for details, or we can help at https://support.stripe.com/."

Expected behavior

Ability to get to stripe checkout page

Reproduction steps

n/a

Code Snippet

No response

Log output

No response

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

cwomack commented 1 year ago

Hello, @conner-giovenco1 👋 and thanks for opening this issue. Can you provide a little more details around what version of Amplify you're currently using and if you're using the same API Keys in both your local environment and the deployed version on Amplify?

We may need to know more about how the environment variables are configured and possible reproduction steps to better assist on the Amplify side. Thanks!

david-mcafee commented 1 year ago

@conner-giovenco1 - if I'm understanding correctly, it appears this error is coming from Stripe, and not Amplify (e.g. See https://stripe.com/docs/api#authentication for details, or we can help at https://support.stripe.com/. in the error message).

cwomack commented 1 year ago

@conner-giovenco1, any chance you could provide a code snippet or more context on the implementation for Stripe in your Amplify app so we can help further?

cwomack commented 1 year ago

Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue.

Thank you!