New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[eCom Tutorial] Refactor to function components and use `loadStripe` helper. #21675

Merged

AishaBlake merged 12 commits into master from thorsten-stripe-refactor-ecom-tutorial

Mar 5, 2020

Contributor

thorsten-stripe commented Feb 22, 2020

Description

I've updated the demo site to use function components, and use the new stripe-js module:

Documentation

Refactor from class components to function components.
Remove gatsby-stripe-plugin see deprecation note: https://www.npmjs.com/package/gatsby-plugin-stripe
Use loadStripe helper instead: https://github.com/stripe/stripe-js#loadstripe


          Refactor to function components and use loadStripe helper.

daecfa7

thorsten-stripe requested a review from a team as a code owner

February 22, 2020 13:57

thorsten-stripe mentioned this pull request

Update to loadStripe njosefbeck/gatsby-plugin-stripe#4

Closed

Contributor

laurieontech commented Feb 24, 2020

Thanks for the PR! We'll want to verify the technical instructions, so I've added this to our list for doing so.

AishaBlake self-assigned this


          e-commerce capitalization and relative links

1001cb5

AishaBlake suggested changes

View reviewed changes

AishaBlake left a comment

Hi, @thorsten-stripe! I have a few comments and questions and I still need to walk through this but wanted to get an initial round of suggestions in a little faster! Thanks so much for updating this and let me know if I can clarify anything.

