chore(docs): Adds two key steps on building ecommerce sites with Stripe tutorial #18669

urielhdz · 2019-10-14T22:10:02Z

Description

After following the tutorial on how tu build ecommerce sites with Stripe I noticed that two important steps were missing from the tutorial:

SKUs need to have a name attribute for them to be used on the client only Checkout integration: I added the steps to add the name through the Stripes dashboard, although the attribute can also be set through the API, I think we could fix this issue by just adding the requirement as an annotation instead of explaining the whole process, but since adding the attribute is not that straightforward I added the steps to the tutorial.
Checkout client-side only integration needs to be enabled to use the redirectToCheckout function: This is key since the guide is based on this specific functionality, since this issue is solved only through the Stripes dashboard, I think that is safe to keep the section on how to enable the integration.

Adds a reference guide on how to upgrade Gatsby and its dependencies

…r the doc-links.yaml file, escaped < and > characters in markdown thata were causing some errors

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

…emoving yarn instructions and alignments to Gatsby style guide

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

…grade-guide

…ites with Stripe that were required by stripe for the example to work

urielhdz · 2019-10-15T03:26:14Z

Seems like the Stripe's interface changed for me 🙃, now SKUs require a name once they are created. I don't know how to tackle these scenarios in which the UI seems to differ per account.

urielhdz · 2019-10-15T03:36:01Z

I removed the section on how to set a name for SKUs since the latest UI requires a name by default.

Now this PR limits to the second point, which reminds you that the Checkout client-side only integration needs to be enabled.

LekoArts

Small comment from me. Also please remove the (now) two unrelated images from this PR. Thanks!

docs/tutorial/ecommerce-tutorial/index.md

…learning

urielhdz · 2019-10-15T20:54:42Z

Upon further investigation, It seems like the SKUs interface changes after the "Checkout client-only integration" is enabled.

docs/tutorial/ecommerce-tutorial/index.md

