From 0209628ea6a61f557fcd08261295b1ce44e4fe17 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 19 Jan 2020 00:16:47 +0900 Subject: [PATCH 01/45] first commit --- docs/tutorial/ecommerce-tutorial/index.md | 29 +++++++++++++++++------ 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 57c648faf..81271893a 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -2,11 +2,11 @@ title: "Gatsby E-Commerce Tutorial" --- -# Table of Contents +# 目次 -- [Table of Contents](#table-of-contents) +- [目次](#目次) - [Why use Gatsby for an e-commerce site?](#why-use-gatsby-for-an-e-commerce-site) -- [Prerequisites](#prerequisites) +- [前提条件](#前提条件) - [How does Gatsby work with Stripe?](#how-does-gatsby-work-with-stripe) - [Setting up a Gatsby site](#setting-up-a-gatsby-site) - [Installing the StripeJS plugin](#installing-the-stripejs-plugin) @@ -16,31 +16,46 @@ title: "Gatsby E-Commerce Tutorial" - [Examples](#examples) - [Easy: One Button](#easy-one-button) - [Advanced: Import SKUs via source plugin](#advanced-import-skus-via-source-plugin) -- [Testing Payments](#testing-payments) - -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. +- [支払いテスト](#支払いテスト) +この発展的ななチュートリアルでは, Gatsbyを用いて支払いができる基本的なeコマースサイトのUIを構築を学びます。[Stripe](https://stripe.com)は支払い処理のバックエンドとして用います。 +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. ## Why use Gatsby for an e-commerce site? +Gatsbyをe-コマースのサイトに使うメリットは以下の通りです: Benefits of using Gatsby for e-commerce sites include the following: +- 静的サイト固有のセキュリティ - Security inherent in static sites + +- ページをReactから静的ファイルに変換する際の超高速パフォーマンス - Blazing fast performance when your pages are converted from React into static files + +- 簡単にホストできる - Easy to host +こちらからホストされたデモを見れます: https://gatsby-ecommerce-stripe.netlify.com/ You can see the working demo hosted here: https://gatsby-ecommerce-stripe.netlify.com/ -## Prerequisites +## 前提条件 +- これはより高度なチュートリアルなので、以前にGatsbyでサイトを構築したことがある場合は、このチュートリアルの時間が短縮できる可能性があります。([基本チュートリアルはこちら](/tutorial/)) - Since this is a more advanced tutorial, building a site with Gatsby before will likely make this tutorial less time-consuming ([see the main tutorial here](/tutorial/)) +- Stripe アカウント: [アカウント登録はこちら](https://dashboard.stripe.com/register) - Stripe account: [register for an account here](https://dashboard.stripe.com/register) +### StripeでGatsbyはどのように動作するのか ### How does Gatsby work with Stripe? +Stripeは顧客から情報を安全に収集して処理できる支払い処理サービスです。 +Stripeを試すにはこちらにアクセスしてください。[Stripeクイックスタートガイド](https://stripe.com/docs/payments/checkout#tryout) + Stripe is a payment processing service that allows you to securely collect and process payment information from your customers. To try out Stripe for yourself, go to [Stripe’s Quick Start Guide](https://stripe.com/docs/payments/checkout#tryout). +Stripeの代わりとしては、SquareやBraintreeなどがあります。これらの仕組みはStripeと非常に似ています。 There are alternatives to Stripe, like Square and Braintree, and their setup is very similar to Stripe. +Stripe Stripe offers a [hosted checkout](https://stripe.com/docs/payments/checkout) that doesn't require any backend component. You can configure products, SKUs, and subscription plans in the [Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure). If you're selling a single product or subscription (like an eBook) you can hardcode the product's SKU ID in your Gatsby site. If you're selling multiple products, you can use the [Stripe source plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/) to retrieve all SKUs at build time. If you want your Gatsby site to automatically update, you can use the Stripe webhook event to [trigger a redeploy](https://www.netlify.com/docs/webhooks/) when a new product or SKU is added. # Setting up a Gatsby site From 5bfcf4cf6c20fb2180fd866715027cbf901eac1c Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Wed, 22 Jan 2020 19:09:34 +0900 Subject: [PATCH 02/45] =?UTF-8?q?Stripe=E3=81=A8Gatsby=E3=81=AF=E3=81=A9?= =?UTF-8?q?=E3=81=AE=E3=82=88=E3=81=86=E3=81=AB=E9=80=A3=E6=90=BA=E3=81=95?= =?UTF-8?q?=E3=81=9B=E3=82=8B=E3=81=AE=E3=81=8B=E3=81=BE=E3=81=A7=E7=BF=BB?= =?UTF-8?q?=E8=A8=B3=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 81271893a..b42e4803a 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -1,11 +1,11 @@ --- -title: "Gatsby E-Commerce Tutorial" +title: "Gatsby Eコマースチュートリアル" --- # 目次 - [目次](#目次) -- [Why use Gatsby for an e-commerce site?](#why-use-gatsby-for-an-e-commerce-site) +- [なぜEコマースサイトでGatsbyを使うのか](#なぜEコマースサイトでGatsbyを使うのか) - [前提条件](#前提条件) - [How does Gatsby work with Stripe?](#how-does-gatsby-work-with-stripe) - [Setting up a Gatsby site](#setting-up-a-gatsby-site) @@ -20,6 +20,7 @@ title: "Gatsby E-Commerce Tutorial" この発展的ななチュートリアルでは, Gatsbyを用いて支払いができる基本的なeコマースサイトのUIを構築を学びます。[Stripe](https://stripe.com)は支払い処理のバックエンドとして用います。 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. +## なぜEコマースサイトでGatsbyを使うのか ## Why use Gatsby for an e-commerce site? Gatsbyをe-コマースのサイトに使うメリットは以下の通りです: @@ -44,7 +45,7 @@ You can see the working demo hosted here: https://gatsby-ecommerce-stripe.netlif - Stripe アカウント: [アカウント登録はこちら](https://dashboard.stripe.com/register) - Stripe account: [register for an account here](https://dashboard.stripe.com/register) -### StripeでGatsbyはどのように動作するのか +### StripeとGatsbyはどのように連携させるのか ### How does Gatsby work with Stripe? Stripeは顧客から情報を安全に収集して処理できる支払い処理サービスです。 @@ -55,10 +56,16 @@ Stripe is a payment processing service that allows you to securely collect and p Stripeの代わりとしては、SquareやBraintreeなどがあります。これらの仕組みはStripeと非常に似ています。 There are alternatives to Stripe, like Square and Braintree, and their setup is very similar to Stripe. -Stripe +Stripeはいかなるバックエンドコンポーネントも必要としない[hosted checkout](https://stripe.com/docs/payments/checkout)を提供します。 +製品やSKU、定期利用プランの設定を[Stripe ダッシュボード](https://stripe.com/docs/payments/checkout#configure)で行えます。 +(e-Bookのような)単一の商品か定期利用を販売している場合、Gatsbyのサイト内で商品のSKU IDをコード化することができます。 +複数の商品を販売している場合、[Stripe ソースプラグイン](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を利用して、ビルド時に全てのSKUを取得できます。 +Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベントを利用して新しい商品やSKUが追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/webhooks/)とすることができます。 Stripe offers a [hosted checkout](https://stripe.com/docs/payments/checkout) that doesn't require any backend component. You can configure products, SKUs, and subscription plans in the [Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure). If you're selling a single product or subscription (like an eBook) you can hardcode the product's SKU ID in your Gatsby site. If you're selling multiple products, you can use the [Stripe source plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/) to retrieve all SKUs at build time. If you want your Gatsby site to automatically update, you can use the Stripe webhook event to [trigger a redeploy](https://www.netlify.com/docs/webhooks/) when a new product or SKU is added. # Setting up a Gatsby site +# Gatsbyサイトの設定 + Create a new Gatsby project by running the `gatsby new` command in the terminal and change directories into the new project you just started: From ebf7013572b78d7eb11ed45a083d7f7765bcbef2 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 26 Jan 2020 10:42:18 +0900 Subject: [PATCH 03/45] =?UTF-8?q?Setting=20up=20a=20Gatsby=20site=E3=81=BE?= =?UTF-8?q?=E3=81=A7=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 35 +++++++---------------- 1 file changed, 10 insertions(+), 25 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index b42e4803a..7b162eddd 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -18,64 +18,49 @@ title: "Gatsby Eコマースチュートリアル" - [Advanced: Import SKUs via source plugin](#advanced-import-skus-via-source-plugin) - [支払いテスト](#支払いテスト) -この発展的ななチュートリアルでは, Gatsbyを用いて支払いができる基本的なeコマースサイトのUIを構築を学びます。[Stripe](https://stripe.com)は支払い処理のバックエンドとして用います。 -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. +この発展的ななチュートリアルでは, Gatsbyを用いて支払いができる基本的なeコマースサイトのUIを構築を学ぶことができます。[Stripe](https://stripe.com)は支払い処理のバックエンドとして用います。 + ## なぜEコマースサイトでGatsbyを使うのか -## Why use Gatsby for an e-commerce site? Gatsbyをe-コマースのサイトに使うメリットは以下の通りです: -Benefits of using Gatsby for e-commerce sites include the following: - 静的サイト固有のセキュリティ -- Security inherent in static sites - - ページをReactから静的ファイルに変換する際の超高速パフォーマンス -- Blazing fast performance when your pages are converted from React into static files - - 簡単にホストできる -- Easy to host こちらからホストされたデモを見れます: https://gatsby-ecommerce-stripe.netlify.com/ -You can see the working demo hosted here: https://gatsby-ecommerce-stripe.netlify.com/ ## 前提条件 -- これはより高度なチュートリアルなので、以前にGatsbyでサイトを構築したことがある場合は、このチュートリアルの時間が短縮できる可能性があります。([基本チュートリアルはこちら](/tutorial/)) -- Since this is a more advanced tutorial, building a site with Gatsby before will likely make this tutorial less time-consuming ([see the main tutorial here](/tutorial/)) +- これはより高度なチュートリアルなので、以前にGatsbyでサイトを構築したことがある場合は、このチュートリアルの時間が短縮できそうです。([基本チュートリアルはこちら](/tutorial/)) - Stripe アカウント: [アカウント登録はこちら](https://dashboard.stripe.com/register) -- Stripe account: [register for an account here](https://dashboard.stripe.com/register) ### StripeとGatsbyはどのように連携させるのか -### How does Gatsby work with Stripe? Stripeは顧客から情報を安全に収集して処理できる支払い処理サービスです。 Stripeを試すにはこちらにアクセスしてください。[Stripeクイックスタートガイド](https://stripe.com/docs/payments/checkout#tryout) -Stripe is a payment processing service that allows you to securely collect and process payment information from your customers. To try out Stripe for yourself, go to [Stripe’s Quick Start Guide](https://stripe.com/docs/payments/checkout#tryout). - Stripeの代わりとしては、SquareやBraintreeなどがあります。これらの仕組みはStripeと非常に似ています。 -There are alternatives to Stripe, like Square and Braintree, and their setup is very similar to Stripe. -Stripeはいかなるバックエンドコンポーネントも必要としない[hosted checkout](https://stripe.com/docs/payments/checkout)を提供します。 -製品やSKU、定期利用プランの設定を[Stripe ダッシュボード](https://stripe.com/docs/payments/checkout#configure)で行えます。 -(e-Bookのような)単一の商品か定期利用を販売している場合、Gatsbyのサイト内で商品のSKU IDをコード化することができます。 +Stripeはバックエンドコンポーネントを必要としない[hosted checkout](https://stripe.com/docs/payments/checkout)を提供します。 +製品やSKU、サブスクリプションプランの設定を[Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure)で行うことができます。 +単一の製品やサブスクリプション(電子書籍)を販売している場合、Gatsbyサイトで商品のSKU IDをハードコーディングできます。 複数の商品を販売している場合、[Stripe ソースプラグイン](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を利用して、ビルド時に全てのSKUを取得できます。 -Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベントを利用して新しい商品やSKUが追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/webhooks/)とすることができます。 -Stripe offers a [hosted checkout](https://stripe.com/docs/payments/checkout) that doesn't require any backend component. You can configure products, SKUs, and subscription plans in the [Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure). If you're selling a single product or subscription (like an eBook) you can hardcode the product's SKU ID in your Gatsby site. If you're selling multiple products, you can use the [Stripe source plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/) to retrieve all SKUs at build time. If you want your Gatsby site to automatically update, you can use the Stripe webhook event to [trigger a redeploy](https://www.netlify.com/docs/webhooks/) when a new product or SKU is added. +Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベントを利用して新しい商品やSKUが追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/ -# Setting up a Gatsby site # Gatsbyサイトの設定 - -Create a new Gatsby project by running the `gatsby new` command in the terminal and change directories into the new project you just started: +ターミナルで`gatsby new`を実行して新しいGatsbyのプロジェクトを作成し、ディレクトリを先程作成した新しいプロジェクトに変更します ```shell gatsby new ecommerce-gatsby-tutorial cd ecommerce-gatsby-tutorial ``` +StripeJSプラグインのインストール ## Installing the StripeJS plugin +プラグインでデフォルトスタータの機能性を拡張できます You can extend the functionality of this default starter with plugins. One such plugin is `gatsby-plugin-stripe`, which you’ll install in this project: ```shell From f8f12d2f4d722258b969d994cf6f57ae3976cdf4 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 26 Jan 2020 10:52:19 +0900 Subject: [PATCH 04/45] =?UTF-8?q?Installing=20the=20StripeJS=20plugin?= =?UTF-8?q?=E3=82=92=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 7b162eddd..2a599b363 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -50,7 +50,7 @@ Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベ # Gatsbyサイトの設定 -ターミナルで`gatsby new`を実行して新しいGatsbyのプロジェクトを作成し、ディレクトリを先程作成した新しいプロジェクトに変更します +ターミナルで`gatsby new`を実行して新しいGatsbyのプロジェクトを作成し、ディレクトリを先程作成した新しいプロジェクトに変更します。 ```shell gatsby new ecommerce-gatsby-tutorial @@ -60,8 +60,7 @@ cd ecommerce-gatsby-tutorial StripeJSプラグインのインストール ## Installing the StripeJS plugin -プラグインでデフォルトスタータの機能性を拡張できます -You can extend the functionality of this default starter with plugins. One such plugin is `gatsby-plugin-stripe`, which you’ll install in this project: +プラグインを利用してこのデフォルトのスタータの機能を拡張できます。そのようなプラグインの1つが `gatsby-plugin-stripe`で、このプロジェクトにインストールします。 ```shell npm install gatsby-plugin-stripe From 5a2e48bc600eb54a0beef715d0f1cf12bf53be37 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 26 Jan 2020 11:21:14 +0900 Subject: [PATCH 05/45] =?UTF-8?q?Installing=20the=20StripeJS=20plugin?= =?UTF-8?q?=E3=81=AE=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 2a599b363..ee6d8efdd 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -57,16 +57,14 @@ gatsby new ecommerce-gatsby-tutorial cd ecommerce-gatsby-tutorial ``` -StripeJSプラグインのインストール -## Installing the StripeJS plugin +## StripeJSプラグインのインストール プラグインを利用してこのデフォルトのスタータの機能を拡張できます。そのようなプラグインの1つが `gatsby-plugin-stripe`で、このプロジェクトにインストールします。 ```shell npm install gatsby-plugin-stripe ``` - -Open the root site directory in a text editor and navigate to `gatsby-config.js` and add the StripeJS plugin to `gatsby-config.js` in the plugins section. Your `gatsby-config.js` should look like the following code example: +テキストエディタでルートサイトディレクトリを開き、`gatsby-config.js`に移動します。そして、`gatsby-config.js`のpluginsのところにStripeJSプラグインを追加します。`gatsby-config.js`は次のコード例のようになります。 ```js:title=gatsby-config.js module.exports = { From 0338eb93ddea2497a0a7eb02b237309abed5994c Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 26 Jan 2020 12:02:38 +0900 Subject: [PATCH 06/45] =?UTF-8?q?See=20your=20site=20hot=20reload=20in=20t?= =?UTF-8?q?he=20browser!=E3=81=AE=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index ee6d8efdd..a814c8ea5 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -75,11 +75,12 @@ module.exports = { } ``` -### See your site hot reload in the browser! +### ブラウザでホットリロードされることを確認しよう -Run `npm run develop` in the terminal, which starts a development server and reloads changes you make to your site so you can preview them in the browser. Open up your browser to [localhost:8000](http://localhost:8000/) and you should see a default homepage. +ターミナルで`npm run develop`を実行しましす。これにより、開発サーバが起動し、サイトに加えた変更がリロードされるので、ブラウザで変更がプレビューできます。 +ブラウザを[localhost:8000](http://localhost:8000/)で開くと、デフォルトのホームページが表示されます。 -> **NOTE**: If you have already started your Gatsby development server using `npm run develop`, you will need to restart the server by pressing CTRL + C in the terminal where the command was run and running `npm run develop` again to see changes in your `gatsby-config.js` reflected on [localhost:8000](http://localhost:8000/) +> **NOTE**:もし、既にGatsbyの開発サーバを`npm run develop`で起動していた場合、コマンドを実行したターミナルで CTRL + C を押してサーバを再起動し、`npm run develop`コマンドを再度実行することで[localhost:8000](http://localhost:8000/)に反映された`gatsby-config.js`の変更を確認するできます。 ### How does the StripeJS plugin work? From fa316e84006b3b4db5d5fa2d05a5a248930cd7d5 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Wed, 29 Jan 2020 23:26:45 +0900 Subject: [PATCH 07/45] =?UTF-8?q?How=20does=20the=20StripeJS=20plugin=20wo?= =?UTF-8?q?rk=3F=E3=81=AE=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 42 ++++++++++++++++++----- 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index a814c8ea5..ccefc1fe0 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -69,10 +69,37 @@ npm install gatsby-plugin-stripe ```js:title=gatsby-config.js module.exports = { siteMetadata: { - title: "Gatsby E-Commerce Starter", + title: `Gatsby E-Commerce Starter`, + description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, + author: `@gatsbyjs`, }, - plugins: ["gatsby-plugin-react-helmet", "gatsby-plugin-stripe"], + plugins: [ + `gatsby-plugin-react-helmet`, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `images`, + path: `${__dirname}/src/images`, + }, + }, + `gatsby-transformer-sharp`, + `gatsby-plugin-sharp`, + { + resolve: `gatsby-plugin-manifest`, + options: { + name: `gatsby-starter-default`, + short_name: `starter`, + start_url: `/`, + background_color: `#663399`, + theme_color: `#663399`, + display: `minimal-ui`, + icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. + }, + }, + `gatsby-plugin-stripe` + ], } + ``` ### ブラウザでホットリロードされることを確認しよう @@ -82,17 +109,14 @@ module.exports = { > **NOTE**:もし、既にGatsbyの開発サーバを`npm run develop`で起動していた場合、コマンドを実行したターミナルで CTRL + C を押してサーバを再起動し、`npm run develop`コマンドを再度実行することで[localhost:8000](http://localhost:8000/)に反映された`gatsby-config.js`の変更を確認するできます。 -### 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. The Gatsby plugin, `gatsby-plugin-stripe`, will add this snippet: +### StripeJS pluginはどのように動作するか +StripeはJavaScriptライブラリを提供します。これにより、Stripeがホストする支払いページに顧客を安全にリダイレクトできます。Gatsbyプラグインの`gatsby-plugin-stripe`は全てのページで``タグの末尾に次のスニペットを追加します： ```html ``` - -to the end of the `` tag across all of your pages. This helps facilitate Stripe's [fraud detection](https://stripe.com/docs/stripe-js/reference#including-stripejs). - -If you want to further customise the checkout process or pull Stripe data into your site, check out [Gatsby's plugin library for more Stripe plugins](https://www.gatsbyjs.org/plugins/?=stripe). +これにより、Stripeの不正検出[[fraud detection](https://stripe.com/docs/stripe-js/reference#including-stripejs)]が容易になります +もし支払い処理をさらにカスタマイズしたりSrtipeのデータをサイトに引いてくる場合は、[GatsbyのプラグインライブラリでStripeプラグインを確認](https://www.gatsbyjs.org/plugins/?=stripe)してください。 ### Getting your Stripe test keys From ce323d8d22ad10940d99e70933b9e0c8ce88f9bc Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Thu, 30 Jan 2020 08:16:33 +0900 Subject: [PATCH 08/45] =?UTF-8?q?Getting=20your=20Stripe=20test=20keys?= =?UTF-8?q?=E3=81=AE=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index ccefc1fe0..f6e51e98d 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -118,18 +118,19 @@ StripeはJavaScriptライブラリを提供します。これにより、Stripe これにより、Stripeの不正検出[[fraud detection](https://stripe.com/docs/stripe-js/reference#including-stripejs)]が容易になります もし支払い処理をさらにカスタマイズしたりSrtipeのデータをサイトに引いてくる場合は、[GatsbyのプラグインライブラリでStripeプラグインを確認](https://www.gatsbyjs.org/plugins/?=stripe)してください。 -### Getting your Stripe test keys +### Stripeのテストキーを取得する -View your API credentials by logging into your Stripe account, and then going to Developers > API Keys. +StripeアカウントにログインしてAPI資格情報を表示し、[開発者] > [APIキー]に移動します。 ![Stripe public test key location in Stripe account](stripe-public-test-key.png) +テストモードと本番モードの2つのキーがあります: You have 2 keys in both test mode and production mode: -- a publishable key -- a secret key +- 公開可能キー +- シークレットキー -While testing, you must use the key(s) that include _test_. For production code, you will need to use the live keys. As the names imply, your publishable key may be included in code that you share publicly (for example, on the frontend, and in GitHub), whereas your secret key should not be shared with anyone or committed to any public repo. It’s important to restrict access to this secret key because anyone who has it could potentially read or send requests from your Stripe account and see information about charges or purchases or even refund customers. +テスト中は _test_.という文字が含まれたキーを使い、本番のコードではライブキーを使う必要があります。名前が示すように、公開可能キーは公開するコード(フロントエンドやGithubなど)に含まれているな愛がありますが、シークレットキーは誰とも共有したり、公開レポジトリにコミットしたりしないでください。このシークレットキーへのアクセスを制限することは重要です。このシークレットキーを持っている人は誰でもStripeアカウントからリクエストを読み取ったり送信したり、請求や購入に関する情報を見たり、顧客に送信したりする可能性があるからです。 ### Enabling the "Checkout client-only integration" for your Stripe account From c600a0389332c7a6af0a501f0cc05d81e5f6ed62 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Fri, 31 Jan 2020 00:09:35 +0900 Subject: [PATCH 09/45] =?UTF-8?q?How=20does=20the=20StripeJS=20plugin=20wo?= =?UTF-8?q?rk=3F=20=E3=81=AE=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index f6e51e98d..94ff0b277 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -132,17 +132,17 @@ You have 2 keys in both test mode and production mode: テスト中は _test_.という文字が含まれたキーを使い、本番のコードではライブキーを使う必要があります。名前が示すように、公開可能キーは公開するコード(フロントエンドやGithubなど)に含まれているな愛がありますが、シークレットキーは誰とも共有したり、公開レポジトリにコミットしたりしないでください。このシークレットキーへのアクセスを制限することは重要です。このシークレットキーを持っている人は誰でもStripeアカウントからリクエストを読み取ったり送信したり、請求や購入に関する情報を見たり、顧客に送信したりする可能性があるからです。 -### Enabling the "Checkout client-only integration" for your Stripe account +### Stripeアカウントの"Checkout クライアント専用組み込み"を有効にします -Through this tutorial you will be using the "Checkout client-only integration" from Stripe. To use this integration you need to activate it on the corresponding [Checkout settings](https://dashboard.stripe.com/account/checkout/settings) from your Stripe Dashboard. +このチュートリアルではStripeの"Checkout クライアント専用組み込み"を利用します。この組み込みを利用するにはStipeダッシュボードの対応する[チェックアウトの設定](https://dashboard.stripe.com/account/checkout/settings)でアクティブにする必要があります。 ![Stripe control to enable the Checkout client-side only integration highlighted](stripe-checkout-clientside-functionality.png) -> 💡 This change will also modify the interface that Stripe provides to administer your products: keep this in mind in case you have previously used this tool. If you have never used the product administrator, you don't need to worry. +> 💡 この変更により、製品を管理するためにStripeが提供するインターフェースも変更されます。以前にこのツールを利用したことがある場合は、このことに留意してください。今までに製品管理を利用したことがない場合、心配する必要はありません。 -Additionally, you need to set a name for your Stripe account on your [Account settings](https://dashboard.stripe.com/account) to use this integration. +さらに、この組み込みを利用するには、[アカウント設定](https://dashboard.stripe.com/account)でStripeアカウントの名前を設定する必要があります。 -To learn more about this integration you may use the [Stripe docs](https://stripe.com/docs/payments/checkout#configure). +この組み込みの詳細については[Stripe docs](https://stripe.com/docs/payments/checkout#configure)を利用してみてください。 ## Examples From 9564a43e4319e3d6645864ffc92cba9de93a2c3e Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Fri, 31 Jan 2020 23:58:07 +0900 Subject: [PATCH 10/45] =?UTF-8?q?Importing=20the=20checkout=20component=20?= =?UTF-8?q?into=20the=20homepage=E3=81=BE=E3=81=A7=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 57 ++++++++++------------- 1 file changed, 24 insertions(+), 33 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 94ff0b277..8856b563c 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -46,7 +46,7 @@ Stripeはバックエンドコンポーネントを必要としない[hosted che 製品やSKU、サブスクリプションプランの設定を[Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure)で行うことができます。 単一の製品やサブスクリプション(電子書籍)を販売している場合、Gatsbyサイトで商品のSKU IDをハードコーディングできます。 複数の商品を販売している場合、[Stripe ソースプラグイン](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を利用して、ビルド時に全てのSKUを取得できます。 -Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベントを利用して新しい商品やSKUが追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/ +Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベントを利用して新しい商品やSKUが追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/)できます。 # Gatsbyサイトの設定 @@ -144,23 +144,19 @@ You have 2 keys in both test mode and production mode: この組み込みの詳細については[Stripe docs](https://stripe.com/docs/payments/checkout#configure)を利用してみてください。 -## Examples +## 例 +これらの例の実装は[Github](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial)で見ることができます。 -You can find an implementation of these examples [on GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial). +### 簡単: ボタン1つ +例えば電子書籍などのシンプルな製品を売っている場合、Stripeの支払いページへのリダイレクトを実行するボタンを1つ作成できます。 -### Easy: One Button +#### 商品とSKUの作成 -If you're selling a simple product, like an eBook for example, you can create a single button that will perform a redirect to the Stripe Checkout page: +商品を販売するためにはまず、[Stripe ダッシュボード](https://dashboard.stripe.com/products)または[Stripe API](https://stripe.com/docs/api/products/create)を利用して、Stripeで商品を作成する必要があります。これは、Stripeがフロントエンドからのリクエストが正当であることを検証し、選択された製品/SKUに適切な金額を請求するために必要です。Stripeでは、Stripeの支払いで使用する全てのSKUに名前を付ける必要があります。全てのSKUに必ず1つ追加してください。 -#### Create a product and SKU +#### StripeJSをロードして支払いコンポーネントを作成する -To sell your products, first you need to create them on Stripe using the [Stripe Dashboard](https://dashboard.stripe.com/products) or the [Stripe API](https://stripe.com/docs/api/products/create). This is required for Stripe to validate that the request coming from the frontend is legitimate and to charge the right amount for the selected product/SKU. Stripe requires every SKU used with Stripe Checkout to have a name: be sure to add one to all of your SKUs. - -You will need to create both test and live product SKUs in the Stripe Dashboard. Make sure you toggle to "Viewing test data" and then create your products for local development. - -#### Create a checkout component that loads StripeJS and redirects to the checkout - -Create a new file at `src/components/checkout.js`. Your `checkout.js` file should look like this: +`src/components/checkout.js`に新しいファイルを作成します。作成した`checkout.js`は以下のようになります: ```jsx:title=src/components/checkout.js import React from "react" @@ -178,8 +174,8 @@ const buttonStyles = { } const Checkout = class extends React.Component { - // Initialise Stripe.js with your publishable key. - // You can find your key in the Dashboard: + // Stripe.jsを公開可能キーで初期化します + // こちらのダッシュボードからキーを確認できます。 // https://dashboard.stripe.com/account/apikeys componentDidMount() { this.stripe = window.Stripe("pk_test_jG9s3XMdSjZF9Kdm5g59zlYd") @@ -212,18 +208,16 @@ const Checkout = class extends React.Component { export default Checkout ``` +#### あなたは何をしましたか？ -#### What did you just do? - -You imported React, added a button with some styles, and introduced some React functions. The `componentDidMount()` and `redirectToCheckout()` functions are most important for the Stripe functionality. The `componentDidMount()` function is a React lifecycle method that launches when the component is first mounted to the DOM, making it a good place to initialise the Stripe.js client. It looks like this: +Reactをインポートし、いくつかのstyleのボタンを追加し、React関数を導入しました。`componentDidMount()`や、`redirectToCheckout()`といった関数はStripeの機能の中で最も重要です。`componentDidMount()`関数はコンポーネントが最初にDOMにマウントされた時に起動するReactのライフサイクルメソッドであり、Stripe.jsクライアントを初期化するのに適した場所です。コードは以下のようになります。 ```jsx:title=src/components/checkout.js componentDidMount() { this.stripe = window.Stripe('pk_test_jG9s3XMdSjZF9Kdm5g59zlYd') } ``` - -This identifies you with the Stripe platform, validates the checkout request against your products and security settings, and processes the payment on your Stripe account. +これによってStripeプラットフォームが識別され、製品とセキュリティの設定に対して支払いリクエストが検証され、Stripeアカウントの支払いが処理されます。 ```jsx:title=src/components/checkout.js async redirectToCheckout(event) { @@ -240,7 +234,7 @@ This identifies you with the Stripe platform, validates the checkout request aga } ``` -The `redirectToCheckout()` function validates your checkout request and either redirects to the Stripe hosted checkout page or resolves with an error object. Make sure to replace `successUrl` and `cancelUrl` with the appropriate URLs for your application. +`redirectToCheckout()`関数は支払いのリクエストを検証し、Stripeがホストする支払いページにリダイレクトするか、エラーオブジェクトで解決します。`successUrl`と`cancelUrl`を適切なURLに置き換えてください。 ```jsx:title=src/components/checkout.js render() { @@ -255,11 +249,10 @@ The `redirectToCheckout()` function validates your checkout request and either r } ``` -The `render()` function applies your styles to the button and binds the `redirectToCheckout()` function to the button's onclick event. - -#### Importing the checkout component into the homepage +`render()`関数はstyleをボタンに適用し、`redirectToCheckout()`関数をボタンのonclickイベントにバインドします。 -Now go to your `src/pages/index.js` file. This is your homepage that shows at the root URL. Import your new checkout component in the file underneath the other imports and add your `` component within the `` element. Your `index.js` file should now look like similar to this: +#### 支払いコンポーネントをホームページにインポートする +`src/pages/index.js`ファイルに移動しましょう。ここがルートURLに表示されるホームページです。他のimportの下にあるファイルに新しい支払いコンポーネントをimportし、``要素内に``コンポーネントを追加します。`index.js`ファイルは以下のようになります。 ```jsx:title=src/pages/index.js import React from "react" @@ -288,21 +281,19 @@ const IndexPage = () => ( export default IndexPage ``` -If you go back to [localhost:8000](http://localhost:8000/) in your browser and you have `npm run develop` running, you should now see a big, enticing "BUY MY BOOK" button. C'mon and give it a click! +ブラウザで[localhost:8000](http://localhost:8000/)に戻り、`npm run develop`を実行している場合は、大きくて魅力的な"BUY MY BOOK"ボタンが表示されます。さあ、クリックしてみましょう！！ -### Advanced: Import SKUs via source plugin +### 発展: ソースプラグインを通じてSKUをインポートする -Instead of hardcoding the SKU IDs, you can use the [gatsby-source-stripe plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/) to retrieve your SKUs at build time. +SKUのIDをハードコーディングする代わりに、ビルド時に[gatsby-source-stripe plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を使用してSKUを取得できます。 -#### Add the Stripe source plugin - -Add the [gatsby-source-stripe plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/) which you can use to pull in the SKUs from your Stripe account. +#### Stripeソースプラグインの追加 +StripeアカウントからSKUを取得するために使える[gatsby-source-stripe plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)プラグインを追加しましょう。 ```shell npm install gatsby-source-stripe ``` - -Now you can add the plugin configuration in your `gatsby-config` file: +これで、`gatsby-config`ファイルにプラグイン設定を追加できます。 ```js:title=gatsby-config.js module.exports = { From 38e9a819b9e777011bed1f501721cdff6a8b844e Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sat, 1 Feb 2020 22:39:40 +0900 Subject: [PATCH 11/45] =?UTF-8?q?Add=20the=20Stripe=20source=20plugin?= =?UTF-8?q?=E3=81=BE=E3=81=A7=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 8856b563c..ce249cd6f 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -314,8 +314,7 @@ module.exports = { ], } ``` - -To retrieve your SKUs from your Stripe account you will need to provide your secret API key. This key needs to be kept secret and must never be shared on the frontend or on GitHub. Therefore you need to set an environment variable to store the secret key. You can read more about the usage of env variables in the [Gatsby docs](/docs/environment-variables/). +StripeアカウントからSKUを取得するにはシークレットAPIキーを提供する必要があります。シークレットキーは秘密にしておく必要があるので、フロントエンドやGithubで絶対に共有しないでください。したがって、環境変数を設定して秘密鍵を保存する必要があります。[Gatsby docs](/docs/environment-variables/)で環境変数の使用法について詳しく読むことができます。 In the root directory of your project add a `.env.development` file: From 46f42c8831f2f82038902d95600f2a39e4716e97 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 2 Feb 2020 14:49:33 +0900 Subject: [PATCH 12/45] =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E5=AE=8C=E4=BA=86?= =?UTF-8?q?=EF=BC=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 43 +++++++++-------------- 1 file changed, 17 insertions(+), 26 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index ce249cd6f..48b741768 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -315,23 +315,21 @@ module.exports = { } ``` StripeアカウントからSKUを取得するにはシークレットAPIキーを提供する必要があります。シークレットキーは秘密にしておく必要があるので、フロントエンドやGithubで絶対に共有しないでください。したがって、環境変数を設定して秘密鍵を保存する必要があります。[Gatsby docs](/docs/environment-variables/)で環境変数の使用法について詳しく読むことができます。 - -In the root directory of your project add a `.env.development` file: +プロジェクトのルートディレクトリに`.env.development`ファイルを追加してください: ```text:title=.env.development # Stripe secret API key STRIPE_SECRET_KEY=sk_test_xxx ``` -To use the defined env variable you need to require it in your `gatsby-config.js` or `gatsby-node.js` like this: +定義された環境変数を利用するには`gatsby-config.js`または`gatsby-node.js`で以下のように環境変数を要求する必要があります。 ```js:title=gatsby-config.js require("dotenv").config({ path: `.env.${process.env.NODE_ENV}`, }) ``` - -Lastly, make sure that your `.gitignore` file excludes all of your `.env.*` files: +最後に、`.gitignore`ファイルで全ての`.env.*`ファイルが除外されていることを確認してください: ```text:title=.gitignore # dotenv environment variables files @@ -339,10 +337,9 @@ Lastly, make sure that your `.gitignore` file excludes all of your `.env.*` file .env.development .env.production ``` +#### SKUをリストするコンポーネントを作成する -#### Create a component that lists your SKUs - -In your components folder add a new `Products` folder. This folder will include the components that interact with the Stripe SKUs. First, you need a component that queries and lists your SKUs: +componentsフォルダに新しく`Products`フォルダを追加します。このフォルダはStripeのSKUと対話するコンポーネントが含まれます。まず第一に、SKUを照会およびリストするコンポーネントが必要です: ```jsx:title=src/components/Products/Skus.js import React from "react" @@ -376,10 +373,9 @@ export default props => ( /> ) ``` +クエリを検証し、GraphQLで返されるデータを確認できます。GraphQLは`npm run develop`を実行した際にhttp://localhost:8000/___graphql で利用できます。 -You can validate your query and see what data is being returned in GraphiQL, which is available at http://localhost:8000/___graphql when running `npm run develop`. - -Once you're happy with your query, create a new page where you can import the newly created Sku component: +クエリに満足したら、新しく作成したSKUコンポーネントをインポートできる新しいページを作成しましょう: ```jsx:title=src/pages/advanced.js import React from "react" @@ -400,12 +396,11 @@ const AdvancedExamplePage = () => ( export default AdvancedExamplePage ``` +http://localhost:8000/advanced/ に移動するとSKU名を含む段落のリストが確認できます。 -When navigating to http://localhost:8000/advanced/ you should now see a list of paragraphs with your SKU names. - -#### Create a component that presents a single SKU +#### 単一のSKUを提示するコンポーネントの作成 -To make your SKUs more visually appealing and interactive, create a new `SkuCard` component in your `Products` folder: +SKUを魅力的でインタラクティブにするために、`Products`フォルダに`SkuCard`を新たに作成します。 ```jsx:title=src/components/Products/SkuCard.js import React from "react" @@ -468,7 +463,7 @@ const SkuCard = class extends React.Component { style={buttonStyles} onClick={event => this.redirectToCheckout(event, sku.id)} > - BUY ME + 購入 ) @@ -477,10 +472,8 @@ const SkuCard = class extends React.Component { export default SkuCard ``` - -This component renders a neat card for each individual SKU, with the SKU name, nicely formatted pricing, and a "BUY ME" button. The button triggers the `redirectToCheckout()` function with the corresponding SKU ID. - -Lastly, you need to refactor your `Skus` component to initialize the Stripe.js client, and render `SkuCards` while handing down the Stripe.js client in the `props`: +このコンポーネントはSKU名、適切にフォーマットされた価格設定、および「購入」ボタンを利用して、個々のSKUごとに適切なカードをレンダリングします。「購入」ボタンは対応するSKU IDで`redirectToCheckout()`関数をトリガーします。 +最後に、`Skus`コンポーネントをリファクタリングしてStripe.jsクライアントを初期化し、`props`でStripe.jsクライアントを伝えながら`SkuCards`をレンダリングする必要があります: ```jsx:title=src/components/Products/Skus.js import React, { Component } from 'react' @@ -544,10 +537,8 @@ class Skus extends Component { export default Skus ``` -#### Adding a cart component - -You can call `redirectToCheckout()` providing an array of SKUs and their quantities to charge for multiple items at the same time. Instead of each "BUY ME" button redirecting to the checkout page, you can therefore provide a central "GO TO CHECKOUT" button that uses the state of a cart component. You can see the necessary changes for this example [on GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial/tree/cart-example). - -# Testing Payments +#### カートコンポーネントの追加 +`redirectToCheckout()`関数を呼び出して、SKUとその量の配列を提供し、複数のアイテムを同時に請求できます。したがって、支払いページにリダイレクトするそれぞれの「購入」ボタンの代わりに、カートコンポーネントの状態を利用する主要な「支払いに進む」ボタンを提供できます。この例に必要な変更は[GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial/tree/cart-example)で確認できます。 -In test mode (when using the API key that includes _test_) Stripe provides [test cards](https://stripe.com/docs/testing#cards) for you to test different checkout scenarios. +# 支払いテスト +テストモード(_test_ という文字列を含むAPIキーを利用する場合)では、Stripeは様々な支払いシナリオをテストするための[テストカード](https://stripe.com/docs/testing#cards)を提供します。 From d88a18ba5f3b627d9c10ef70de45a03b11c00f10 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 2 Feb 2020 14:57:11 +0900 Subject: [PATCH 13/45] fix table of contents --- docs/tutorial/ecommerce-tutorial/index.md | 27 +++++++++++------------ 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 48b741768..489c8a82e 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -7,15 +7,15 @@ title: "Gatsby Eコマースチュートリアル" - [目次](#目次) - [なぜEコマースサイトでGatsbyを使うのか](#なぜEコマースサイトでGatsbyを使うのか) - [前提条件](#前提条件) - - [How does Gatsby work with Stripe?](#how-does-gatsby-work-with-stripe) -- [Setting up a Gatsby site](#setting-up-a-gatsby-site) -- [Installing the StripeJS plugin](#installing-the-stripejs-plugin) - - [See your site hot reload in the browser!](#see-your-site-hot-reload-in-the-browser) - - [How does the StripeJS plugin work?](#how-does-the-stripejs-plugin-work) - - [Getting your Stripe test keys](#getting-your-stripe-test-keys) -- [Examples](#examples) - - [Easy: One Button](#easy-one-button) - - [Advanced: Import SKUs via source plugin](#advanced-import-skus-via-source-plugin) + - [StripeとGatsbyはどのように連携させるのか](#StripeとGatsbyはどのように連携させるのか) +- [Gatsbyサイトの設定](#Gatsbyサイトの設定) +- [StripeJSプラグインのインストール](#StripeJSプラグインのインストール) + - [ブラウザでホットリロードされることを確認しよう](#ブラウザでホットリロードされることを確認しよう) + - [StripeJSプラグインはどのように動作するか](#StripeJプラグインはどのように動作するか) + - [Stripeのテストキーを取得する](#Stripeのテストキーを取得する) +- [例](#例) + - [簡単:ボタン1つ](#簡単:ボタン1つ) + - [発展:ソースプラグインを通じてSKUをインポートする](#発展:ソースプラグインを通じてSKUをインポートする) - [支払いテスト](#支払いテスト) この発展的ななチュートリアルでは, Gatsbyを用いて支払いができる基本的なeコマースサイトのUIを構築を学ぶことができます。[Stripe](https://stripe.com)は支払い処理のバックエンドとして用います。 @@ -104,12 +104,11 @@ module.exports = { ### ブラウザでホットリロードされることを確認しよう -ターミナルで`npm run develop`を実行しましす。これにより、開発サーバが起動し、サイトに加えた変更がリロードされるので、ブラウザで変更がプレビューできます。 -ブラウザを[localhost:8000](http://localhost:8000/)で開くと、デフォルトのホームページが表示されます。 +ターミナルで`npm run develop`を実行しましす。これにより、開発サーバが起動し、サイトに加えた変更がリロードされるので、ブラウザで変更がプレビューできます。ブラウザを[localhost:8000](http://localhost:8000/)で開くと、デフォルトのホームページが表示されます。 > **NOTE**:もし、既にGatsbyの開発サーバを`npm run develop`で起動していた場合、コマンドを実行したターミナルで CTRL + C を押してサーバを再起動し、`npm run develop`コマンドを再度実行することで[localhost:8000](http://localhost:8000/)に反映された`gatsby-config.js`の変更を確認するできます。 -### StripeJS pluginはどのように動作するか +### StripeJSプラグインはどのように動作するか StripeはJavaScriptライブラリを提供します。これにより、Stripeがホストする支払いページに顧客を安全にリダイレクトできます。Gatsbyプラグインの`gatsby-plugin-stripe`は全てのページで``タグの末尾に次のスニペットを追加します： ```html @@ -147,7 +146,7 @@ You have 2 keys in both test mode and production mode: ## 例 これらの例の実装は[Github](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial)で見ることができます。 -### 簡単: ボタン1つ +### 簡単:ボタン1つ 例えば電子書籍などのシンプルな製品を売っている場合、Stripeの支払いページへのリダイレクトを実行するボタンを1つ作成できます。 #### 商品とSKUの作成 @@ -283,7 +282,7 @@ export default IndexPage ブラウザで[localhost:8000](http://localhost:8000/)に戻り、`npm run develop`を実行している場合は、大きくて魅力的な"BUY MY BOOK"ボタンが表示されます。さあ、クリックしてみましょう！！ -### 発展: ソースプラグインを通じてSKUをインポートする +### 発展:ソースプラグインを通じてSKUをインポートする SKUのIDをハードコーディングする代わりに、ビルド時に[gatsby-source-stripe plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を使用してSKUを取得できます。 From 2be375d95e85f8563bbf1cfffa083e8fc0f6d21d Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 2 Feb 2020 15:07:19 +0900 Subject: [PATCH 14/45] =?UTF-8?q?=E3=81=84=E3=81=8F=E3=81=A4=E3=81=8B?= =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3=E3=81=A8=E3=83=AC=E3=82=A4=E3=82=A2?= =?UTF-8?q?=E3=82=A6=E3=83=88=E3=82=92=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB?= =?UTF-8?q?=E5=90=88=E3=82=8F=E3=81=9B=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 489c8a82e..23e2883f4 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -37,14 +37,12 @@ Gatsbyをe-コマースのサイトに使うメリットは以下の通りです ### StripeとGatsbyはどのように連携させるのか -Stripeは顧客から情報を安全に収集して処理できる支払い処理サービスです。 -Stripeを試すにはこちらにアクセスしてください。[Stripeクイックスタートガイド](https://stripe.com/docs/payments/checkout#tryout) +Stripeは顧客から情報を安全に収集して処理できる支払い処理サービスです。Stripeを試すにはこちらにアクセスしてください。[Stripeクイックスタートガイド](https://stripe.com/docs/payments/checkout#tryout) Stripeの代わりとしては、SquareやBraintreeなどがあります。これらの仕組みはStripeと非常に似ています。 Stripeはバックエンドコンポーネントを必要としない[hosted checkout](https://stripe.com/docs/payments/checkout)を提供します。 -製品やSKU、サブスクリプションプランの設定を[Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure)で行うことができます。 -単一の製品やサブスクリプション(電子書籍)を販売している場合、Gatsbyサイトで商品のSKU IDをハードコーディングできます。 +製品やSKU、サブスクリプションプランの設定を[Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure)で行うことができます。1つの製品やサブスクリプション(電子書籍)を販売している場合、Gatsbyサイトで商品のSKU IDをハードコーディングできます。 複数の商品を販売している場合、[Stripe ソースプラグイン](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を利用して、ビルド時に全てのSKUを取得できます。 Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベントを利用して新しい商品やSKUが追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/)できます。 @@ -64,6 +62,7 @@ cd ecommerce-gatsby-tutorial ```shell npm install gatsby-plugin-stripe ``` + テキストエディタでルートサイトディレクトリを開き、`gatsby-config.js`に移動します。そして、`gatsby-config.js`のpluginsのところにStripeJSプラグインを追加します。`gatsby-config.js`は次のコード例のようになります。 ```js:title=gatsby-config.js @@ -153,6 +152,8 @@ You have 2 keys in both test mode and production mode: 商品を販売するためにはまず、[Stripe ダッシュボード](https://dashboard.stripe.com/products)または[Stripe API](https://stripe.com/docs/api/products/create)を利用して、Stripeで商品を作成する必要があります。これは、Stripeがフロントエンドからのリクエストが正当であることを検証し、選択された製品/SKUに適切な金額を請求するために必要です。Stripeでは、Stripeの支払いで使用する全てのSKUに名前を付ける必要があります。全てのSKUに必ず1つ追加してください。 +StripeダッシュボードでテストSKUと本番SKUの両方を作成する必要があります。「テストデータの表示」に切り替えてから、ローカル開発用の製品を作成してください。 + #### StripeJSをロードして支払いコンポーネントを作成する `src/components/checkout.js`に新しいファイルを作成します。作成した`checkout.js`は以下のようになります: @@ -251,6 +252,7 @@ Reactをインポートし、いくつかのstyleのボタンを追加し、Reac `render()`関数はstyleをボタンに適用し、`redirectToCheckout()`関数をボタンのonclickイベントにバインドします。 #### 支払いコンポーネントをホームページにインポートする + `src/pages/index.js`ファイルに移動しましょう。ここがルートURLに表示されるホームページです。他のimportの下にあるファイルに新しい支払いコンポーネントをimportし、``要素内に``コンポーネントを追加します。`index.js`ファイルは以下のようになります。 ```jsx:title=src/pages/index.js @@ -313,6 +315,7 @@ module.exports = { ], } ``` + StripeアカウントからSKUを取得するにはシークレットAPIキーを提供する必要があります。シークレットキーは秘密にしておく必要があるので、フロントエンドやGithubで絶対に共有しないでください。したがって、環境変数を設定して秘密鍵を保存する必要があります。[Gatsby docs](/docs/environment-variables/)で環境変数の使用法について詳しく読むことができます。 プロジェクトのルートディレクトリに`.env.development`ファイルを追加してください: @@ -328,6 +331,7 @@ require("dotenv").config({ path: `.env.${process.env.NODE_ENV}`, }) ``` + 最後に、`.gitignore`ファイルで全ての`.env.*`ファイルが除外されていることを確認してください: ```text:title=.gitignore @@ -537,6 +541,7 @@ export default Skus ``` #### カートコンポーネントの追加 + `redirectToCheckout()`関数を呼び出して、SKUとその量の配列を提供し、複数のアイテムを同時に請求できます。したがって、支払いページにリダイレクトするそれぞれの「購入」ボタンの代わりに、カートコンポーネントの状態を利用する主要な「支払いに進む」ボタンを提供できます。この例に必要な変更は[GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial/tree/cart-example)で確認できます。 # 支払いテスト From 532016ca2450f5aac368c6f4bf8a6001774811a8 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 2 Feb 2020 15:10:09 +0900 Subject: [PATCH 15/45] =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?= =?UTF-8?q?=E3=83=88=E3=81=AE=E5=BE=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 23e2883f4..fd18d91dd 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -41,10 +41,7 @@ Stripeは顧客から情報を安全に収集して処理できる支払い処 Stripeの代わりとしては、SquareやBraintreeなどがあります。これらの仕組みはStripeと非常に似ています。 -Stripeはバックエンドコンポーネントを必要としない[hosted checkout](https://stripe.com/docs/payments/checkout)を提供します。 -製品やSKU、サブスクリプションプランの設定を[Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure)で行うことができます。1つの製品やサブスクリプション(電子書籍)を販売している場合、Gatsbyサイトで商品のSKU IDをハードコーディングできます。 -複数の商品を販売している場合、[Stripe ソースプラグイン](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を利用して、ビルド時に全てのSKUを取得できます。 -Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベントを利用して新しい商品やSKUが追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/)できます。 +Stripeはバックエンドコンポーネントを必要としない[hosted checkout](https://stripe.com/docs/payments/checkout)を提供します。製品やSKU、サブスクリプションプランの設定を[Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure)で行うことができます。1つの製品やサブスクリプション(電子書籍)を販売している場合、Gatsbyサイトで商品のSKU IDをハードコーディングできます。複数の商品を販売している場合、[Stripe ソースプラグイン](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を利用して、ビルド時に全てのSKUを取得できます。Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベントを利用して新しい商品やSKUが追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/)できます。 # Gatsbyサイトの設定 From 8eebb742cd28ef209bb6be9aa66b194b04ef5983 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 2 Feb 2020 21:03:57 +0900 Subject: [PATCH 16/45] =?UTF-8?q?lint=E3=81=A7=E6=80=92=E3=82=89=E3=82=8C?= =?UTF-8?q?=E3=81=9F=E3=81=A8=E3=81=93=E3=82=8D=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 148 ++++++++++++---------- 1 file changed, 80 insertions(+), 68 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index fd18d91dd..d6b6d9f31 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -5,62 +5,62 @@ title: "Gatsby Eコマースチュートリアル" # 目次 - [目次](#目次) -- [なぜEコマースサイトでGatsbyを使うのか](#なぜEコマースサイトでGatsbyを使うのか) +- [なぜ E コマースサイトで Gatsby を使うのか](#なぜEコマースサイトでGatsbyを使うのか) - [前提条件](#前提条件) - - [StripeとGatsbyはどのように連携させるのか](#StripeとGatsbyはどのように連携させるのか) -- [Gatsbyサイトの設定](#Gatsbyサイトの設定) -- [StripeJSプラグインのインストール](#StripeJSプラグインのインストール) + - [Stripe と Gatsby はどのように連携させるのか](#StripeとGatsbyはどのように連携させるのか) +- [Gatsby サイトの設定](#Gatsbyサイトの設定) +- [StripeJS プラグインのインストール](#StripeJSプラグインのインストール) - [ブラウザでホットリロードされることを確認しよう](#ブラウザでホットリロードされることを確認しよう) - - [StripeJSプラグインはどのように動作するか](#StripeJプラグインはどのように動作するか) - - [Stripeのテストキーを取得する](#Stripeのテストキーを取得する) + - [StripeJS プラグインはどのように動作するか](#StripeJプラグインはどのように動作するか) + - [Stripe のテストキーを取得する](#Stripeのテストキーを取得する) - [例](#例) - - [簡単:ボタン1つ](#簡単:ボタン1つ) - - [発展:ソースプラグインを通じてSKUをインポートする](#発展:ソースプラグインを通じてSKUをインポートする) + - [簡単:ボタン 1 つ](#簡単:ボタン1つ) + - [発展:ソースプラグインを通じて SKU をインポートする](#発展:ソースプラグインを通じてSKUをインポートする) - [支払いテスト](#支払いテスト) -この発展的ななチュートリアルでは, Gatsbyを用いて支払いができる基本的なeコマースサイトのUIを構築を学ぶことができます。[Stripe](https://stripe.com)は支払い処理のバックエンドとして用います。 +この発展的なチュートリアルでは、 Gatsby を用いて支払いができる基本的な e コマースサイトの UI を構築を学ぶことができます。[Stripe](https://stripe.com)は支払い処理のバックエンドとして用います。 -## なぜEコマースサイトでGatsbyを使うのか +## なぜ E コマースサイトで Gatsby を使うのか -Gatsbyをe-コマースのサイトに使うメリットは以下の通りです: +Gatsby を E コマースのサイトに使うメリットは以下とおりです。 - 静的サイト固有のセキュリティ -- ページをReactから静的ファイルに変換する際の超高速パフォーマンス +- ページを React から静的ファイルに変換する際の超高速パフォーマンス - 簡単にホストできる こちらからホストされたデモを見れます: https://gatsby-ecommerce-stripe.netlify.com/ ## 前提条件 -- これはより高度なチュートリアルなので、以前にGatsbyでサイトを構築したことがある場合は、このチュートリアルの時間が短縮できそうです。([基本チュートリアルはこちら](/tutorial/)) +- これはより高度なチュートリアルなので、以前に Gatsby でサイトを構築したことがある場合は、このチュートリアルの時間が短縮できそうです。([基本チュートリアルはこちら](/tutorial/)) - Stripe アカウント: [アカウント登録はこちら](https://dashboard.stripe.com/register) -### StripeとGatsbyはどのように連携させるのか +### Stripe と Gatsby はどのように連携させるのか -Stripeは顧客から情報を安全に収集して処理できる支払い処理サービスです。Stripeを試すにはこちらにアクセスしてください。[Stripeクイックスタートガイド](https://stripe.com/docs/payments/checkout#tryout) +Stripe は顧客から情報を安全に収集して処理できる支払い処理サービスです。Stripe を試すにはこちらにアクセスしてください。[Stripe クイックスタートガイド](https://stripe.com/docs/payments/checkout#tryout) -Stripeの代わりとしては、SquareやBraintreeなどがあります。これらの仕組みはStripeと非常に似ています。 +Stripe の代わりとしては、Square や Braintree などがあります。これらの仕組みは Stripe と非常に似ています。 -Stripeはバックエンドコンポーネントを必要としない[hosted checkout](https://stripe.com/docs/payments/checkout)を提供します。製品やSKU、サブスクリプションプランの設定を[Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure)で行うことができます。1つの製品やサブスクリプション(電子書籍)を販売している場合、Gatsbyサイトで商品のSKU IDをハードコーディングできます。複数の商品を販売している場合、[Stripe ソースプラグイン](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を利用して、ビルド時に全てのSKUを取得できます。Gatsbyのサイトを自動的に更新する場合は、Stripe webhookイベントを利用して新しい商品やSKUが追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/)できます。 +Stripe はバックエンドコンポーネントを必要としない[hosted checkout](https://stripe.com/docs/payments/checkout)を提供します。製品や SKU、サブスクリプションプランの設定を[Stripe Dashboard](https://stripe.com/docs/payments/checkout#configure)で行うことができます。1 つの製品やサブスクリプション（電子書籍）を販売している場合、Gatsby サイトで商品の SKU ID をハードコーディングできます。複数の商品を販売している場合、[Stripe ソースプラグイン](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を利用して、ビルド時に全ての SKU を取得できます。Gatsby のサイトを自動的に更新する場合は、Stripe webhook イベントを利用して新しい商品や SKU が追加されたときに再デプロイをトリガー[trigger a redeploy](https://www.netlify.com/docs/)できます。 -# Gatsbyサイトの設定 +# Gatsby サイトの設定 -ターミナルで`gatsby new`を実行して新しいGatsbyのプロジェクトを作成し、ディレクトリを先程作成した新しいプロジェクトに変更します。 +ターミナルで`gatsby new`を実行して新しい Gatsby のプロジェクトを作成し、ディレクトリーを先程作成した新しいプロジェクトに変更します。 ```shell gatsby new ecommerce-gatsby-tutorial cd ecommerce-gatsby-tutorial ``` -## StripeJSプラグインのインストール +## StripeJS プラグインのインストール -プラグインを利用してこのデフォルトのスタータの機能を拡張できます。そのようなプラグインの1つが `gatsby-plugin-stripe`で、このプロジェクトにインストールします。 +プラグインを利用してこのデフォルトのスタータの機能を拡張できます。そのようなプラグインの 1 つが `gatsby-plugin-stripe`で、このプロジェクトにインストールします。 ```shell npm install gatsby-plugin-stripe ``` -テキストエディタでルートサイトディレクトリを開き、`gatsby-config.js`に移動します。そして、`gatsby-config.js`のpluginsのところにStripeJSプラグインを追加します。`gatsby-config.js`は次のコード例のようになります。 +テキストエディタでルートサイトディレクトリーを開き、`gatsby-config.js`に移動します。そして、`gatsby-config.js`の plugins のところに StripeJS プラグインを追加します。`gatsby-config.js`は次のコード例のようになります。 ```js:title=gatsby-config.js module.exports = { @@ -92,66 +92,69 @@ module.exports = { icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. }, }, - `gatsby-plugin-stripe` + `gatsby-plugin-stripe`, ], } - ``` ### ブラウザでホットリロードされることを確認しよう -ターミナルで`npm run develop`を実行しましす。これにより、開発サーバが起動し、サイトに加えた変更がリロードされるので、ブラウザで変更がプレビューできます。ブラウザを[localhost:8000](http://localhost:8000/)で開くと、デフォルトのホームページが表示されます。 +ターミナルで`npm run develop`を実行しましす。これにより、開発サーバーが起動し、サイトに加えた変更がリロードされるので、ブラウザーで変更がプレビューできます。ブラウザを[localhost:8000](http://localhost:8000/)で開くと、デフォルトのホームページが表示されます。 + +> **NOTE**:もし、すでに Gatsby の開発サーバを`npm run develop`で起動していた場合、コマンドを実行したターミナルで CTRL + C を押してサーバを再起動し、`npm run develop`コマンドを再度実行することで[localhost:8000](http://localhost:8000/)に反映された`gatsby-config.js`の変更を確認するできます。 -> **NOTE**:もし、既にGatsbyの開発サーバを`npm run develop`で起動していた場合、コマンドを実行したターミナルで CTRL + C を押してサーバを再起動し、`npm run develop`コマンドを再度実行することで[localhost:8000](http://localhost:8000/)に反映された`gatsby-config.js`の変更を確認するできます。 +### StripeJS プラグインはどのように動作するか -### StripeJSプラグインはどのように動作するか -StripeはJavaScriptライブラリを提供します。これにより、Stripeがホストする支払いページに顧客を安全にリダイレクトできます。Gatsbyプラグインの`gatsby-plugin-stripe`は全てのページで``タグの末尾に次のスニペットを追加します： +Stripe は JavaScript ライブラリーを提供します。これにより、Stripe がホストする支払いページに顧客を安全にリダイレクトできます。Gatsby プラグインの`gatsby-plugin-stripe`は全てのページで``タグの末尾に次のスニペットを追加します： ```html ``` -これにより、Stripeの不正検出[[fraud detection](https://stripe.com/docs/stripe-js/reference#including-stripejs)]が容易になります -もし支払い処理をさらにカスタマイズしたりSrtipeのデータをサイトに引いてくる場合は、[GatsbyのプラグインライブラリでStripeプラグインを確認](https://www.gatsbyjs.org/plugins/?=stripe)してください。 -### Stripeのテストキーを取得する +これにより、Stripe の不正検出[[fraud detection](https://stripe.com/docs/stripe-js/reference#including-stripejs)]が容易になります +もし支払い処理をさらにカスタマイズしたり Srtipe のデータをサイトに引いてくる場合は、[Gatsby のプラグインライブラリで Stripe プラグインを確認](https://www.gatsbyjs.org/plugins/?=stripe)してください。 -StripeアカウントにログインしてAPI資格情報を表示し、[開発者] > [APIキー]に移動します。 +### Stripe のテストキーを取得する + +Stripe アカウントにログインして API 資格情報を表示し、[開発者] > [API キー]に移動します。 ![Stripe public test key location in Stripe account](stripe-public-test-key.png) -テストモードと本番モードの2つのキーがあります: +テストモードと本番モードの 2 つのキーがあります: You have 2 keys in both test mode and production mode: - 公開可能キー - シークレットキー -テスト中は _test_.という文字が含まれたキーを使い、本番のコードではライブキーを使う必要があります。名前が示すように、公開可能キーは公開するコード(フロントエンドやGithubなど)に含まれているな愛がありますが、シークレットキーは誰とも共有したり、公開レポジトリにコミットしたりしないでください。このシークレットキーへのアクセスを制限することは重要です。このシークレットキーを持っている人は誰でもStripeアカウントからリクエストを読み取ったり送信したり、請求や購入に関する情報を見たり、顧客に送信したりする可能性があるからです。 +テスト中は _test_.という文字が含まれたキーを使い、本番のコードではライブキーを使う必要があります。名前が示すように、公開可能キーは公開するコード(フロントエンドや Github など)に含まれているな愛がありますが、シークレットキーは誰とも共有したり、公開レポジトリにコミットしたりしないでください。このシークレットキーへのアクセスを制限することは重要です。このシークレットキーを持っている人は誰でも Stripe アカウントからリクエストを読み取ったり送信したり、請求や購入に関する情報を見たり、顧客に送信したりする可能性があるからです。 -### Stripeアカウントの"Checkout クライアント専用組み込み"を有効にします +### Stripe アカウントの"Checkout クライアント専用組み込み"を有効にします -このチュートリアルではStripeの"Checkout クライアント専用組み込み"を利用します。この組み込みを利用するにはStipeダッシュボードの対応する[チェックアウトの設定](https://dashboard.stripe.com/account/checkout/settings)でアクティブにする必要があります。 +このチュートリアルでは Stripe の"Checkout クライアント専用組み込み"を利用します。この組み込みを利用するには Stipe ダッシュボードの対応する[チェックアウトの設定](https://dashboard.stripe.com/account/checkout/settings)でアクティブにする必要があります。 ![Stripe control to enable the Checkout client-side only integration highlighted](stripe-checkout-clientside-functionality.png) -> 💡 この変更により、製品を管理するためにStripeが提供するインターフェースも変更されます。以前にこのツールを利用したことがある場合は、このことに留意してください。今までに製品管理を利用したことがない場合、心配する必要はありません。 +> 💡 この変更により、製品を管理するために Stripe が提供するインターフェースも変更されます。以前にこのツールを利用したことがある場合は、このことに留意してください。今までに製品管理を利用したことがない場合、心配する必要はありません。 -さらに、この組み込みを利用するには、[アカウント設定](https://dashboard.stripe.com/account)でStripeアカウントの名前を設定する必要があります。 +さらに、この組み込みを利用するには、[アカウント設定](https://dashboard.stripe.com/account)で Stripe アカウントの名前を設定する必要があります。 この組み込みの詳細については[Stripe docs](https://stripe.com/docs/payments/checkout#configure)を利用してみてください。 ## 例 + これらの例の実装は[Github](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial)で見ることができます。 -### 簡単:ボタン1つ -例えば電子書籍などのシンプルな製品を売っている場合、Stripeの支払いページへのリダイレクトを実行するボタンを1つ作成できます。 +### 簡単:ボタン 1 つ -#### 商品とSKUの作成 +例えば電子書籍などのシンプルな製品を売っている場合、Stripe の支払いページへのリダイレクトを実行するボタンを 1 つ作成できます。 -商品を販売するためにはまず、[Stripe ダッシュボード](https://dashboard.stripe.com/products)または[Stripe API](https://stripe.com/docs/api/products/create)を利用して、Stripeで商品を作成する必要があります。これは、Stripeがフロントエンドからのリクエストが正当であることを検証し、選択された製品/SKUに適切な金額を請求するために必要です。Stripeでは、Stripeの支払いで使用する全てのSKUに名前を付ける必要があります。全てのSKUに必ず1つ追加してください。 +#### 商品と SKU の作成 -StripeダッシュボードでテストSKUと本番SKUの両方を作成する必要があります。「テストデータの表示」に切り替えてから、ローカル開発用の製品を作成してください。 +商品を販売するためにはまず、[Stripe ダッシュボード](https://dashboard.stripe.com/products)または[Stripe API](https://stripe.com/docs/api/products/create)を利用して、Stripe で商品を作成する必要があります。これは、Stripe がフロントエンドからのリクエストが正当であることを検証し、選択された製品/SKU に適切な金額を請求するために必要です。Stripe では、Stripe の支払いで使用する全ての SKU に名前を付ける必要があります。全ての SKU に必ず 1 つ追加してください。 -#### StripeJSをロードして支払いコンポーネントを作成する +Stripe ダッシュボードでテスト SKU と本番 SKU の両方を作成する必要があります。「テストデータの表示」に切り替えてから、ローカル開発用の製品を作成してください。 + +#### StripeJS をロードして支払いコンポーネントを作成する `src/components/checkout.js`に新しいファイルを作成します。作成した`checkout.js`は以下のようになります: @@ -205,16 +208,18 @@ const Checkout = class extends React.Component { export default Checkout ``` + #### あなたは何をしましたか？ -Reactをインポートし、いくつかのstyleのボタンを追加し、React関数を導入しました。`componentDidMount()`や、`redirectToCheckout()`といった関数はStripeの機能の中で最も重要です。`componentDidMount()`関数はコンポーネントが最初にDOMにマウントされた時に起動するReactのライフサイクルメソッドであり、Stripe.jsクライアントを初期化するのに適した場所です。コードは以下のようになります。 +React をインポートし、いくつかの style のボタンを追加し、React 関数を導入しました。`componentDidMount()`や、`redirectToCheckout()`といった関数は Stripe の機能の中で最も重要です。`componentDidMount()`関数はコンポーネントが最初に DOM にマウントされた時に起動する React のライフサイクルメソッドであり、Stripe.js クライアントを初期化するのに適した場所です。コードは以下のようになります。 ```jsx:title=src/components/checkout.js componentDidMount() { this.stripe = window.Stripe('pk_test_jG9s3XMdSjZF9Kdm5g59zlYd') } ``` -これによってStripeプラットフォームが識別され、製品とセキュリティの設定に対して支払いリクエストが検証され、Stripeアカウントの支払いが処理されます。 + +これによって Stripe プラットフォームが識別され、製品とセキュリティの設定に対して支払いリクエストが検証され、Stripe アカウントの支払いが処理されます。 ```jsx:title=src/components/checkout.js async redirectToCheckout(event) { @@ -231,7 +236,7 @@ Reactをインポートし、いくつかのstyleのボタンを追加し、Reac } ``` -`redirectToCheckout()`関数は支払いのリクエストを検証し、Stripeがホストする支払いページにリダイレクトするか、エラーオブジェクトで解決します。`successUrl`と`cancelUrl`を適切なURLに置き換えてください。 +`redirectToCheckout()`関数は支払いのリクエストを検証し、Stripe がホストする支払いページにリダイレクトするか、エラーオブジェクトで解決します。`successUrl`と`cancelUrl`を適切な URL に置き換えてください。 ```jsx:title=src/components/checkout.js render() { @@ -246,11 +251,11 @@ Reactをインポートし、いくつかのstyleのボタンを追加し、Reac } ``` -`render()`関数はstyleをボタンに適用し、`redirectToCheckout()`関数をボタンのonclickイベントにバインドします。 +`render()`関数は style をボタンに適用し、`redirectToCheckout()`関数をボタンの onclick イベントにバインドします。 #### 支払いコンポーネントをホームページにインポートする -`src/pages/index.js`ファイルに移動しましょう。ここがルートURLに表示されるホームページです。他のimportの下にあるファイルに新しい支払いコンポーネントをimportし、``要素内に``コンポーネントを追加します。`index.js`ファイルは以下のようになります。 +`src/pages/index.js`ファイルに移動しましょう。ここがルート URL に表示されるホームページです。他の import の下にあるファイルに新しい支払いコンポーネントを import し、``要素内に``コンポーネントを追加します。`index.js`ファイルは以下のようになります。 ```jsx:title=src/pages/index.js import React from "react" @@ -279,18 +284,20 @@ const IndexPage = () => ( export default IndexPage ``` -ブラウザで[localhost:8000](http://localhost:8000/)に戻り、`npm run develop`を実行している場合は、大きくて魅力的な"BUY MY BOOK"ボタンが表示されます。さあ、クリックしてみましょう！！ +ブラウザで[localhost:8000](http://localhost:8000/)に戻り、`npm run develop`を実行している場合は、大きくて魅力的な"BUY MY BOOK"ボタンが表示されます。さあ、クリックしてみましょう！ -### 発展:ソースプラグインを通じてSKUをインポートする +### 発展:ソースプラグインを通じて SKU をインポートする -SKUのIDをハードコーディングする代わりに、ビルド時に[gatsby-source-stripe plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を使用してSKUを取得できます。 +SKU の ID をハードコーディングする代わりに、ビルド時に[gatsby-source-stripe plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)を使用して SKU を取得できます。 -#### Stripeソースプラグインの追加 -StripeアカウントからSKUを取得するために使える[gatsby-source-stripe plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)プラグインを追加しましょう。 +#### Stripe ソースプラグインの追加 + +Stripe アカウントから SKU を取得するために使える[gatsby-source-stripe plugin](https://www.gatsbyjs.org/packages/gatsby-source-stripe/)プラグインを追加しましょう。 ```shell npm install gatsby-source-stripe ``` + これで、`gatsby-config`ファイルにプラグイン設定を追加できます。 ```js:title=gatsby-config.js @@ -313,8 +320,8 @@ module.exports = { } ``` -StripeアカウントからSKUを取得するにはシークレットAPIキーを提供する必要があります。シークレットキーは秘密にしておく必要があるので、フロントエンドやGithubで絶対に共有しないでください。したがって、環境変数を設定して秘密鍵を保存する必要があります。[Gatsby docs](/docs/environment-variables/)で環境変数の使用法について詳しく読むことができます。 -プロジェクトのルートディレクトリに`.env.development`ファイルを追加してください: +Stripe アカウントから SKU を取得するにはシークレット API キーを提供する必要があります。シークレットキーは秘密にしておく必要があるので、フロントエンドや Github で絶対に共有しないでください。したがって、環境変数を設定して秘密鍵を保存する必要があります。[Gatsby docs](/docs/environment-variables/)で環境変数の使用法について詳しく読むことができます。 +プロジェクトのルートディレクトリに`.env.development`ファイルを追加してください。 ```text:title=.env.development # Stripe secret API key @@ -329,7 +336,7 @@ require("dotenv").config({ }) ``` -最後に、`.gitignore`ファイルで全ての`.env.*`ファイルが除外されていることを確認してください: +最後に、`.gitignore`ファイルで全ての`.env.*`ファイルが除外されていることを確認してください。 ```text:title=.gitignore # dotenv environment variables files @@ -337,9 +344,10 @@ require("dotenv").config({ .env.development .env.production ``` -#### SKUをリストするコンポーネントを作成する -componentsフォルダに新しく`Products`フォルダを追加します。このフォルダはStripeのSKUと対話するコンポーネントが含まれます。まず第一に、SKUを照会およびリストするコンポーネントが必要です: +#### SKU をリストするコンポーネントを作成する + +components ディレクトリーに新しく`Products`ファイルを追加します。このファイルには Stripe の SKU と対話するコンポーネントが含まれます。まず第一に、SKU を照会およびリストするコンポーネントが必要です。 ```jsx:title=src/components/Products/Skus.js import React from "react" @@ -373,9 +381,10 @@ export default props => ( /> ) ``` -クエリを検証し、GraphQLで返されるデータを確認できます。GraphQLは`npm run develop`を実行した際にhttp://localhost:8000/___graphql で利用できます。 -クエリに満足したら、新しく作成したSKUコンポーネントをインポートできる新しいページを作成しましょう: +クエリを検証し、GraphQL で返されるデータを確認できます。GraphQL は`npm run develop`を実行した際にhttp://localhost:8000/___graphql にて確認できます。 + +クエリに満足したら、新しく作成した SKU コンポーネントをインポートできる新しいページを作成しましょう。 ```jsx:title=src/pages/advanced.js import React from "react" @@ -396,11 +405,12 @@ const AdvancedExamplePage = () => ( export default AdvancedExamplePage ``` -http://localhost:8000/advanced/ に移動するとSKU名を含む段落のリストが確認できます。 -#### 単一のSKUを提示するコンポーネントの作成 +http://localhost:8000/advanced/ に移動すると SKU 名を含む段落のリストが確認できます。 -SKUを魅力的でインタラクティブにするために、`Products`フォルダに`SkuCard`を新たに作成します。 +#### 単一の SKU を提示するコンポーネントの作成 + +SKU を魅力的でインタラクティブにするため、`Products`ディレクトリに`SkuCard`を新たに作成します。 ```jsx:title=src/components/Products/SkuCard.js import React from "react" @@ -472,8 +482,9 @@ const SkuCard = class extends React.Component { export default SkuCard ``` -このコンポーネントはSKU名、適切にフォーマットされた価格設定、および「購入」ボタンを利用して、個々のSKUごとに適切なカードをレンダリングします。「購入」ボタンは対応するSKU IDで`redirectToCheckout()`関数をトリガーします。 -最後に、`Skus`コンポーネントをリファクタリングしてStripe.jsクライアントを初期化し、`props`でStripe.jsクライアントを伝えながら`SkuCards`をレンダリングする必要があります: + +このコンポーネントは SKU 名、適切にフォーマットされた価格設定、および「購入」ボタンを利用して、個々の SKU ごとに適切なカードをレンダリングします。「購入」ボタンは対応する SKU ID で`redirectToCheckout()`関数をトリガーします。 +最後に、`Skus`コンポーネントをリファクタリングして Stripe.js クライアントを初期化し、`props`で Stripe.js クライアントを伝えながら`SkuCards`をレンダリングする必要があります。 ```jsx:title=src/components/Products/Skus.js import React, { Component } from 'react' @@ -539,7 +550,8 @@ export default Skus #### カートコンポーネントの追加 -`redirectToCheckout()`関数を呼び出して、SKUとその量の配列を提供し、複数のアイテムを同時に請求できます。したがって、支払いページにリダイレクトするそれぞれの「購入」ボタンの代わりに、カートコンポーネントの状態を利用する主要な「支払いに進む」ボタンを提供できます。この例に必要な変更は[GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial/tree/cart-example)で確認できます。 +`redirectToCheckout()`関数を呼び出して、SKU とその量の配列を提供し、複数のアイテムを同時に請求できます。したがって、支払いページにリダイレクトするそれぞれの「購入」ボタンの代わりに、カートコンポーネントの状態を利用する主要な「支払いに進む」ボタンを提供できます。この例に必要な変更は[GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial/tree/cart-example)で確認できます。 # 支払いテスト -テストモード(_test_ という文字列を含むAPIキーを利用する場合)では、Stripeは様々な支払いシナリオをテストするための[テストカード](https://stripe.com/docs/testing#cards)を提供します。 + +テストモード（_test_ という文字列を含む API キーを利用する場合）では、Stripe は様々な支払いシナリオをテストするための[テストカード](https://stripe.com/docs/testing#cards)を提供します。 From 7a04879a240b1fcac4e12267f6edd550a1915ac7 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Sun, 2 Feb 2020 21:10:11 +0900 Subject: [PATCH 17/45] =?UTF-8?q?GraphQL=E3=82=92GraphiQL=E3=81=AB?= =?UTF-8?q?=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index d6b6d9f31..0372c9b58 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -382,7 +382,7 @@ export default props => ( ) ``` -クエリを検証し、GraphQL で返されるデータを確認できます。GraphQL は`npm run develop`を実行した際にhttp://localhost:8000/___graphql にて確認できます。 +クエリを検証し、GraphQL で返されるデータを確認できます。GraphiQL は`npm run develop`を実行した際にhttp://localhost:8000/___graphql にて確認できます。 クエリに満足したら、新しく作成した SKU コンポーネントをインポートできる新しいページを作成しましょう。 From de1bcc1a881cacc07917d433e63ac401f4fc2f91 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:21:19 +0900 Subject: [PATCH 18/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 0372c9b58..a81471637 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -45,7 +45,7 @@ Stripe はバックエンドコンポーネントを必要としない[hosted ch # Gatsby サイトの設定 -ターミナルで`gatsby new`を実行して新しい Gatsby のプロジェクトを作成し、ディレクトリーを先程作成した新しいプロジェクトに変更します。 +ターミナルで `gatsby new` を実行して新しい Gatsby のプロジェクトを作成し、ディレクトリーを先程作成した新しいプロジェクトに変更します。 ```shell gatsby new ecommerce-gatsby-tutorial From e1ea8dc4f76b870e570183a59c4bc5bb63e4d76f Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:21:29 +0900 Subject: [PATCH 19/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index a81471637..4c3325e3d 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -54,7 +54,7 @@ cd ecommerce-gatsby-tutorial ## StripeJS プラグインのインストール -プラグインを利用してこのデフォルトのスタータの機能を拡張できます。そのようなプラグインの 1 つが `gatsby-plugin-stripe`で、このプロジェクトにインストールします。 +プラグインを利用してこのデフォルトのスターターの機能を拡張できます。そのようなプラグインの 1 つが `gatsby-plugin-stripe`で、このプロジェクトにインストールします。 ```shell npm install gatsby-plugin-stripe From 69d817994c4a89ed82a54354768db4668f2d6288 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:21:41 +0900 Subject: [PATCH 20/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 4c3325e3d..0830daa81 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -99,7 +99,7 @@ module.exports = { ### ブラウザでホットリロードされることを確認しよう -ターミナルで`npm run develop`を実行しましす。これにより、開発サーバーが起動し、サイトに加えた変更がリロードされるので、ブラウザーで変更がプレビューできます。ブラウザを[localhost:8000](http://localhost:8000/)で開くと、デフォルトのホームページが表示されます。 +ターミナルで `npm run develop` を実行しましす。これにより、開発サーバーが起動し、サイトに加えた変更がリロードされるので、ブラウザーで変更がプレビューできます。ブラウザを[localhost:8000](http://localhost:8000/)で開くと、デフォルトのホームページが表示されます。 > **NOTE**:もし、すでに Gatsby の開発サーバを`npm run develop`で起動していた場合、コマンドを実行したターミナルで CTRL + C を押してサーバを再起動し、`npm run develop`コマンドを再度実行することで[localhost:8000](http://localhost:8000/)に反映された`gatsby-config.js`の変更を確認するできます。 From 285c24cfba2a6111158d30ff27b0281f1ba0ef6a Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:21:55 +0900 Subject: [PATCH 21/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 0830daa81..2936b7728 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -101,7 +101,7 @@ module.exports = { ターミナルで `npm run develop` を実行しましす。これにより、開発サーバーが起動し、サイトに加えた変更がリロードされるので、ブラウザーで変更がプレビューできます。ブラウザを[localhost:8000](http://localhost:8000/)で開くと、デフォルトのホームページが表示されます。 -> **NOTE**:もし、すでに Gatsby の開発サーバを`npm run develop`で起動していた場合、コマンドを実行したターミナルで CTRL + C を押してサーバを再起動し、`npm run develop`コマンドを再度実行することで[localhost:8000](http://localhost:8000/)に反映された`gatsby-config.js`の変更を確認するできます。 +> **ヒント**:もし、すでに Gatsby の開発サーバを `npm run develop` で起動していた場合、コマンドを実行したターミナルで CTRL + C を押してサーバを再起動し、`npm run develop` コマンドを再度実行することで[localhost:8000](http://localhost:8000/)に反映された`gatsby-config.js`の変更を確認できます。 ### StripeJS プラグインはどのように動作するか From 2a4741f0abf09a8618a44856ed49f41565b19dba Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:22:11 +0900 Subject: [PATCH 22/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 2936b7728..cac16b87c 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -111,7 +111,7 @@ Stripe は JavaScript ライブラリーを提供します。これにより、S ``` -これにより、Stripe の不正検出[[fraud detection](https://stripe.com/docs/stripe-js/reference#including-stripejs)]が容易になります +これにより、Stripe の[不正検出](https://stripe.com/docs/stripe-js/reference#including-stripejs)]が容易になります もし支払い処理をさらにカスタマイズしたり Srtipe のデータをサイトに引いてくる場合は、[Gatsby のプラグインライブラリで Stripe プラグインを確認](https://www.gatsbyjs.org/plugins/?=stripe)してください。 ### Stripe のテストキーを取得する From c15204823e49b6cb5ed8b296b7e9bdcca925e4d5 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:22:24 +0900 Subject: [PATCH 23/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index cac16b87c..c3bba79a9 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -105,7 +105,7 @@ module.exports = { ### StripeJS プラグインはどのように動作するか -Stripe は JavaScript ライブラリーを提供します。これにより、Stripe がホストする支払いページに顧客を安全にリダイレクトできます。Gatsby プラグインの`gatsby-plugin-stripe`は全てのページで``タグの末尾に次のスニペットを追加します： +Stripe は JavaScript ライブラリーを提供します。これにより、Stripe がホストする支払いページに顧客を安全にリダイレクトできます。Gatsby プラグインの `gatsby-plugin-stripe` は全てのページで `` タグの末尾に次のスニペットを追加します： ```html From 62324385edfe196e6f7ac4578fdb43da013174be Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:22:33 +0900 Subject: [PATCH 24/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index c3bba79a9..167d8373d 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -347,7 +347,7 @@ require("dotenv").config({ #### SKU をリストするコンポーネントを作成する -components ディレクトリーに新しく`Products`ファイルを追加します。このファイルには Stripe の SKU と対話するコンポーネントが含まれます。まず第一に、SKU を照会およびリストするコンポーネントが必要です。 +components ディレクトリーに新しく `Products` ファイルを追加します。このファイルには Stripe の SKU と対話するコンポーネントが含まれます。まず第一に、SKU を照会およびリストするコンポーネントが必要です。 ```jsx:title=src/components/Products/Skus.js import React from "react" From 73d62d540f4c4f80fec686ee1ff9deb7d1dfc024 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:22:53 +0900 Subject: [PATCH 25/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 167d8373d..7c5555128 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -382,7 +382,7 @@ export default props => ( ) ``` -クエリを検証し、GraphQL で返されるデータを確認できます。GraphiQL は`npm run develop`を実行した際にhttp://localhost:8000/___graphql にて確認できます。 +クエリを検証し、GraphQL で返されるデータを確認できます。GraphiQL は `npm run develop` を実行した際にhttp://localhost:8000/___graphql にて確認できます。 クエリに満足したら、新しく作成した SKU コンポーネントをインポートできる新しいページを作成しましょう。 From 6ae44128328ddbc52e7b35396dff13880b6bac9b Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:23:05 +0900 Subject: [PATCH 26/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 7c5555128..4caef60fa 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -483,7 +483,7 @@ const SkuCard = class extends React.Component { export default SkuCard ``` -このコンポーネントは SKU 名、適切にフォーマットされた価格設定、および「購入」ボタンを利用して、個々の SKU ごとに適切なカードをレンダリングします。「購入」ボタンは対応する SKU ID で`redirectToCheckout()`関数をトリガーします。 +このコンポーネントは SKU 名、適切にフォーマットされた価格設定、および「購入」ボタンを利用して、個々の SKU ごとに適切なカードをレンダリングします。「購入」ボタンは対応する SKU ID で `redirectToCheckout()` 関数をトリガーします。 最後に、`Skus`コンポーネントをリファクタリングして Stripe.js クライアントを初期化し、`props`で Stripe.js クライアントを伝えながら`SkuCards`をレンダリングする必要があります。 ```jsx:title=src/components/Products/Skus.js From 81c5e64ff3fcf8a46ea00736f9955cea9dd73aee Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:23:14 +0900 Subject: [PATCH 27/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 4caef60fa..854d41269 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -484,7 +484,7 @@ export default SkuCard ``` このコンポーネントは SKU 名、適切にフォーマットされた価格設定、および「購入」ボタンを利用して、個々の SKU ごとに適切なカードをレンダリングします。「購入」ボタンは対応する SKU ID で `redirectToCheckout()` 関数をトリガーします。 -最後に、`Skus`コンポーネントをリファクタリングして Stripe.js クライアントを初期化し、`props`で Stripe.js クライアントを伝えながら`SkuCards`をレンダリングする必要があります。 +最後に、`Skus` コンポーネントをリファクタリングして Stripe.js クライアントを初期化し、`props` で Stripe.js クライアントを伝えながら `SkuCards` をレンダリングする必要があります。 ```jsx:title=src/components/Products/Skus.js import React, { Component } from 'react' From 11f6b8b4fe16d32e67c11af13345bbe59a49b1ed Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:23:24 +0900 Subject: [PATCH 28/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 854d41269..2665b7576 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -550,7 +550,7 @@ export default Skus #### カートコンポーネントの追加 -`redirectToCheckout()`関数を呼び出して、SKU とその量の配列を提供し、複数のアイテムを同時に請求できます。したがって、支払いページにリダイレクトするそれぞれの「購入」ボタンの代わりに、カートコンポーネントの状態を利用する主要な「支払いに進む」ボタンを提供できます。この例に必要な変更は[GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial/tree/cart-example)で確認できます。 +`redirectToCheckout()` 関数を呼び出して、SKU とその量の配列を提供し、複数のアイテムを同時に請求できます。したがって、支払いページにリダイレクトするそれぞれの「購入」ボタンの代わりに、カートコンポーネントの状態を利用する主要な「支払いに進む」ボタンを提供できます。この例に必要な変更は[GitHub](https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial/tree/cart-example)で確認できます。 # 支払いテスト From 50a04a8d2b0f49be19161248107f8a03aa6d4f1e Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:24:06 +0900 Subject: [PATCH 29/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 2665b7576..28bae98d8 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -128,7 +128,7 @@ You have 2 keys in both test mode and production mode: テスト中は _test_.という文字が含まれたキーを使い、本番のコードではライブキーを使う必要があります。名前が示すように、公開可能キーは公開するコード(フロントエンドや Github など)に含まれているな愛がありますが、シークレットキーは誰とも共有したり、公開レポジトリにコミットしたりしないでください。このシークレットキーへのアクセスを制限することは重要です。このシークレットキーを持っている人は誰でも Stripe アカウントからリクエストを読み取ったり送信したり、請求や購入に関する情報を見たり、顧客に送信したりする可能性があるからです。 -### Stripe アカウントの"Checkout クライアント専用組み込み"を有効にします +### Stripe アカウントの"クライアント専用組み込み"を有効にします このチュートリアルでは Stripe の"Checkout クライアント専用組み込み"を利用します。この組み込みを利用するには Stipe ダッシュボードの対応する[チェックアウトの設定](https://dashboard.stripe.com/account/checkout/settings)でアクティブにする必要があります。 From b7f83ac4aa7bebe5f672b71709c801d49174b689 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:24:32 +0900 Subject: [PATCH 30/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 28bae98d8..ec7c23882 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -130,7 +130,7 @@ You have 2 keys in both test mode and production mode: ### Stripe アカウントの"クライアント専用組み込み"を有効にします -このチュートリアルでは Stripe の"Checkout クライアント専用組み込み"を利用します。この組み込みを利用するには Stipe ダッシュボードの対応する[チェックアウトの設定](https://dashboard.stripe.com/account/checkout/settings)でアクティブにする必要があります。 +このチュートリアルでは Stripe の"クライアント専用組み込み"を利用します。この組み込みを利用するには Stipe ダッシュボードの対応する[チェックアウトの設定](https://dashboard.stripe.com/account/checkout/settings)でアクティブにする必要があります。 ![Stripe control to enable the Checkout client-side only integration highlighted](stripe-checkout-clientside-functionality.png) From af1c62ffbb4243cecc80ad9514622000372b74b1 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:24:59 +0900 Subject: [PATCH 31/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index ec7c23882..8a3ef9602 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -138,7 +138,7 @@ You have 2 keys in both test mode and production mode: さらに、この組み込みを利用するには、[アカウント設定](https://dashboard.stripe.com/account)で Stripe アカウントの名前を設定する必要があります。 -この組み込みの詳細については[Stripe docs](https://stripe.com/docs/payments/checkout#configure)を利用してみてください。 +この組み込みの詳細については[Stripe docs](https://stripe.com/docs/payments/checkout#configure)を参照すると良いでしょう。 ## 例 From c73186ce598cfc49e8499b0a3db70ba8092dd681 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:25:15 +0900 Subject: [PATCH 32/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 8a3ef9602..3aa84b364 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -156,7 +156,7 @@ Stripe ダッシュボードでテスト SKU と本番 SKU の両方を作成す #### StripeJS をロードして支払いコンポーネントを作成する -`src/components/checkout.js`に新しいファイルを作成します。作成した`checkout.js`は以下のようになります: +`src/components/checkout.js` に新しいファイルを作成します。作成した `checkout.js` は以下のようになります: ```jsx:title=src/components/checkout.js import React from "react" From 46bfbbb46b4850e647ba5d72a2ca7bed20c56076 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:25:35 +0900 Subject: [PATCH 33/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 3aa84b364..2c7282104 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -211,7 +211,7 @@ export default Checkout #### あなたは何をしましたか？ -React をインポートし、いくつかの style のボタンを追加し、React 関数を導入しました。`componentDidMount()`や、`redirectToCheckout()`といった関数は Stripe の機能の中で最も重要です。`componentDidMount()`関数はコンポーネントが最初に DOM にマウントされた時に起動する React のライフサイクルメソッドであり、Stripe.js クライアントを初期化するのに適した場所です。コードは以下のようになります。 +React をインポートし、いくつかの style のボタンを追加し、React 関数を導入しました。`componentDidMount()`や、`redirectToCheckout()` といった関数は Stripe の機能の中で最も重要です。`componentDidMount()` 関数はコンポーネントが最初に DOM にマウントされた時に起動する React のライフサイクルメソッドであり、Stripe.js クライアントを初期化するのに適した場所です。コードは以下のようになります。 ```jsx:title=src/components/checkout.js componentDidMount() { From 6324adb20dd76a04d7ae3de6c1d55c8bd8bfe79a Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:25:49 +0900 Subject: [PATCH 34/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 2c7282104..2380ab42b 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -236,7 +236,7 @@ React をインポートし、いくつかの style のボタンを追加し、R } ``` -`redirectToCheckout()`関数は支払いのリクエストを検証し、Stripe がホストする支払いページにリダイレクトするか、エラーオブジェクトで解決します。`successUrl`と`cancelUrl`を適切な URL に置き換えてください。 +`redirectToCheckout()` 関数は支払いのリクエストを検証し、Stripe がホストする支払いページにリダイレクトするか、エラーオブジェクトで解決します。`successUrl` と `cancelUrl` を適切な URL に置き換えてください。 ```jsx:title=src/components/checkout.js render() { From 7e2ea28e56032764926aeee40fd86cb593dc9414 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:26:03 +0900 Subject: [PATCH 35/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 2380ab42b..b039e5be3 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -251,7 +251,7 @@ React をインポートし、いくつかの style のボタンを追加し、R } ``` -`render()`関数は style をボタンに適用し、`redirectToCheckout()`関数をボタンの onclick イベントにバインドします。 +`render()` 関数は style をボタンに適用し、`redirectToCheckout()` 関数をボタンの onclick イベントにバインドします。 #### 支払いコンポーネントをホームページにインポートする From b7c8bb4a911911e1d76fc7c0fb5e86bc2b3708a3 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:26:20 +0900 Subject: [PATCH 36/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index b039e5be3..5e0a95c7f 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -255,7 +255,7 @@ React をインポートし、いくつかの style のボタンを追加し、R #### 支払いコンポーネントをホームページにインポートする -`src/pages/index.js`ファイルに移動しましょう。ここがルート URL に表示されるホームページです。他の import の下にあるファイルに新しい支払いコンポーネントを import し、``要素内に``コンポーネントを追加します。`index.js`ファイルは以下のようになります。 +`src/pages/index.js` ファイルに移動しましょう。ここがルート URL に表示されるホームページです。他の import の下にあるファイルに新しい支払いコンポーネントを import し、`` 要素内に `` コンポーネントを追加します。`index.js` ファイルは以下のようになります。 ```jsx:title=src/pages/index.js import React from "react" From 5ee06ea4cada9739ab148a88f342575ed8227350 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:26:35 +0900 Subject: [PATCH 37/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 5e0a95c7f..6ea8f4727 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -284,7 +284,7 @@ const IndexPage = () => ( export default IndexPage ``` -ブラウザで[localhost:8000](http://localhost:8000/)に戻り、`npm run develop`を実行している場合は、大きくて魅力的な"BUY MY BOOK"ボタンが表示されます。さあ、クリックしてみましょう！ +ブラウザで[localhost:8000](http://localhost:8000/)に戻り、`npm run develop` を実行している場合は、大きくて魅力的な"BUY MY BOOK"ボタンが表示されます。さあ、クリックしてみましょう！ ### 発展:ソースプラグインを通じて SKU をインポートする From 680929cdb257c0a8e9d3ef4f704c889097685246 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:26:47 +0900 Subject: [PATCH 38/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 6ea8f4727..da5a8fa83 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -298,7 +298,7 @@ Stripe アカウントから SKU を取得するために使える[gatsby-source npm install gatsby-source-stripe ``` -これで、`gatsby-config`ファイルにプラグイン設定を追加できます。 +これで、`gatsby-config` ファイルにプラグイン設定を追加できます。 ```js:title=gatsby-config.js module.exports = { From 50a00d7123947eafc59ca0d0e718cd6311c58210 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:27:01 +0900 Subject: [PATCH 39/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index da5a8fa83..8b128c6df 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -321,7 +321,7 @@ module.exports = { ``` Stripe アカウントから SKU を取得するにはシークレット API キーを提供する必要があります。シークレットキーは秘密にしておく必要があるので、フロントエンドや Github で絶対に共有しないでください。したがって、環境変数を設定して秘密鍵を保存する必要があります。[Gatsby docs](/docs/environment-variables/)で環境変数の使用法について詳しく読むことができます。 -プロジェクトのルートディレクトリに`.env.development`ファイルを追加してください。 +プロジェクトのルートディレクトリに `.env.development` ファイルを追加してください。 ```text:title=.env.development # Stripe secret API key From 0d7d525fcd93239f0ff1c52ba169db3ca861df48 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:27:18 +0900 Subject: [PATCH 40/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 8b128c6df..493f026e4 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -328,7 +328,7 @@ Stripe アカウントから SKU を取得するにはシークレット API キ STRIPE_SECRET_KEY=sk_test_xxx ``` -定義された環境変数を利用するには`gatsby-config.js`または`gatsby-node.js`で以下のように環境変数を要求する必要があります。 +定義された環境変数を利用するには `gatsby-config.js` または `gatsby-node.js` で以下のように環境変数を要求する必要があります。 ```js:title=gatsby-config.js require("dotenv").config({ From 1eeb8a859d7c6d55ef6fcbe82dd6709ee4473beb Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:27:31 +0900 Subject: [PATCH 41/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 493f026e4..f59875482 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -336,7 +336,7 @@ require("dotenv").config({ }) ``` -最後に、`.gitignore`ファイルで全ての`.env.*`ファイルが除外されていることを確認してください。 +最後に、`.gitignore` ファイルで全ての `.env.*` ファイルが除外されていることを確認してください。 ```text:title=.gitignore # dotenv environment variables files From 3270e30f0d3cd3ae9fac915dc5c3c03039962b6d Mon Sep 17 00:00:00 2001 From: Naoya Shimizu Date: Fri, 7 Feb 2020 22:37:38 +0900 Subject: [PATCH 42/45] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E6=8C=87=E6=91=98=E7=82=B9=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/ecommerce-tutorial/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index f59875482..3b1c7b7ee 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -120,8 +120,7 @@ Stripe アカウントにログインして API 資格情報を表示し、[開 ![Stripe public test key location in Stripe account](stripe-public-test-key.png) -テストモードと本番モードの 2 つのキーがあります: -You have 2 keys in both test mode and production mode: +テストモードと本番モードの 2 つのキーがあります。 - 公開可能キー - シークレットキー From 1181e00392b02b692cc69ece4ad5d615cbc931e8 Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Sat, 8 Feb 2020 19:19:23 +0900 Subject: [PATCH 43/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 3b1c7b7ee..fc1a15c93 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -22,7 +22,7 @@ title: "Gatsby Eコマースチュートリアル" ## なぜ E コマースサイトで Gatsby を使うのか -Gatsby を E コマースのサイトに使うメリットは以下とおりです。 +Gatsby を E コマースのサイトに使うメリットは以下のとおりです。 - 静的サイト固有のセキュリティ - ページを React から静的ファイルに変換する際の超高速パフォーマンス From 486cdcbaa830691f06e2d4892fea2450c6995bbf Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Sat, 8 Feb 2020 19:19:32 +0900 Subject: [PATCH 44/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index fc1a15c93..15406682e 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -208,7 +208,7 @@ const Checkout = class extends React.Component { export default Checkout ``` -#### あなたは何をしましたか？ +#### 何が起こったの？ React をインポートし、いくつかの style のボタンを追加し、React 関数を導入しました。`componentDidMount()`や、`redirectToCheckout()` といった関数は Stripe の機能の中で最も重要です。`componentDidMount()` 関数はコンポーネントが最初に DOM にマウントされた時に起動する React のライフサイクルメソッドであり、Stripe.js クライアントを初期化するのに適した場所です。コードは以下のようになります。 From 1ba71c886e84df6e00dbe3f773dc3790305c6dbb Mon Sep 17 00:00:00 2001 From: Naoya Shimizu <32981554+naoya7076@users.noreply.github.com> Date: Sat, 8 Feb 2020 23:37:14 +0900 Subject: [PATCH 45/45] Update docs/tutorial/ecommerce-tutorial/index.md Co-Authored-By: BSKY --- docs/tutorial/ecommerce-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/ecommerce-tutorial/index.md b/docs/tutorial/ecommerce-tutorial/index.md index 15406682e..230629e00 100644 --- a/docs/tutorial/ecommerce-tutorial/index.md +++ b/docs/tutorial/ecommerce-tutorial/index.md @@ -18,7 +18,7 @@ title: "Gatsby Eコマースチュートリアル" - [発展:ソースプラグインを通じて SKU をインポートする](#発展:ソースプラグインを通じてSKUをインポートする) - [支払いテスト](#支払いテスト) -この発展的なチュートリアルでは、 Gatsby を用いて支払いができる基本的な e コマースサイトの UI を構築を学ぶことができます。[Stripe](https://stripe.com)は支払い処理のバックエンドとして用います。 +この発展的なチュートリアルでは、Gatsby を用いて支払いができる基本的な e コマースサイトの UI を構築を学ぶことができます。[Stripe](https://stripe.com)は支払い処理のバックエンドとして用います。 ## なぜ E コマースサイトで Gatsby を使うのか