e-commerce with stripe is outdated, gatsby-plugin-stripe is now deprecated

[tbntdima]

Hi, I was just following the 'Gatsby e-commerce Tutorial', and had some issues with gatsby-plugin-stripe, I could not start the server. Then I've checked plugin's docs, and it seems that plugin is deprecated: https://www.npmjs.com/package/gatsby-plugin-stripe

[wardpeet]

Hi @DmitriyAA,

Thank you for bringing this to our attention. I'm pinging @gatsbyjs/learning so they are aware.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[marcysutton]

@DmitriyAA the doc underwent an update since your issue was opened. Can you take a look and see if it works for you? https://www.gatsbyjs.org/docs/processing-payments-with-stripe/

PR: #21675

[tbntdima]

@marcysutton, thanks for letting me know! I will definitely check it out and write back.

[tbntdima]

p.s. @marcysutton, I think you put a different link, here is the one that was updated in the PR https://www.gatsbyjs.org/tutorial/ecommerce-tutorial/

[marcysutton]

@DmitriyAA oh yes, you're totally right! Sounds like that guide may need an update, too. We could update the tutorial URL to be more specific at the same time.

[tbntdima]

@marcysutton, just followed the new tutorial, everything is working fine right now.
I just have small questions now (about the code on a tutorial itself), should I ask them here, on that PR or create a new issue?

[marcysutton]

@DmitriyAA I'd say go ahead and ask any questions you have here! PRs are definitely welcome and appreciated.

[tbntdima]

It's just about this section of the tutorial

Stripe.js is loaded as a side effect of the import '@stripe/stripe-js'; statement. To best leverage Stripe’s advanced fraud functionality, ensure that Stripe.js is loaded on every page of your customer’s checkout journey, not just your checkout page. This allows Stripe to detect anomalous behavior that may be indicative of fraud as customers browse your website.

Would it be better to just load stripe on all the pages?

[AishaBlake]

@DmitriyAA I took "checkout journey" to mean it should be loaded on every page directly related to checkout in order to leverage that fraud [detection] functionality. So if your site includes a blog or informational pages (about, contact, privacy policy etc.), there's no need to load it on those pages. Loading it on product detail pages, though, will help with fraud detection. I wouldn't load it on all pages if the extra JavaScript isn't necessary.

I'll follow up with the author to verify and make a note to clarify that section. Thanks so much for the question and for bringing this up in the first place! I'm going to close this issue but please feel free to open a new one if you come up with additional feedback or questions.

[thorsten-stripe]

I didn't know https://www.gatsbyjs.org/docs/processing-payments-with-stripe/ 🙈 existed. I'll reopen this issue and assign to myself. Thanks for flagging!

[DavidSabine]

The gatsby-plugin-stripe repository has been archived. And Stripe advises the use of @stripe/react-stripe-js instead of their older react-stripe-elements.

Both Gatsby docs referenced in this thread still advise the use of those older modules.

https://www.gatsbyjs.org/docs/processing-payments-with-stripe/
and
https://www.gatsbyjs.org/tutorial/ecommerce-tutorial/

Please don't close this issue. It may have gone stale but it's still relevant.

I'm currently experimenting with react-stripe-js and not confident to author new docs for the Gatsby site. (But I'd be happy to help is someone else wants to do so.)

[thorsten-stripe]

@DavidSabine I've opened PR #22431 to remove the outdated information from https://www.gatsbyjs.org/docs/processing-payments-with-stripe/. Would appreciate your feedback!

I updated https://www.gatsbyjs.org/tutorial/ecommerce-tutorial/ a couple weeks ago, see #21675. You mention that it "still advise the use of those older modules", but I can't see that. Could you point me to where you're seeing this?

Thanks everyone for flagging this :)

[philsinatra]

@thorsten-stripe Forgive me if this question is ridiculous, but I've been watching hours of your videos and going through endless tutorials online trying to integrate Stripe with a Gatsby site and nothing is working as documented. I've flushed everything and started from scratch with the the docs referenced in this issue at https://www.gatsbyjs.com/tutorial/ecommerce-tutorial/.

Where can I find the price id referenced here? My stripe dashboard has two test products but I'm only able to find a product ID, which is throwing an error in the tutorial code:

Uncaught (in promise) IntegrationError: No such plan: 'prod_xxxxxxxxxxxx'

Any help is greatly appreciated, I'm down 2+ full days trying to get this running.

[thorsten-stripe]

@philsinatra sorry that this has been so painful for you :(

You can find the price ID in the pricing section when viewing a product page in the Stripe Dashboard:

Hope this helps.

[philsinatra]

@thorsten-stripe I knew it was right in front of my face. Thanks

[yansusanto]

@thorsten-stripe May I ask if using <select> in ProductCard.js is the only way to display the price? Thanks!

[thorsten-stripe]

@yansusanto You can display the price however you like, not at all a requirement to use a select, it's just convenient as it allows you to use formData to get the selected price ID.

[yansusanto]

@thorsten-stripe Thanks for the reply. The reason I ask is because removing the select returns an error

Unhandled Rejection (IntegrationError): Invalid value for stripe.redirectToCheckout: lineItems.0.price should be a string. You specified: null.

Am I missing something?

[thorsten-stripe]

@yansusanto If you move the select you will need to update the code to work with whatever you replace the select with. Sorry, but this is not a support channel. For further help with your integration, please jump on our technical IRC chat: https://webchat.freenode.net/#stripe