# Stripe がオンラインで提供する Checkout ページを作成

# Stripe がオンラインで提供するページ

[Stripe Checkout](https://docs.stripe.com/payments/checkout.md) の実装を可能にするコードのサンプルをご覧ください。このサンプルでは、顧客がサイトのボタンをクリックすると、Stripe によって提供される支払いページにリダイレクトします。このサンプルにはクライアント側およびサーバー側のコードが含まれており、また支払いページは事前に構築されています。

### Stripe Node ライブラリーをインストールする

パッケージをインストールし、それをコードにインポートします。また、まったくゼロから開始していて package.json ファイルが必要な場合には、コードエディターのダウンロードリンクを使用してプロジェクトファイルをダウンロードします。

#### npm

ライブラリーをインストールします。

```bash
npm install --save stripe
```

#### GitHub

または、stripe-node ライブラリーのソースコードを直接 [GitHub から](https://github.com/stripe/stripe-node)ダウンロードします。

### Stripe Ruby ライブラリーをインストールする

Stripe ruby gem をインストールし、require を指定してコードに読み込みます。または、まったくゼロから開始していて Gemfile が必要な場合には、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

#### Terminal

gem をインストールします。

```bash
gem install stripe
```

#### Bundler

この行を Gemfile に追加します。

```bash
gem 'stripe'
```

#### GitHub

または、stripe-ruby gem のソースコードを直接 [GitHub から](https://github.com/stripe/stripe-ruby)ダウンロードします。

### Stripe Java ライブラリーをインストールする

ビルドに依存関係を追加し、ライブラリーをインポートします。まったくゼロから開始していてサンプルの pom.xml ファイル (Maven 用) が必要な場合は、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

#### Maven

POM に以下の依存関係を追加し、{VERSION} を使用するバージョン番号に置き換えます。

```bash
<dependency>\n<groupId>com.stripe</groupId>\n<artifactId>stripe-java</artifactId>\n<version>{VERSION}</version>\n</dependency>
```

#### Gradle

build.gradle ファイルに依存関係を追加し、{VERSION} を使用するバージョン番号に置き換えます。

```bash
implementation "com.stripe:stripe-java:{VERSION}"
```

#### GitHub

JAR を直接 [GitHub から](https://github.com/stripe/stripe-java/releases/latest)ダウンロードします。

### Stripe Python パッケージをインストールする

Stripe パッケージをインストールし、コードにインポートします。まったくゼロから開始していて requirements.txt が必要な場合には、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

#### pip

pip を使用してパッケージをインストールします。

```bash
pip3 install stripe
```

#### GitHub

stripe-python ライブラリのソースコードを [GitHub から](https://github.com/stripe/stripe-python)直接ダウンロードします。

### Stripe PHP ライブラリーをインストールする

Composer を使用してライブラリーをインストールし、シークレット API キーで初期化します。まったくゼロから開始していて composer.json ファイルが必要な場合には、コードエディターのリンクを使用してファイルをダウンロードします。

#### Composer

ライブラリーをインストールします。

```bash
composer require stripe/stripe-php
```

#### GitHub

または、stripe-php ライブラリーのソースコードを直接 [GitHub から](https://github.com/stripe/stripe-php)ダウンロードします。

### サーバーを設定する

ビルドに依存関係を追加し、ライブラリーをインポートします。まったくゼロから開始していて go.mod ファイルが必要な場合には、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

#### Go

必ず Go モジュールを使用してを初期化してください。

```bash
go get -u github.com/stripe/stripe-go/v85
```

#### GitHub

または、stripe-go モジュールのソースコードを直接 [GitHub から](https://github.com/stripe/stripe-go)ダウンロードします。

### Stripe.net ライブラリーをインストールする

.NET または NuGet でパッケージをインストールします。まったくゼロから開始する場合には、設定済みの .csproj ファイルが含まれるファイルをダウンロードします。

#### dotnet

ライブラリーをインストールします。

```bash
dotnet add package Stripe.net
```

#### NuGet

ライブラリーをインストールします。

```bash
Install-Package Stripe.net
```

#### GitHub

または、Stripe.net ライブラリーのソースコードを直接 [GitHub から](https://github.com/stripe/stripe-dotnet)ダウンロードします。

### Stripe ライブラリーをインストールする

パッケージをインストールし、コードにインポートします。まったくゼロから開始していて `package.json` が必要な場合には、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

ライブラリーをインストールします。

```bash
npm install --save stripe @stripe/stripe-js next
```

### Checkout セッションを作成する

[Checkout セッション](https://docs.stripe.com/api/checkout/sessions.md)を作成するエンドポイントをサーバーに追加します。Checkout セッションは、ラインアイテム、注文金額と通貨、および受け付け可能な支払い方法など、Stripe がオンラインで提供する決済ページで顧客に表示される内容を制御します。カード決済とその他の一般的な支払い方法はデフォルトで有効化されますが、[Stripe ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で支払い方法を直接有効/無効にすることもできます。

### Checkout セッションを作成する

[Checkout Session (セッション)](https://docs.stripe.com/api/checkout/sessions.md) を作成する[ルートハンドラー](https://nextjs.org/docs/app/building-your-application/routing/route-handlers)をアプリケーションに追加します。Checkout セッションは、項目、注文金額と通貨、および受け付け可能な決済手段など、決済ページで顧客に表示する内容を制御します。カードやその他の一般的な決済手段はデフォルトで有効になっていますが、[Stripe ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で決済手段を直接有効 / 無効にすることもできます。

### 販売する商品を定義する

価格や在庫といった重要な情報は常に貴社のサーバーに置き、クライアント側から不正操作ができないようにします。[事前に定義された価格 ID](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted#create-product-prices-upfront) を使用して Checkout Session を作成する際に、または [price_data](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items-price_data) を使用してその場で商品情報を定義します。

### モードを選択する

さまざまな取引タイプを処理するには、`mode` パラメーターを調整します。1 回限りの決済の場合は、`payment` を使用します。[サブスクリプション](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md?payment-ui=checkout&ui=stripe-hosted)で継続決済を開始するには、`mode` を `subscription` に切り替えます。[今後の決済](https://docs.stripe.com/payments/save-and-reuse.md?platform=web&ui=stripe-hosted)を設定する場合は、`mode` を `setup` に設定します。

### 成功 URL を指定

成功ページの URL を指定します。Stripe が顧客をリダイレクトできるように、一般にアクセスできるようにします。

### Checkout にリダイレクトする

セッションの作成後に、レスポンスで返された Checkout ページの URL に顧客をリダイレクトします。

### 成功ページを追加する

Checkout セッションの `success_url` として指定した URL に成功ページを作成し、注文確認メッセージや注文詳細を顧客に表示します。決済フローを正常に完了した顧客は、Stripe によってこのページにリダイレクトされます。

### 注文のプレビューページを追加する

最後に、顧客の注文のプレビューを表示するページを追加します。顧客が注文を確認したり変更したりできるようにします。顧客が Checkout ページに送られるとすぐに注文が確定され、新しい Checkout セッションを作成しない限り変更できなくなります。

### 注文のプレビューページを追加する

購入者の注文のプレビューを表示するページを追加します。各自で注文を確認したり変更したりできるようにします。購入者が Checkout ページに転送されるとすぐに注文が確定され、新しい Checkout セッションを作成しない限り変更できなくなります。

### 決済ボタンを追加する

注文のプレビューページにボタンを追加します。購入者がこのボタンをクリックすると、Stripe がオンラインで提供する支払いページにリダイレクトされます。

### 決済ボタンを追加する

注文のプレビューページにボタンを追加します。顧客がこのボタンをクリックすると、Stripe 上のオンライン決済フォームにリダイレクトされます。

### 注文のプレビューページを追加する

`pages/` にファイルを追加して、顧客の注文のプレビューを表示するページを作成します。顧客が注文を確認したり変更したりできるようにします。顧客が Checkout ページに送られるとすぐに注文が確定され、新しい Checkout セッションを作成しない限り変更できなくなります。

### Checkout セッションを取得する

注文のプレビューページにボタンを追加します。顧客がこれをクリックしたら、顧客を新しい Checkout セッションにリダイレクトするようルートハンドラーにリクエストします。

### Checkout からのリダイレクトを処理する

顧客がリダイレクトされあなたのページに戻ったときにメッセージを表示します。支払いが成功するまで待ってから、注文のフルフィルメント (発送やメール領収書の送信など) を行います。詳細は、[Checkout での注文のフルフィルメント](https://docs.stripe.com/checkout/fulfillment.md)をご覧ください。

### 環境変数を設定する

公開可能キーとシークレットキーを `.env` ファイルに追加します。これらのキーは Next.js によって自動的に[環境変数](https://nextjs.org/docs/basic-features/environment-variables)としてアプリケーションに読み込まれます。Webhook をリッスンする場合は、Webhook シークレットも含めます。このシークレットは[ダッシュボード](https://dashboard.stripe.com/webhooks)または [Stripe CLI](https://docs.stripe.com/stripe-cli.md) で作成できます。

### アプリケーションを実行する前

ローカル開発時に `“proxy”: “<http://localhost:4242>”` を `package.json` ファイルに追加します。

### アプリケーションを実行する

サーバーを起動し、<http://localhost:4242/checkout.html> に移動します

### アプリケーションを実行する

サーバーを起動し、<http://localhost:3000/checkout> に移動します

### アプリケーションを実行する

`npm run dev` でアプリを起動し、<http://localhost:3000> に移動します

### 試してみる

決済ボタンをクリックすると、Stripe Checkout ページにリダイレクトされます。テストカードのいずれかを使用して支払いをシミュレートします。

| Scenario                            | Card Number      |
| ----------------------------------- | ---------------- |
| Payment succeeds                    | 4242424242424242 |
| Payment requires 3DS authentication | 4000002500003155 |
| Payment is declined                 | 4000000000009995 |

## 完了しました。

Checkout の基本的な実装が機能するようになりました。次に、決済ページのデザインをカスタマイズする方法をご紹介します。

### 決済ページをカスタマイズする

オンラインの Checkout ページのデザインと動作をカスタマイズするには、以下のいずれかの方法を使用します。

- [ブランディング設定](https://dashboard.stripe.com/settings/branding)でロゴとカラーテーマとフォントを追加する。
- [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions/create.md) を使用し、住所の収集や顧客データの事前入力などの追加機能を有効化します。

### 顧客データを事前入力する

[customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) を使用して、メールの入力フィールドに顧客のメールアドレスを事前入力します。また、[Customer (顧客)](https://docs.stripe.com/api/customers.md) ID を `customer` フィールドに渡して、Customer に保存されたメールアドレスをメールアドレスのフィールドに事前入力することもできます。

### 送信ボタンを選択する

[submit_type](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-submit_type) を設定し、Checkout の送信ボタンに表示されるコピーを設定します。送信タイプは 4 種類あります。

### 請求先詳細および配送先詳細を収集する

[billing_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) と [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) を使用して、顧客の住所を収集します。[shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) には、`allowed_countries` のリストが必要です。Checkout では、許可された国のリストがページのドロップダウンメニューに表示されます。

### カスタマイズされたページをプレビューする

購入ボタンをクリックし、これらの追加フィールドを含む Stripe Checkout ページのサンプルを表示します。[Checkout をカスタマイズ](https://docs.stripe.com/payments/checkout/customization.md)するさまざまな方法をご覧ください。

### 税金の徴収を自動化する

Stripe 取引の適切な税額を計算して徴収します。[Stripe Tax](https://docs.stripe.com/tax.md) と [Checkout への追加](https://docs.stripe.com/tax/checkout.md)方法の詳細をご確認ください。

### ダッシュボードで Stripe Tax を設定する

[Stripe Tax を有効にする](https://dashboard.stripe.com/tax)ことで、納税義務を監視し、税金を自動徴収し、還付申告に必要な申告書を利用できます。

### 税金の自動計算パラメーターを追加する

`automatic_tax` パラメーターを `enabled: true` に設定します。

### 新規顧客とリピーター

デフォルトでは、Checkout は必要な場合にのみ (サブスクリプションの場合など) [Customer (顧客)](https://docs.stripe.com/api/customers.md) を作成します。それ以外の場合、Checkout は[ゲスト顧客](https://docs.stripe.com/payments/checkout/guest-customers.md)を使用してダッシュボードで支払いをグループ化します。必要に応じて、必ず新規顧客を作成するか、リピーターを指定するように Checkout を設定できます。

### 必ず顧客を作成する

顧客が指定されていない場合でも必ず顧客を作成するには、[customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) に `'always'` を設定します。

### リピーターを指定する

Checkout Session を既存の顧客に関連付けるには、セッションの作成時に[顧客](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer)を指定します。Accounts v2 を使用して顧客をモデル化する場合は、[customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) フィールドに Account ID を渡して、関連付けられたメールアドレスを事前入力することもできます。[v1 Customer と v2 Account の違い](https://docs.stripe.com/connect/use-accounts-as-customers.md)について、詳細をご確認ください。

// This test secret API key is a placeholder. Don't include personal details in requests with this key.
// To see your test secret API key embedded in code samples, sign in to your Stripe account.
// You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
const stripe = require('stripe')('<<YOUR_SECRET_KEY>>');
  const session = await stripe.checkout.sessions.create({
    customer_email: 'customer@example.com',
    submit_type: 'donate',
    billing_address_collection: 'auto',
    shipping_address_collection: {
      allowed_countries: ['US', 'CA'],
    },
    line_items: [
      {
        // Provide the exact Price ID (for example, price_1234) of the product you want to sell
        price: '{{PRICE_ID}}',
        quantity: 1,
      },
    ],
    mode: {{CHECKOUT_MODE}},
    success_url: `${YOUR_DOMAIN}/success.html`,
    success_url: `${YOUR_DOMAIN}?success=true`,
    automatic_tax: {enabled: true},
    customer_creation: 'always',
    // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
    // customer: '{{CUSTOMER_ID}}'
  });

  res.redirect(303, session.url);
{
  "name": "stripe-sample",
  "version": "1.0.0",
  "description": "A sample Stripe implementation",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "stripe-samples",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "stripe": "^21.0.1"
  }
}
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0",
    "stripe": "21.0.1"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
\# This test secret API key is a placeholder. Don't include personal details in requests with this key.
# To see your test secret API key embedded in code samples, sign in to your Stripe account.
# You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
Stripe.api_key = '<<YOUR_SECRET_KEY>>'
  session = Stripe::Checkout::Session.create({
    customer_email: 'customer@example.com',
    submit_type: 'donate',
    billing_address_collection: 'required',
    shipping_address_collection: {
      allowed_countries: ['US', 'CA'],
    },
    line_items: [{
      \# Provide the exact Price ID (for example, price_1234) of the product you want to sell
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: {{CHECKOUT_MODE}},
    success_url: YOUR_DOMAIN + '/success.html',
    success_url: YOUR_DOMAIN + '?success=true',
    automatic_tax: {enabled: true},
    customer_creation: 'always',
    \# Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
    # customer: '{{CUSTOMER_ID}}'
  })
  redirect session.url, 303
import stripe
\# This test secret API key is a placeholder. Don't include personal details in requests with this key.
# To see your test secret API key embedded in code samples, sign in to your Stripe account.
# You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
stripe.api_key = '<<YOUR_SECRET_KEY>>'
        checkout_session = stripe.checkout.Session.create(
            customer_email='customer@example.com',
            submit_type='donate',
            billing_address_collection='auto',
            shipping_address_collection={
              'allowed_countries': ['US', 'CA'],
            },
            line_items=[
                {
                    \# Provide the exact Price ID (for example, price_1234) of the product you want to sell
                    'price': '{{PRICE_ID}}',
                    'quantity': 1,
                },
            ],
            mode={{CHECKOUT_MODE}},
            success_url=YOUR_DOMAIN + '/success.html',
            success_url=YOUR_DOMAIN + '?success=true',
            automatic_tax={'enabled': True},
            customer_creation='always',
            \# Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
            # customer='{{CUSTOMER_ID}}'
        )
    return redirect(checkout_session.url, code=303)
certifi==2026.1.4
chardet==5.2.0
click==8.3.1
Flask==3.1.2
idna==3.11
itsdangerous==2.2.0
Jinja2==3.1.6
MarkupSafe==3.0.3
requests==2.32.5
stripe==15.0.0
toml==0.10.2
Werkzeug==3.1.5
\Stripe\Stripe::setApiKey($stripeSecretKey);
$checkout_session = \Stripe\Checkout\Session::create([
  'customer_email' => 'customer@example.com',
  'submit_type' => 'donate',
  'billing_address_collection' => 'required',
  'shipping_address_collection' => [
    'allowed_countries' => ['US', 'CA'],
  ],
  'line_items' => [[
    \# Provide the exact Price ID (for example, price_1234) of the product you want to sell
    'price' => '{{PRICE_ID}}',
    'quantity' => 1,
  ]],
  'mode' => {{CHECKOUT_MODE}},
  'success_url' => $YOUR_DOMAIN . '/success.html',
  'success_url' => $YOUR_DOMAIN . '?success=true',
  'automatic_tax' => [
    'enabled' => true,
  ],
  'customer_creation' => 'always',
  \# Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
  # 'customer' => '{{CUSTOMER_ID}}'
]);

header("HTTP/1.1 303 See Other");
header("Location: " . $checkout_session->url);
$stripeSecretKey = '<<YOUR_SECRET_KEY>>';
        // This test secret API key is a placeholder. Don't include personal details in requests with this key.
        // To see your test secret API key embedded in code samples, sign in to your Stripe account.
        // You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
        services.AddSingleton(new StripeClient("<<YOUR_SECRET_KEY>>"));
                CustomerEmail = "customer@example.com",
                SubmitType = "donate",
                BillingAddressCollection = "auto",
                ShippingAddressCollection = new SessionShippingAddressCollectionOptions
                {
                  AllowedCountries = new List<string>
                  {
                    "US",
                    "CA",
                  },
                },
                LineItems = new List<SessionLineItemOptions>
                {
                  new SessionLineItemOptions
                  {
                    // Provide the exact Price ID (for example, price_1234) of the product you want to sell
                    Price = "{{PRICE_ID}}",
                    Quantity = 1,
                  },
                },
                Mode = {{CHECKOUT_MODE}},
                SuccessUrl = domain + "/success.html",
                SuccessUrl = domain + "?success=true",
                AutomaticTax = new SessionAutomaticTaxOptions { Enabled = true },
                CustomerCreation = "always",
                // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
                // Customer="cus_RnhPlBnbBbXapY",
            Session session = _client.V1.Checkout.Sessions.Create(options);

            Response.Headers.Add("Location", session.Url);
            return new StatusCodeResult(303);
    "github.com/stripe/stripe-go/v85"
  sc := stripe.NewClient("<<YOUR_SECRET_KEY>>")
  params := &stripe.CheckoutSessionCreateParams{
    CustomerEmail: stripe.String("customer@example.com"),
    SubmitType: stripe.String("donate"),
    BillingAddressCollection: stripe.String("auto"),
    ShippingAddressCollection: &stripe.CheckoutSessionCreateShippingAddressCollectionParams{
      AllowedCountries: stripe.StringSlice([]string{
        "US",
        "CA",
      }),
    },
    LineItems: []*stripe.CheckoutSessionCreateLineItemParams{
      &stripe.CheckoutSessionCreateLineItemParams{
        // Provide the exact Price ID (for example, price_1234) of the product you want to sell
        Price: stripe.String("{{PRICE_ID}}"),
        Quantity: stripe.Int64(1),
      },
    },
    Mode: {{CHECKOUT_MODE}},
    SuccessURL: stripe.String(domain + "/success.html"),
    SuccessURL: stripe.String(domain + "?success=true"),
    AutomaticTax: &stripe.CheckoutSessionCreateAutomaticTaxParams{Enabled: stripe.Bool(true)},
    CustomerCreation: stripe.String(string(stripe.CheckoutSessionCustomerCreationAlways)),
    // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
    // Customer:   stripe.String("{{CUSTOMER_ID}}"),
  }

  s, err := sc.V1CheckoutSessions.Create(context.TODO(), params)

  if err != nil {
    log.Printf("sc.V1CheckoutSessions.Create: %v", err)
  }

  http.Redirect(w, r, s.URL, http.StatusSeeOther)
require github.com/stripe/stripe-go/v85 v85.0.0
    // This test secret API key is a placeholder. Don't include personal details in requests with this key.
    // To see your test secret API key embedded in code samples, sign in to your Stripe account.
    // You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
    Stripe.apiKey = "<<YOUR_SECRET_KEY>>";
        SessionCreateParams params =
          SessionCreateParams.builder()
            .setCustomerEmail("customer@example.com")
            .setSubmitType(SessionCreateParams.SubmitType.DONATE)
            .setBillingAddressCollection(SessionCreateParams.BillingAddressCollection.REQUIRED)
            .setShippingAddressCollection(
              SessionCreateParams.ShippingAddressCollection.builder()
                .addAllowedCountry(SessionCreateParams.ShippingAddressCollection.AllowedCountry.CA)
                .addAllowedCountry(SessionCreateParams.ShippingAddressCollection.AllowedCountry.US)
                .build())
            .setMode({{CHECKOUT_MODE}})
            .setSuccessUrl(YOUR_DOMAIN + "/success.html")
            .setSuccessUrl(YOUR_DOMAIN + "?success=true")
            .setAutomaticTax(
              SessionCreateParams.AutomaticTax.builder()
                .setEnabled(true)
                .build())
            .setCustomerCreation(SessionCreateParams.CustomerCreation.ALWAYS)
            // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
            // .setCustomer("{{CUSTOMER_ID}}")
            .addLineItem(
              SessionCreateParams.LineItem.builder()
                .setQuantity(1L)
                // Provide the exact Price ID (for example, price_1234) of the product you want to sell
                .setPrice("{{PRICE_ID}}")
                .build())
            .build();
      response.redirect(session.getUrl(), 303);
      return "";
    <script src="https://js.stripe.com/dahlia/stripe.js"></script>
      <div class="product">
        <img src="https://i.imgur.com/EHyR2nP.png" alt="The cover of Stubborn Attachments" />
        <div class="description">
          <h3>Stubborn Attachments</h3>
          <h5>$20.00</h5>
        </div>
      </div>
      <form action="/create-checkout-session" method="POST">
        <button type="submit" id="checkout-button">Checkout</button>
      </form>
      <form action="/checkout.php" method="POST">
        <button type="submit" id="checkout-button">Checkout</button>
      </form>
<body>
  <section>
    <p>
      We appreciate your business! If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </section>
</body>
<body>
  <section>
    <p>Forgot to add something to your cart? Shop around then come back to pay!</p>
  </section>
</body>
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "stripe": "^8.202.0"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://127.0.0.1:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://127.0.0.1:4242",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
    <div className="product">
      <img
        src="https://i.imgur.com/EHyR2nP.png"
        alt="The cover of Stubborn Attachments"
      />
      <div className="description">
      <h3>Stubborn Attachments</h3>
      <h5>$20.00</h5>
      </div>
    </div>
    <form action="/create-checkout-session" method="POST">
      <button type="submit">
        Checkout
      </button>
    </form>
    <form action="/checkout.php" method="POST">
      <button type="submit">
        Checkout
      </button>
    </form>
    // Check to see if this is a redirect back from Checkout
    const query = new URLSearchParams(window.location.search);

    if (query.get("success")) {
      setMessage("Order placed! You will receive an email confirmation.");
    }

    if (query.get("canceled")) {
      setMessage(
        "Order canceled -- continue to shop around and checkout when you're ready."
      );
    }
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0",
    "stripe": "^8.202.0"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
    // Create Checkout Sessions from body params.
    const session = await stripe.checkout.sessions.create({
      customer_email: 'customer@example.com',
      submit_type: 'donate',
      billing_address_collection: 'auto',
      shipping_address_collection: {
        allowed_countries: ['US', 'CA'],
      },
      line_items: [
        {
          // Provide the exact Price ID (for example, price_1234) of the product you want to sell
          price: '{{PRICE_ID}}',
          quantity: 1,
        },
      ],
      mode: {{CHECKOUT_MODE}},
      success_url: `${origin}/success?session_id={CHECKOUT_SESSION_ID}`,
      automatic_tax: {enabled: true},
    });
    return NextResponse.redirect(session.url, 303)
\# https://dashboard.stripe.com/apikeys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<<YOUR_PUBLISHABLE_KEY>>
STRIPE_SECRET_KEY=<<YOUR_SECRET_KEY>>
\# Set this environment variable to support webhooks — https://stripe.com/docs/webhooks#verify-events
# STRIPE_WEBHOOK_SECRET=whsec_12345
export default async function IndexPage({ searchParams }) {
    <form action="/api/checkout_sessions" method="POST">
      <section>
        <button type="submit" role="link">
          Checkout
        </button>
      </section>
    </form>
import 'server-only'

import Stripe from 'stripe'

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)
export default async function Success({ searchParams }) {
  const { session_id } = await searchParams

  if (!session_id)
    throw new Error('Please provide a valid session_id (`cs_test_...`)')

  const {
    status,
    customer_details: { email: customerEmail }
  } = await stripe.checkout.sessions.retrieve(session_id, {
    expand: ['line_items', 'payment_intent']
  })

  if (status === 'open') {
    return redirect('/')
  }

  if (status === 'complete') {
    return (
      <section id="success">
        <p>
          We appreciate your business! A confirmation email will be sent to{' '}
          {customerEmail}. If you have any questions, please email{' '}
          <a href="mailto:orders@example.com">orders@example.com</a>.
        </p>
      </section>
    )
  }
}
1. Build the server

~~~
pip3 install -r requirements.txt
~~~
1. Build the server

~~~
bundle install
~~~
1. Build the server

~~~
composer install
~~~
1. Build the server

~~~
dotnet restore
~~~
1. Build the server

~~~
mvn package
~~~

2. Run the server

~~~
export FLASK_APP=server.py
python3 -m flask run --port=4242
~~~

2. Run the server

~~~
ruby server.rb -o 0.0.0.0
~~~

2. Run the server

~~~
php -S 127.0.0.1:4242 --docroot=public
~~~

2. Run the server

~~~
dotnet run
~~~

2. Run the server

~~~
java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server
~~~

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

If you run into an error, when running npm start, try running the following code and starting again:
~~~
export NODE_OPTIONS=--openssl-legacy-provider
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)
1. Run the server

~~~
go run server.go
~~~

2. Build the client app

~~~
npm install
~~~

3. Run the client app

~~~
npm start
~~~

4. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)
1. Run the server

~~~
go run server.go
~~~

2. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)
1. Build the application

~~~
npm install
~~~

2. Run the application

~~~
npm start
~~~

3. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)
1. Build the server

~~~
npm install
~~~

2. Run the server

~~~
npm start
~~~

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)
\### Development

1. Build the application
~~~shell
$ npm install
~~~

2. _Optional_: download and run the [Stripe CLI](https://stripe.com/docs/stripe-cli)
~~~shell
$ stripe listen --forward-to localhost:3000/api/webhooks
~~~

3. Run the application
~~~shell
$ STRIPE_WEBHOOK_SECRET=$(stripe listen --print-secret) npm run dev
~~~

4. Go to [localhost:3000](http://localhost:3000)

### Production

1. Build the application
~~~shell
$ npm install

$ npm build
~~~

2. Run the application
~~~shell
$ npm start
~~~
## 次のステップ

#### [注文のフルフィルメントを履行](https://docs.stripe.com/checkout/fulfillment.md)

支払いの成功後に注文のフルフィルメントを実行して、その他の重要なイベントを処理するためのイベントの送信先を設定します。

#### [入金を受け取る](https://docs.stripe.com/payouts.md)

Stripe アカウントから銀行口座に売上を移動する方法をご紹介します。

#### [支払いの返金とキャンセル](https://docs.stripe.com/refunds.md)

Stripe API またはダッシュボードを使用し、返金のリクエストを処理します。

#### [顧客管理](https://docs.stripe.com/customer-management.md)

顧客が決済情報、請求書、サブスクリプションを自分で管理できるようにします。

#### [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md)

自動的に顧客の現地通貨で価格を表示します。