…kout` function Co-Authored-By: Michael <184316+muescha@users.noreply.github.com>

…ixed typos, changed quotes

urielhdz · 2019-10-16T16:57:25Z

Thanks to both @muescha and @LekoArts for your improvements.

Given how the SKUs interface changes depending on your Stripe's settings, and the fact that you may be using the API and not the dashboard, I rewrote the Create a product and SKU to mention that your SKUs need to have a name for them to be used on this integration, and because there was a reference of Stripe working with any Backend component.

I also created a new account to follow the process from the start and I added instruction on how to properly setup your account to use this integration, this includes enabling the 'Checkout client-only integration' and setting a name for your account.

I also changed some pronouns from 'we' to 'you' that were left on the tutorial to adhere to #18284.

Additionally, I was wondering if components should be changed from class based to functional? In this particular example we would need to change both the tutorial and the provided code from the demo.

Thanks again!

muescha · 2019-10-16T17:18:54Z

i think updating it to functional/hooks would be a nice improvement.

urielhdz · 2019-10-16T17:22:41Z

i think updating it to functional/hooks would be a nice improvement.

I already have something working, let me push it to the PR

muescha · 2019-10-16T17:23:58Z

wow great!

urielhdz · 2019-10-16T17:38:03Z

wow great!

I am going to fork the example to test the code and the changes, there are multiple components that need to be changed, I don't know if it is best to open a new PR to make changes easier to review or do you agree on pushing them here? @muescha

muescha · 2019-10-16T17:55:34Z

you are right, i also think it is better to make an additional request (after this is merged) to make review easier.

urielhdz · 2019-10-16T23:25:52Z

Let me know if there is anything missing for this to be merged 😅

The changes were introduced in a separate commit

LekoArts · 2019-10-22T08:01:33Z

Let's wait for @gatsbyjs/learning to comment on that, too!

docs/tutorial/ecommerce-tutorial/index.md

laurieontech

Made a couple minor text changes, but overall this is looking really good. Should be ready for a final review.

Co-Authored-By: LB <laurie@gatsbyjs.com>

urielhdz · 2019-10-29T15:49:37Z

Thank you @laurieontech ! I added your suggestions to the PR!

marcysutton

Thanks for the PR! I left some suggestions of things we could improve, but they're pretty minor. Let us know if you have any questions!

docs/tutorial/ecommerce-tutorial/index.md

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

urielhdz · 2019-10-29T20:45:18Z

Thanks, @marcysutton! I just applied your suggestions, let me know if is there anything else I can do for this to be merged

urielhdz · 2019-11-06T20:14:45Z

Hello! Let me know if is there anything that needs to be done for this to be merged and I'd be happy to work on it!

@marcysutton @laurieontech

Thanks!

gillkyle · 2019-11-14T18:37:30Z

Hey @urielhdz, I know this PR has been up and you want to get it over the finish line (and thanks so much for adding your improvements!), I'm going to do my best to look over this today or tomorrow so we can merge it in. Just want to let you know so you're not in the dark 🙂

gillkyle

Just reviewed and looks good to me! This is a feature I wasn't aware of, when this tutorial was written a couple years ago it used a serverless lambda function to process the payment. Very neat and thanks for patching up this inconsistency 🙂

…torial

@marcysutton

…byjs#18669) * resolves gatsbyjs#14598 Adds a reference guide on how to upgrade Gatsby and its dependencies * Fixed typos and added related content * Fixed additional typos * Fixed additional typos, one with the name of the file, added links for the doc-links.yaml file, escaped < and > characters in markdown thata were causing some errors * Updated title based on @marcysutton suggestions Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Solves suggested changes such as modifying links for relative urls, removing yarn instructions and alignments to Gatsby style guide * Apply additional suggestions Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Little typo with the npm-force-resolutions package name is fixed * Added two additional steps for the tutorial on how to build ecommer sites with Stripe that were required by stripe for the example to work * Added missing screenshot files * Removed intstructions from the old Stripe UI * Removes the now unused images and integrates suggestions from gatsby learning * Changed integration to function when referring to the `redirectToCheckout` function Co-Authored-By: Michael <184316+muescha@users.noreply.github.com> * Rewrote the requirements to use this integration, changed pronouns, fixed typos, changed quotes * Added missing screenshot file * Apply suggestions from code review Co-Authored-By: LB <laurie@gatsbyjs.com> * Apply suggestions from code review Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

Uriel Hernández and others added 12 commits September 21, 2019 00:40

resolves gatsbyjs#14598

bfd37fc

Adds a reference guide on how to upgrade Gatsby and its dependencies

Fixed typos and added related content

f6d376e

Fixed additional typos

5f6066c

Fixed additional typos, one with the name of the file, added links fo…

e90b62b

…r the doc-links.yaml file, escaped < and > characters in markdown thata were causing some errors

Updated title based on @marcysutton suggestions

18bb470

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

Solves suggested changes such as modifying links for relative urls, r…

552e796

…emoving yarn instructions and alignments to Gatsby style guide

Merge branch 'master' of https://github.com/urielhdz/gatsby

2db5d7f

Apply additional suggestions

91e686a

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

Merge branch 'master' of https://github.com/gatsbyjs/gatsby

c0b0231

Little typo with the npm-force-resolutions package name is fixed

98e6281

Merge remote-tracking branch 'upstream/master' into fixing-typo-in-up…

f75c6e7

…grade-guide

Added two additional steps for the tutorial on how to build ecommer s…

76353b9

…ites with Stripe that were required by stripe for the example to work

urielhdz requested a review from a team as a code owner October 14, 2019 22:10

Added missing screenshot files

9d965f5

Removed intstructions from the old Stripe UI

908cb8d

LekoArts added the type: documentation An issue or pull request for improving or updating Gatsby's documentation label Oct 15, 2019

LekoArts previously requested changes Oct 15, 2019

View reviewed changes

docs/tutorial/ecommerce-tutorial/index.md Outdated Show resolved Hide resolved

Removes the now unused images and integrates suggestions from gatsby …

3a6632a

…learning

urielhdz changed the title ~~chore(docs): Adds two key steps on building ecommer sites with Stripe tutorial~~ chore(docs): Adds two key steps on building ecommerce sites with Stripe tutorial Oct 16, 2019

muescha reviewed Oct 16, 2019

View reviewed changes

docs/tutorial/ecommerce-tutorial/index.md Outdated Show resolved Hide resolved

muescha reviewed Oct 16, 2019

View reviewed changes

docs/tutorial/ecommerce-tutorial/index.md Outdated Show resolved Hide resolved

urielhdz and others added 3 commits October 16, 2019 10:41

Changed integration to function when referring to the `redirectToChec…

