Thanks for your order!

` にマウントします。Checkout が iframe でレンダリングされ、支払い情報が HTTPS 接続経由で Stripe に安全に送信されます。 Checkout を別の iframe 内に配置しないでください。一部の支払い方法では支払いを確定するために別のページにリダイレクトする必要があるからです。 ### Checkout を初期化する子コンポーネントが埋め込み型 Checkout コンシューマーを介して Stripe サービスにアクセスできるようにするには、`loadStripe` の結果として生成された promise と、`option` として client secret を埋め込み型 Checkout プロバイダーに渡します。 ### エンドポイントを作成して Checkout セッションを取得するエンドポイントを追加して Checkout セッションのステータスを取得します。 ### 戻り先ページを追加する顧客に注文情報を表示するには、Checkout セッション `return_url` として提供する URL の戻り先ページを作成します。顧客は支払いが完了すると、このページにリダイレクトされます。 ### 戻り先コンポーネントを追加する顧客に注文情報を表示するには、Checkout セッション `return_url` として提供する URL の新しいルートと戻り先コンポーネントを追加します。顧客は支払いが完了すると、このページにリダイレクトされます。 ### 戻り先ページを追加する顧客に注文情報を表示するには、例に示すように Checkout Session の `return_url` として指定した URL の戻り先ページを `app/return/page.jsx` に追加します。決済が完了すると、顧客はこのページにリダイレクトされます。 ### Checkout セッションを取得する戻り先ページが読み込まれたらすぐに、サーバー上のエンドポイントにリクエストを行います。URL の Checkout セッション ID を使用して Checkout セッションのステータスを取得します。 ### セッションを処理する次のステータスを使用してセッションの結果を処理します。 - `complete`: 支払いが成功しました。Checkout セッションの情報を使用して成功ページをレンダリングします。 - `open`: 支払いが失敗またはキャンセルされました。顧客がやり直せるように Checkout を再マウントします。 ### 環境変数を設定する公開可能キーとシークレットキーを `.env` ファイルに追加します。これは Next.js によって自動的に[環境変数](https://nextjs.org/docs/basic-features/environment-variables)としてアプリケーションに読み込まれます。 Webhook エンドポイントごとに一意の署名シークレットがあります。Webhook は、ダッシュボードの[ワークベンチ](https://docs.stripe.com/workbench.md)で管理されます。ワークベンチの [Webhook タブ](https://dashboard.stripe.com/workbench/webhooks)にある Webhook エンドポイントの送信先の詳細ビューでシークレットを確認できます。Stripe CLI を使用してローカルでテストしている場合は、`stripe listen` コマンドを使用して CLI 出力からシークレットを取得することもできます。 Webhook エンドポイント署名シークレットを含めて[イベント](https://docs.stripe.com/events/set-up-events.md)をリッスンするには、ワークベンチの[イベントの送信先](https://dashboard.stripe.com/workbench/webhooks)タブに移動するか、[Stripe CLI](https://docs.stripe.com/cli.md) を使用します。 ### アプリケーションを実行するサーバーを起動し、に移動します ### アプリケーションを実行するサーバーを起動し、に移動します ### アプリケーションを実行する `npm run dev` でアプリを起動し、に移動します ### 試してみる支払いボタンをクリックして支払いを完了します。指定した戻り先ページにリダイレクトされます。戻り先ページが表示され、ダッシュボードで[成功した支払い](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful)の一覧に支払いが表示されれば、実装は正常に機能しています。以下のテストカードを使用し、支払いをシミュレーションします。 | Scenario | Card Number | | --- | --- | | Payment succeeds | 4242424242424242 | | Payment requires 3DS authentication | 4000002500003155 | | Payment is declined | 4000000000009995 | ## これで完了です。 Checkout の基本的な実装が機能するようになりました。次に、決済ページのデザインをカスタマイズする方法をご紹介します。 ### 決済ページをカスタマイズする以下の方法で、埋め込みフォームのデザインを[カスタマイズ](https://docs.stripe.com/payments/checkout/customization.md) します。 - [ブランディング設定](https://dashboard.stripe.com/settings/branding/checkout)でカラーテーマとフォントを追加する。 - [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 に保存されたメールアドレスをメールアドレスのフィールドに事前入力することもできます。 ### 送信ボタンを選択する Checkout の送信ボタンのテキストを `pay`、`donate`、`book` のいずれかに変更するため、[submit_type](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-submit_type) を設定します。デフォルトのテキストは `pay` です。 ### 請求先詳細および配送先詳細を収集する [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 取引の適切な税額を計算して徴収します。[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` に設定します。 ### Link によるリピーター顧客向けの自動入力 [Link](https://docs.stripe.com/payments/link.md) を使用すると、決済および配送先の詳細が自動的に入力されるため、リピーター顧客はより迅速に購入手続きを完了できます。Link は、組み込みの Checkout ではデフォルトで利用できます。顧客がメールアドレスを入力した際に Link アカウントを保持している場合、ワンタイムコードで認証し、保存されている詳細情報を自動的に入力できます。 ### 新規顧客とリピーターデフォルトでは、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 を既存の顧客に関連付けるには、セッションの作成時に [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) を指定します。顧客を顧客として設定された Account オブジェクトとして表す場合、[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/accounts-v2/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. // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. const stripe = require('stripe')('<>'); const YOUR_DOMAIN = 'http://localhost:4242'; const YOUR_DOMAIN = 'http://localhost:3000'; const session = await stripe.checkout.sessions.create({ ui_mode: 'embedded_page', 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}}, return_url: `${YOUR_DOMAIN}/return?session_id={CHECKOUT_SESSION_ID}`, return_url: `${YOUR_DOMAIN}/return.html?session_id={CHECKOUT_SESSION_ID}`, 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.send({clientSecret: session.client_secret}); app.get('/session-status', async (req, res) => { const session = await stripe.checkout.sessions.retrieve(req.query.session_id); res.send({ status: session.status, customer_email: session.customer_details.email }); }); { "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": "^23.0.0" } } { "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": "23.0.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 \"npm run start-client\" \"npm run 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. \# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. client = Stripe::StripeClient.new('<>') YOUR_DOMAIN = 'http://localhost:4242' YOUR_DOMAIN = 'http://localhost:3000' session = client.v1.checkout.sessions.create({ ui_mode: 'embedded_page', 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}}, return_url: YOUR_DOMAIN + '/return.html?session_id={CHECKOUT_SESSION_ID}', return_url: YOUR_DOMAIN + '/return?session_id={CHECKOUT_SESSION_ID}', 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}}' }) {clientSecret: session.client_secret}.to_json get '/session-status' do session = client.v1.checkout.sessions.retrieve(params[:session_id]) {status: session.status, customer_email: session.customer_details.email}.to_json end 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. \# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. client = stripe.StripeClient('<>') YOUR_DOMAIN = 'http://localhost:4242' YOUR_DOMAIN = 'http://localhost:3000' session = client.v1.checkout.sessions.create(params={ 'ui_mode': 'embedded_page', '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}}, 'return_url': YOUR_DOMAIN + '/return.html?session_id={CHECKOUT_SESSION_ID}', 'return_url': YOUR_DOMAIN + '/return?session_id={CHECKOUT_SESSION_ID}', '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 jsonify(clientSecret=session.client_secret) @app.route('/session-status', methods=['GET']) def session_status(): session = client.v1.checkout.sessions.retrieve(request.args.get('session_id')) return jsonify(status=session.status, customer_email=session.customer_details.email) 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==16.0.0 toml==0.10.2 Werkzeug==3.1.5 $stripe = new \Stripe\StripeClient($stripeSecretKey); $YOUR_DOMAIN = 'http://localhost:4242'; $YOUR_DOMAIN = 'http://localhost:3000'; $checkout_session = $stripe->checkout->sessions->create([ 'ui_mode' => 'embedded_page', '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}}, 'return_url' => $YOUR_DOMAIN . '/return.html?session_id={CHECKOUT_SESSION_ID}', 'return_url' => $YOUR_DOMAIN . '/return?session_id={CHECKOUT_SESSION_ID}', '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}}' ]); echo json_encode(array('clientSecret' => $checkout_session->client_secret)); try { // retrieve JSON from POST body $jsonStr = file_get_contents('php://input'); $jsonObj = json_decode($jsonStr); $session = $stripe->checkout->sessions->retrieve($jsonObj->session_id); echo json_encode(['status' => $session->status, 'customer_email' => $session->customer_details->email]); http_response_code(200); } catch (Error $e) { http_response_code(500); echo json_encode(['error' => $e->getMessage()]); } // Before testing, use a sandbox secret key from the Stripe account used by the Stripe CLI. // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. $stripeSecretKey = '<>'; // 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. // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. services.AddSingleton(new StripeClient("<>")); var domain = "http://localhost:4242"; var domain = "http://localhost:3000"; UiMode = "embedded_page", CustomerEmail = "customer@example.com", SubmitType = "donate", BillingAddressCollection = "auto", ShippingAddressCollection = new SessionShippingAddressCollectionOptions { AllowedCountries = new List { "US", "CA", }, }, LineItems = new List { 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}}, ReturnUrl = domain + "/return.html?session_id={CHECKOUT_SESSION_ID}", ReturnUrl = domain + "/return?session_id={CHECKOUT_SESSION_ID}", 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); return Json(new {clientSecret = session.ClientSecret}); [Route("session-status")] [ApiController] public class SessionStatusController : Controller { private readonly StripeClient _client; public SessionStatusController(StripeClient client) { _client = client; } [HttpGet] public ActionResult SessionStatus([FromQuery] string session_id) { Session session = _client.V1.Checkout.Sessions.Get(session_id); return Json(new {status = session.Status, customer_email = session.CustomerDetails.Email}); } } "github.com/stripe/stripe-go/v87" // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. sc := stripe.NewClient("<>") domain := "http://localhost:4242" domain := "http://localhost:3000" params := &stripe.CheckoutSessionCreateParams{ UIMode: stripe.String("embedded_page"), ReturnURL: stripe.String(domain + "/return.html?session_id={CHECKOUT_SESSION_ID}"), ReturnURL: stripe.String(domain + "/return?session_id={CHECKOUT_SESSION_ID}"), CustomerEmail: stripe.String("customer@example.com"), SubmitType: stripe.String("donate"), BillingAddressCollection: stripe.String("auto"), ShippingAddressCollection: &stripe.CheckoutSessionShippingAddressCollectionParams{ AllowedCountries: stripe.StringSlice([]string{ "US", "CA", }), }, LineItems: []*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: stripe.String("{{CHECKOUT_MODE}}"), AutomaticTax: &stripe.CheckoutSessionAutomaticTaxParams{Enabled: stripe.Bool(true)}, CustomerCreation: stripe.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) } writeJSON(w, struct { ClientSecret string `json:"clientSecret"` }{ ClientSecret: s.ClientSecret, }) func retrieveCheckoutSession(sc *stripe.Client, w http.ResponseWriter, r *http.Request) { s, _ := sc.V1CheckoutSessions.Retrieve(context.TODO(), r.URL.Query().Get("session_id"), nil) writeJSON(w, struct { Status string `json:"status"` CustomerEmail string `json:"customer_email"` }{ Status: string(s.Status), CustomerEmail: string(s.CustomerDetails.Email), }) } require github.com/stripe/stripe-go/v87 v87.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. // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. StripeClient client = new StripeClient("<>"); String YOUR_DOMAIN = "http://localhost:4242"; String YOUR_DOMAIN = "http://localhost:3000"; SessionCreateParams params = SessionCreateParams.builder() .setUiMode(SessionCreateParams.UiMode.EMBEDDED_PAGE) .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}}) .setReturnUrl(YOUR_DOMAIN + "/return?session_id={CHECKOUT_SESSION_ID}") .setReturnUrl(YOUR_DOMAIN + "/return.html?session_id={CHECKOUT_SESSION_ID}") .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(); Map map = new HashMap(); map.put("clientSecret", session.getRawJsonObject().getAsJsonPrimitive("client_secret").getAsString()); return map; get("/session-status", (request, response) -> { Session session = client.v1().checkout().sessions().retrieve(request.queryParams("session_id")); Map map = new HashMap(); map.put("status", session.getRawJsonObject().getAsJsonPrimitive("status").getAsString()); map.put("customer_email", session.getRawJsonObject().getAsJsonObject("customer_details").getAsJsonPrimitive("email").getAsString()); return map; }, gson::toJson);