docs/tutorial/ecommerce-tutorial/index.md Outdated

    
              ### How does the StripeJS plugin work?

              Stripe provides a JavaScript library the allows you to securely redirect your customer to the Stripe hosted checkout page. Due to [PCI compliance requirements](https://stripe.com/docs/security), the Stripe.js library has to be loaded from Stripe's servers. Stripe provides a [loading wrapper](https://github.com/stripe/stripe-js) that allows you to import Stripe.js like an ES module:

AishaBlake Feb 26, 2020

Suggested change

      
            Stripe provides a JavaScript library the allows you to securely redirect your customer to the Stripe hosted checkout page. Due to [PCI compliance requirements](https://stripe.com/docs/security), the Stripe.js library has to be loaded from Stripe's servers. Stripe provides a [loading wrapper](https://github.com/stripe/stripe-js) that allows you to import Stripe.js like an ES module:
          
            Stripe provides a JavaScript library that allows you to securely redirect your customer to the Stripe hosted checkout page. Due to [PCI compliance requirements](https://stripe.com/docs/security), the Stripe.js library has to be loaded from Stripe's servers. Stripe provides a [loading wrapper](https://github.com/stripe/stripe-js) that allows you to import Stripe.js like an ES module:

docs/tutorial/ecommerce-tutorial/index.md

    
              ```

              to the end of the `<body>` tag across all of your pages. This helps facilitate Stripe's [fraud detection](https://stripe.com/docs/stripe-js/reference#including-stripejs).

              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.

AishaBlake Feb 26, 2020

Should it be "StripeJS" or "Stripe.js"? Does it matter from your perspective? Even if not, I'd like to pick one to use consistently throughout the tutorial so that the question doesn't come up for readers.

Contributor Author

thorsten-stripe Mar 2, 2020

Good call, thanks, will update to Stripe.js throughout 👍

docs/tutorial/ecommerce-tutorial/index.md Outdated

               ---
               In this advanced tutorial, you’ll learn how to use Gatsby to build the UI for a basic e-commerce site that can accept payments, with [Stripe](https://stripe.com) as the backend for processing payments.
+              - Demo running [on Netlify](https://gatsby-ecommerce-stripe.netlify.com/)
+              - Code hosted [on GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial)

AishaBlake Feb 26, 2020

I know this demo was already linked but we (the Learning team) are trying to house example code in the examples directory. That way, we aren't as reliant on the community to maintain them. Would you mind adding a copy to that directory and linking to that instead?

docs/tutorial/ecommerce-tutorial/index.md Outdated

		@@ -12,20 +15,16 @@ Benefits of using Gatsby for e-commerce sites include the following:
		- Blazing fast performance when your pages are converted from React into static files
		- Easy to host

AishaBlake Feb 26, 2020

Doesn't look like this was a change you made but avoiding words like "simple" and "easy" is important for the docs. Would you mind sharing why you think Gatsby + Stripe is a good choice? These are general Gatsby talking points.

Contributor Author

thorsten-stripe Mar 2, 2020

Good catch, thanks, will update throughout. Yes, these talking points are more about why use Gatsby for eCommerce use cases. I'll add a callout that with the client-only Checkout no server component is needed.

docs/tutorial/ecommerce-tutorial/index.md Outdated


		const containerStyles = {
		const conatinerStyles = {

AishaBlake Feb 26, 2020

Suggested change

      
            const conatinerStyles = {
          
            const containerStyles = {

docs/tutorial/ecommerce-tutorial/index.md Outdated

+                      }
+                    `}
+                    render={({ skus }) => (
+                      <div style={conatinerStyles}>

AishaBlake Feb 26, 2020

Suggested change

      
                    <div style={conatinerStyles}>
          
                    <div style={containerStyles}>

thorsten-stripe added 2 commits

March 2, 2020 12:44


          Review updates.

1fe55c2


          Add repor to examples directory.

ef6beac

thorsten-stripe requested a review from a team as a code owner

March 2, 2020 04:52

Contributor Author

thorsten-stripe commented Mar 2, 2020

@AishaBlake thanks so much for the review and suggestions :) I've incorporated them and added the sample code to the examples directory. PTAL

freiksenet added the type: documentation label

Aisha Blake added 3 commits

March 3, 2020 20:12


          Remove unecessary files from example

d2e0e9d


          Remove unecessary files from example

a861f1d


          Merge branch 'thorsten-stripe-refactor-ecom-tutorial' of github.com:g…

39f4d5a

…atsbyjs/gatsby into thorsten-stripe-refactor-ecom-tutorial

AishaBlake previously approved these changes

View reviewed changes

AishaBlake left a comment

I removed a few files we didn't need but the rest of this looks good! Thank you for jumping in with this update!

gatsbybot added 2 commits

March 4, 2020 01:27


          Merge remote-tracking branch 'upstream/master' into thorsten-stripe-r…

471565a

…efactor-ecom-tutorial


          chore: format

f9fb5d3

gatsbybot dismissed AishaBlake’s stale review via

f9fb5d3

March 4, 2020 01:27

AishaBlake previously approved these changes

View reviewed changes


          Replace blurry screenshot

0f0d69a

AishaBlake dismissed their stale review via

0f0d69a

March 4, 2020 18:54


          Reduce PNG size

e5c16f4

AishaBlake approved these changes

View reviewed changes

AishaBlake left a comment

I updated one of the screenshots but this looks good to go. I'm going to hold off on merging for a bit until I hear back from Core.


          Merge remote-tracking branch 'upstream/master' into thorsten-stripe-r…

114eb32

…efactor-ecom-tutorial

AishaBlake approved these changes

View reviewed changes

AishaBlake left a comment

I wanted to double check that this didn't need direct input from Core and I got my answer, so I'm going to go ahead and merge this in. Thank you again for the contribution!

AishaBlake merged commit 8eb238e into master

delete-merged-branch bot deleted the thorsten-stripe-refactor-ecom-tutorial branch

March 5, 2020 16:47

Contributor Author

thorsten-stripe commented Mar 6, 2020

Thank you, appreciate your help with this! :)

marcysutton mentioned this pull request

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

Closed

AishaBlake commented Mar 11, 2020 •

edited

Loading

@thorsten-stripe would you mind verifying my interpretation of "checkout journey"? This sentence could use some clarification either way. I'm happy to write a quick edit but wanted to check with you first!

Contributor Author

thorsten-stripe commented Mar 12, 2020 •

edited

Loading

@AishaBlake yes, your explanation is spot on. I might include the product catalogue overview and cart pages (if you have any of those).

Also, it looks like we need to update https://www.gatsbyjs.org/docs/processing-payments-with-stripe/. I didn't even know that existed 🙈

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type: documentation