dedd148

…kout` function Co-Authored-By: Michael <184316+muescha@users.noreply.github.com>

Rewrote the requirements to use this integration, changed pronouns, f…

130c827

…ixed typos, changed quotes

Added missing screenshot file

ab10eeb

muescha requested review from marcysutton and a team October 16, 2019 23:35

laurieontech reviewed Oct 29, 2019

View reviewed changes

docs/tutorial/ecommerce-tutorial/index.md Outdated Show resolved Hide resolved

laurieontech reviewed Oct 29, 2019

View reviewed changes

docs/tutorial/ecommerce-tutorial/index.md Outdated Show resolved Hide resolved

laurieontech suggested changes Oct 29, 2019

View reviewed changes

Apply suggestions from code review

24c4d15

Co-Authored-By: LB <laurie@gatsbyjs.com>

marcysutton suggested changes Oct 29, 2019

View reviewed changes

docs/tutorial/ecommerce-tutorial/index.md Outdated Show resolved Hide resolved

docs/tutorial/ecommerce-tutorial/index.md Outdated Show resolved Hide resolved

docs/tutorial/ecommerce-tutorial/index.md Outdated Show resolved Hide resolved

Apply suggestions from code review

57cb601

Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>

marcysutton added the Hacktoberfest label Nov 6, 2019

Merge branch 'master' into UpdateEcommerceTutorial

ac57380

gillkyle self-assigned this Nov 14, 2019

gillkyle approved these changes Nov 14, 2019

View reviewed changes

gillkyle added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Nov 14, 2019

Merge remote-tracking branch 'upstream/master' into UpdateEcommerceTu…

04ebfe8

…torial

gillkyle merged commit 58a627e into gatsbyjs:master Nov 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(docs): Adds two key steps on building ecommerce sites with Stripe tutorial #18669

chore(docs): Adds two key steps on building ecommerce sites with Stripe tutorial #18669

urielhdz commented Oct 14, 2019 •

edited

Loading

urielhdz commented Oct 15, 2019

urielhdz commented Oct 15, 2019

LekoArts left a comment

urielhdz commented Oct 15, 2019

urielhdz commented Oct 16, 2019

muescha commented Oct 16, 2019

urielhdz commented Oct 16, 2019

muescha commented Oct 16, 2019

urielhdz commented Oct 16, 2019

muescha commented Oct 16, 2019 •

edited

Loading

urielhdz commented Oct 16, 2019

LekoArts commented Oct 22, 2019

laurieontech left a comment

urielhdz commented Oct 29, 2019

marcysutton left a comment

urielhdz commented Oct 29, 2019

urielhdz commented Nov 6, 2019

gillkyle commented Nov 14, 2019 •

edited

Loading

gillkyle left a comment

chore(docs): Adds two key steps on building ecommerce sites with Stripe tutorial #18669

chore(docs): Adds two key steps on building ecommerce sites with Stripe tutorial #18669

Conversation

urielhdz commented Oct 14, 2019 • edited Loading

Description

urielhdz commented Oct 15, 2019

urielhdz commented Oct 15, 2019

LekoArts left a comment

Choose a reason for hiding this comment

urielhdz commented Oct 15, 2019

urielhdz commented Oct 16, 2019

muescha commented Oct 16, 2019

urielhdz commented Oct 16, 2019

muescha commented Oct 16, 2019

urielhdz commented Oct 16, 2019

muescha commented Oct 16, 2019 • edited Loading

urielhdz commented Oct 16, 2019

LekoArts commented Oct 22, 2019

laurieontech left a comment

Choose a reason for hiding this comment

urielhdz commented Oct 29, 2019

marcysutton left a comment

Choose a reason for hiding this comment

urielhdz commented Oct 29, 2019

urielhdz commented Nov 6, 2019

gillkyle commented Nov 14, 2019 • edited Loading

gillkyle left a comment

Choose a reason for hiding this comment

urielhdz commented Oct 14, 2019 •

edited

Loading

muescha commented Oct 16, 2019 •

edited

Loading

gillkyle commented Nov 14, 2019 •

edited

Loading