We appreciate your business! A confirmation email will be sent to {customerEmail}. If you have any questions, please email orders@example.com.

) } return null; } } /> { "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({ ui_mode: 'embedded_page', 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: 'payment', return_url: `${origin}/return?session_id={CHECKOUT_SESSION_ID}`, automatic_tax: {enabled: true}, }) import { EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js' import { loadStripe } from '@stripe/stripe-js' import { fetchClientSecret } from '../actions/stripe' const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY) \# https://dashboard.stripe.com/apikeys NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<> STRIPE_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 Return({ searchParams }) { 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 (

We appreciate your business! A confirmation email will be sent to{' '} {customerEmail}. If you have any questions, please email{' '}

orders@example.com.

) } import 'server-only' import Stripe from 'stripe' export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY) 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) 支払いの成功後に注文のフルフィルメントを実行するための Webhook を設定します。Webhook は、ビジネスで重要なイベントを処理するための非常に信頼性に優れた手段です。 #### [入金を受け取る](https://docs.stripe.com/payouts.md) Stripe アカウントから銀行口座に売上を移動する方法をご紹介します。 #### [支払いの返金とキャンセル](https://docs.stripe.com/refunds.md) Stripe API またはダッシュボードを使用し、返金のリクエストを処理します。 #### [顧客管理](https://docs.stripe.com/customer-management.md) 顧客が決済情報、請求書、サブスクリプションを自分で管理できるようにします