` にマウントします。これにより、設定済みの決済手段のタイプを表示する動的フォームを備えた iframe が埋め込まれ、顧客が決済手段を選択できます。このフォームでは、選択した決済手段タイプに関連付けられた決済情報が自動的に収集されます。
### (オプション) Payment Element のスタイルを設定する
[Appearance オブジェクト](https://docs.stripe.com/elements/appearance-api.md)を作成し、CheckoutProvider にオプションとして渡すことで、Payment Element UI をカスタマイズできます。会社のカラースキームとフォントを使用して、決済画面の他の部分と一致させてください。[フォントセット](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-fonts)で Checkout を初期化することで、カスタムフォント (Google Fonts など) を使用できます。
必ず、右のプレビューを開き、変更内容が有効であることを確認してください。
> このプレビューデモの一部は、実際の決済ページと一致しない場合があります。これらの設定は、[Appearanceオブジェクト](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) の変数のサブセットのみを表しており、[Appearanceオブジェクト](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) はStripe Elements の特定の属性のみを制御します。決済ページの残りの部分のスタイリングはお客様の責任です。
### (オプション) Payment Element のスタイルを設定する
[Appearance オブジェクト](https://docs.stripe.com/elements/appearance-api.md)を作成し、Checkout を初期化することで、Payment Element UI をカスタマイズできます。会社のカラースキームとフォントを使用して、決済ページの他の部分と一致させてください。[フォントセット](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-fonts)で決済を初期化することで、カスタムフォント (Google Fonts など) を使用できます。
必ず、右のプレビューを開き、変更内容が有効であることを確認してください。
> このプレビューデモの一部は、実際の決済ページと一致しない場合があります。これらの設定は、[Appearanceオブジェクト](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) の変数のサブセットのみを表しており、[Appearanceオブジェクト](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) はStripe Elements の特定の属性のみを制御します。決済ページの残りの部分のスタイリングはお客様の責任です。
### 送信イベントを処理する
フォームの送信イベントをリッスンし、Stripe API を通じて支払いを確定するタイミングを認識できるようにします。
### 支払いを完了する
支払いボタンのクリックへの応答など、顧客が決済を完了する準備が整ったときに、[confirm](https://docs.stripe.com/js/custom_checkout/confirm) を呼び出します。
### エラーを処理する
即時[エラー](https://docs.stripe.com/error-codes.md)が発生した場合 (顧客のカードが拒否された場合など)、Stripe.js はエラーを返します。そのエラーメッセージを顧客に表示して、顧客が再試行できるようにします。
### エンドポイントを作成して Checkout セッションを取得する
エンドポイントを追加して Checkout セッションのステータスを取得します。
### 戻り先ページを追加する
顧客に注文情報を表示するには、Checkout セッション `return_url` として提供する URL の戻り先ページを作成します。顧客は支払いが完了すると、このページにリダイレクトされます。
### 戻り先コンポーネントを追加する
顧客に注文情報を表示するには、Checkout セッション `return_url` として提供する URL の新しいルートと戻り先コンポーネントを追加します。顧客は支払いが完了すると、このページにリダイレクトされます。
### Checkout セッションを取得する
戻り先ページが読み込まれたらすぐに、サーバー上のエンドポイントにリクエストを行います。URL の Checkout セッション ID を使用して Checkout セッションのステータスを取得します。
### セッションを処理する
次のステータスを使用してセッションの結果を処理します。
- `complete`: 支払いが成功しました。Checkout セッションの情報を使用して成功ページを表示します。
- `open`: 支払いが失敗またはキャンセルされました。顧客がやり直せるように Checkout を再度マウントします。
### アプリケーションを実行する
サーバーを起動し、
に移動します。
### アプリケーションを実行する
サーバーを起動し、 に移動します。
### サーバーアプリケーションを実行する
サーバーを起動します。
### クライアントアプリケーションを実行する
React アプリを起動し、 に移動します。
```bash
npm start
```
### 試してみる
支払いボタンをクリックして支払いを完了します。指定した戻り先ページにリダイレクトされます。
戻り先ページが表示され、ダッシュボードで[成功した支払い](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 |
詳細については、[テスト](https://docs.stripe.com/testing.md)を参照してください。
## 入金処理が完了しました。
Checkout の基本的な統合が機能するようになりました。次に、決済画面の外観をカスタマイズし、税金の回収を自動化し、通貨をローカライズする方法を学びましょう。
### 決済ページをカスタマイズする
[Checkout Session (セッション)](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 に保存されているメールアドレスをメールアドレスフィールドに事前入力することもできます。この場合、updateEmail を使用できないため、フロントエンドのメール入力を無効化または削除します。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)について、詳細をご確認ください。
### 請求先情報と配送先情報を要求する
[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 では、このページのドロップダウンメニューにこのリストが表示されます。
### 請求先詳細および配送先詳細を収集する
Address Element を使用して顧客の住所を収集します。
### 税金の徴収を自動化する
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/settings/tax/activate)にして、納税義務のモニタリングや、税金の自動徴収、納税申告書の提出に必要なレポートの表示などを行います。
### 税金の自動計算パラメーターを追加する
`automatic_tax` パラメーターを `enabled: true` に設定します。
### 請求詳細を収集する
Address Element を使用して顧客の住所を収集します。
### 通貨のローカライズ
Adaptive Pricing を使用すると、顧客は 150 カ国以上の現地通貨での支払いが可能になります。
### Adaptive Pricing を有効にする
ダッシュボード設定で [Adaptive Pricing を有効](https://dashboard.stripe.com/settings/adaptive-pricing)にします。
### 地域に合わせた料金設定と表示形式
[Session オブジェクト](https://docs.stripe.com/js/custom_checkout/session_object)からローカライズおよびフォーマットされた金額を表示します。
### 地域に合わせた料金設定と表示形式
[useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) フックからローカライズおよびフォーマットされた金額を表示します。
### Currency Selector Element のレンダリング
Currency Selector Element をマウントして、顧客に通貨の選択肢を提供し、為替レートを開示します。
### Adaptive Pricing の統合を準備完了とマークする
`adaptivePricing.allowed` パラメーターを `true` に設定します。
// 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")("<>");
const YOUR_DOMAIN = "http://localhost:4242";
const YOUR_DOMAIN = "http://localhost:3000";
const session = await stripe.checkout.sessions.create({
ui_mode: "custom",
customer_email: "customer@example.com",
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,
},
],
line_items: [{
price_data: {
product_data: {
name: "{{PRICE_DATA_NAME}}",
},
currency: "{{PRICE_DATA_CURRENCY}}",
unit_amount: {{PRICE_DATA_UNIT_AMOUNT}},
},
quantity: 1,
}],
line_items: [{
price_data: {
product_data: {
name: "{{PRICE_DATA_NAME}}",
},
currency: "{{PRICE_DATA_CURRENCY}}",
unit_amount: {{PRICE_DATA_UNIT_AMOUNT}},
recurring: {
interval: "{{PRICE_DATA_INTERVAL}}",
interval_count: {{PRICE_DATA_INTERVAL_COUNT}},
},
},
quantity: 1,
}],
mode: {{CHECKOUT_MODE}},
return_url: `${YOUR_DOMAIN}/complete?session_id={CHECKOUT_SESSION_ID}`,
return_url: `${YOUR_DOMAIN}/complete.html?session_id={CHECKOUT_SESSION_ID}`,
automatic_tax: {enabled: true},
});
res.send({ clientSecret: session.client_secret });
app.get("/session-status", async (req, res) => {
const session = await stripe.checkout.sessions.retrieve(req.query.session_id, {expand: ["payment_intent"]});
res.send({
status: session.status,
payment_status: session.payment_status,
payment_intent_id: session.payment_intent.id,
payment_intent_status: session.payment_intent.status
});
});
{
"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": "^20.4.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": "20.4.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"
]
}
}
\# 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 = '<>'
Stripe.api_version = '2026-02-25.clover'
YOUR_DOMAIN = 'http://localhost:4242'
YOUR_DOMAIN = 'http://localhost:3000'
session = Stripe::Checkout::Session.create({
ui_mode: 'custom',
customer_email: 'customer@example.com',
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,
}],
line_items: [{
price_data: {
product_data: {
name: '{{PRICE_DATA_NAME}}',
},
currency: '{{PRICE_DATA_CURRENCY}}',
unit_amount: {{PRICE_DATA_UNIT_AMOUNT}},
},
quantity: 1,
}],
line_items: [{
price_data: {
product_data: {
name: '{{PRICE_DATA_NAME}}',
},
currency: '{{PRICE_DATA_CURRENCY}}',
unit_amount: {{PRICE_DATA_UNIT_AMOUNT}},
recurring: {
interval: '{{PRICE_DATA_INTERVAL}}',
interval_count: {{PRICE_DATA_INTERVAL_COUNT}},
},
},
quantity: 1,
}],
mode: {{CHECKOUT_MODE}},
return_url: YOUR_DOMAIN + '/complete.html?session_id={CHECKOUT_SESSION_ID}',
return_url: YOUR_DOMAIN + '/complete?session_id={CHECKOUT_SESSION_ID}',
automatic_tax: {enabled: true},
})
{ clientSecret: session.client_secret }.to_json
get '/session-status' do
session = Stripe::Checkout::Session.retrieve({id: params[:session_id], expand: ["payment_intent"]})
{ status: session.status, payment_status: session.payment_status, payment_intent_id: session.payment_intent.id, payment_intent_status: session.payment_intent.status }.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.
stripe.api_key = '<>'
stripe.api_version = '2026-02-25.clover'
YOUR_DOMAIN = 'http://localhost:4242'
YOUR_DOMAIN = 'http://localhost:3000'
session = stripe.checkout.Session.create(
ui_mode = 'custom',
customer_email='customer@example.com',
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,
},
],
line_items=[
{
'price_data': {
'product_data': {
'name': '{{PRICE_DATA_NAME}}',
},
'currency': '{{PRICE_DATA_CURRENCY}}',
'unit_amount': {{PRICE_DATA_UNIT_AMOUNT}},
},
'quantity': 1,
},
],
line_items=[
{
'price_data': {
'product_data': {
'name': '{{PRICE_DATA_NAME}}',
},
'currency': '{{PRICE_DATA_CURRENCY}}',
'unit_amount': {{PRICE_DATA_UNIT_AMOUNT}},
'recurring': {
'interval': '{{PRICE_DATA_INTERVAL}}',
'interval_count': {{PRICE_DATA_INTERVAL_COUNT}},
},
},
'quantity': 1,
},
],
mode={{CHECKOUT_MODE}},
return_url=YOUR_DOMAIN + '/complete.html?session_id={CHECKOUT_SESSION_ID}',
return_url=YOUR_DOMAIN + '/complete?session_id={CHECKOUT_SESSION_ID}',
automatic_tax={'enabled': True},
)
return jsonify(clientSecret=session.client_secret)
@app.route('/session-status', methods=['GET'])
def session_status():
session = stripe.checkout.Session.retrieve(request.args.get('session_id'), expand=["payment_intent"])
return jsonify(status=session.status, payment_status=session.payment_status, payment_intent_id=session.payment_intent.id, payment_intent_status=session.payment_intent.status)
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==14.4.0
toml==0.10.2
Werkzeug==3.1.5
$stripe = new \Stripe\StripeClient([
"api_key" => $stripeSecretKey,
"stripe_version" => "2026-02-25.clover"
]);
$YOUR_DOMAIN = 'http://localhost:4242';
$YOUR_DOMAIN = 'http://localhost:3000';
$checkout_session = $stripe->checkout->sessions->create([
'ui_mode' => 'custom',
'customer_email' => 'customer@example.com',
'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,
]],
'line_items' => [[
'price_data' => [
'product_data' => [
'name' => '{{PRICE_DATA_NAME}}',
],
'currency' => '{{PRICE_DATA_CURRENCY}}',
'unit_amount' => {{PRICE_DATA_UNIT_AMOUNT}},
],
'quantity' => 1,
]],
'line_items' => [[
'price_data' => [
'product_data' => [
'name' => '{{PRICE_DATA_NAME}}',
],
'currency' => '{{PRICE_DATA_CURRENCY}}',
'unit_amount' => {{PRICE_DATA_UNIT_AMOUNT}},
'recurring' => [
'interval' => '{{PRICE_DATA_INTERVAL}}',
'interval_count' => {{PRICE_DATA_INTERVAL_COUNT}},
],
],
'quantity' => 1,
]],
'mode' => {{CHECKOUT_MODE}},
'return_url' => $YOUR_DOMAIN . '/complete.html?session_id={CHECKOUT_SESSION_ID}',
'return_url' => $YOUR_DOMAIN . '/complete?session_id={CHECKOUT_SESSION_ID}',
'automatic_tax' => [
'enabled' => true,
],
]);
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, ['expand' => ['payment_intent']]);
echo json_encode(['status' => $session->status, 'payment_status' => $session->payment_status, 'payment_intent_id' => $session->payment_intent->id, 'payment_intent_status' => $session->payment_intent->status]);
http_response_code(200);
} catch (Error $e) {
http_response_code(500);
echo json_encode(['error' => $e->getMessage()]);
}
$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.
services.AddSingleton(new StripeClient("<>"));
var domain = "http://localhost:4242";
var domain = "http://localhost:3000";
UiMode = "custom",
CustomerEmail = "customer@example.com",
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,
},
},
LineItems = new List
{
new SessionLineItemOptions
{
PriceData = new SessionLineItemPriceDataOptions
{
ProductData = new SessionLineItemPriceDataProductDataOptions
{
Name = "{{PRICE_DATA_NAME}}",
},
Currency = "{{PRICE_DATA_CURRENCY}}",
UnitAmount = {{PRICE_DATA_UNIT_AMOUNT}},
},
Quantity = 1,
},
},
LineItems = new List
{
new SessionLineItemOptions
{
PriceData = new SessionLineItemPriceDataOptions
{
ProductData = new SessionLineItemPriceDataProductDataOptions
{
Name = "{{PRICE_DATA_NAME}}",
},
Currency = "{{PRICE_DATA_CURRENCY}}",
UnitAmount = {{PRICE_DATA_UNIT_AMOUNT}},
Recurring = new SessionLineItemPriceDataRecurringOptions
{
Interval = "{{PRICE_DATA_INTERVAL}}",
IntervalCount = {{PRICE_DATA_INTERVAL_COUNT}},
},
},
Quantity = 1,
},
},
Mode = {{CHECKOUT_MODE}},
ReturnUrl = domain + "/complete.html?session_id={CHECKOUT_SESSION_ID}",
ReturnUrl = domain + "/complete?session_id={CHECKOUT_SESSION_ID}",
AutomaticTax = new SessionAutomaticTaxOptions { Enabled = true },
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)
{
var options = new SessionGetOptions();
options.AddExpand("payment_intent");
Session session = _client.V1.Checkout.Sessions.Get(session_id, options);
return Json(new {status = session.Status, payment_status = session.PaymentStatus, payment_intent_id = session.PaymentIntent.Id, payment_intent_status = session.PaymentIntent.Status});
}
}
"github.com/stripe/stripe-go/v84"
"github.com/stripe/stripe-go/v84/checkout/session"
stripe.Key = "<>"
domain := "http://localhost:4242"
domain := "http://localhost:3000"
params := &stripe.CheckoutSessionParams{
UIMode: stripe.String("custom"),
ReturnURL: stripe.String(domain + "/complete.html?session_id={CHECKOUT_SESSION_ID}"),
ReturnURL: stripe.String(domain + "/complete?session_id={CHECKOUT_SESSION_ID}"),
CustomerEmail: stripe.String("customer@example.com"),
BillingAddressCollection: stripe.String("auto"),
ShippingAddressCollection: &stripe.CheckoutSessionShippingAddressCollectionParams{
AllowedCountries: stripe.StringSlice([]string{
"US",
"CA",
}),
},
LineItems: []*stripe.CheckoutSessionLineItemParams{
&stripe.CheckoutSessionLineItemParams{
// 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),
},
},
LineItems: []*stripe.CheckoutSessionLineItemParams{
&stripe.CheckoutSessionLineItemParams{
PriceData: &stripe.CheckoutSessionLineItemPriceDataParams{
ProductData: &stripe.CheckoutSessionLineItemPriceDataProductDataParams{
Name: stripe.String("{{PRICE_DATA_NAME}}"),
},
Currency: stripe.String("{{PRICE_DATA_CURRENCY}}"),
UnitAmount: stripe.Int64({{PRICE_DATA_UNIT_AMOUNT}}),
},
Quantity: stripe.Int64(1),
},
},
LineItems: []*stripe.CheckoutSessionLineItemParams{
&stripe.CheckoutSessionLineItemParams{
PriceData: &stripe.CheckoutSessionLineItemPriceDataParams{
ProductData: &stripe.CheckoutSessionLineItemPriceDataProductDataParams{
Name: stripe.String("{{PRICE_DATA_NAME}}"),
},
Currency: stripe.String("{{PRICE_DATA_CURRENCY}}"),
UnitAmount: stripe.Int64({{PRICE_DATA_UNIT_AMOUNT}}),
Recurring: &stripe.CheckoutSessionLineItemPriceDataRecurringParams{
Interval: stripe.String("{{PRICE_DATA_INTERVAL}}"),
IntervalCount: stripe.Int64({{PRICE_DATA_INTERVAL_COUNT}}),
},
},
Quantity: stripe.Int64(1),
},
},
Mode: {{CHECKOUT_MODE}},
AutomaticTax: &stripe.CheckoutSessionAutomaticTaxParams{Enabled: stripe.Bool(true)},
}
s, err := session.New(params)
if err != nil {
log.Printf("session.New: %v", err)
}
writeJSON(w, struct {
ClientSecret string `json:"clientSecret"`
}{
ClientSecret: s.ClientSecret,
})
func retrieveCheckoutSession(w http.ResponseWriter, r *http.Request) {
params := &stripe.CheckoutSessionParams{}
params.AddExpand("payment_intent")
s, _ := session.Get(r.URL.Query().Get("session_id"), params)
writeJSON(w, struct {
Status string `json:"status"`
PaymentStatus string `json:"payment_status"`
PaymentIntentId string `json:"payment_intent_id"`
PaymentIntentStatus string `json:"payment_intent_status"`
}{
Status: string(s.Status),
PaymentStatus: string(s.PaymentStatus),
PaymentIntentId: string(s.PaymentIntent.ID),
PaymentIntentStatus: string(s.PaymentIntent.Status),
})
}
require github.com/stripe/stripe-go/v84 v84.4.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 = "<>";
String YOUR_DOMAIN = "http://localhost:4242";
String YOUR_DOMAIN = "http://localhost:3000";
SessionCreateParams params =
SessionCreateParams.builder()
.setUiMode(SessionCreateParams.UiMode.CUSTOM)
.setCustomerEmail("customer@example.com")
.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 + "/complete?session_id={CHECKOUT_SESSION_ID}")
.setReturnUrl(YOUR_DOMAIN + "/complete.html?session_id={CHECKOUT_SESSION_ID}")
.setAutomaticTax(
SessionCreateParams.AutomaticTax.builder()
.setEnabled(true)
.build())
.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())
.addLineItem(
SessionCreateParams.LineItem.builder()
.setQuantity(1L)
.setPriceData(
SessionCreateParams.LineItem.PriceData.builder()
.setProductData(
SessionCreateParams.LineItem.PriceData.ProductData.builder()
.setName("{{PRICE_DATA_NAME}}")
.build())
.setCurrency("{{PRICE_DATA_CURRENCY}}")
.setUnitAmount({{PRICE_DATA_UNIT_AMOUNT}}L)
.build())
.build())
.addLineItem(
SessionCreateParams.LineItem.builder()
.setQuantity(1L)
.setPriceData(
SessionCreateParams.LineItem.PriceData.builder()
.setProductData(
SessionCreateParams.LineItem.PriceData.ProductData.builder()
.setName("{{PRICE_DATA_NAME}}")
.build())
.setCurrency("{{PRICE_DATA_CURRENCY}}")
.setUnitAmount({{PRICE_DATA_UNIT_AMOUNT}}L)
.setRecurring(
SessionCreateParams.LineItem.PriceData.Recurring.builder()
.setInterval(SessionCreateParams.LineItem.PriceData.Recurring.Interval.{{PRICE_DATA_INTERVAL}})
.setIntervalCount({{PRICE_DATA_INTERVAL_COUNT}}L)
.build())
.build())
.build())
.build();
Map map = new HashMap();
map.put("clientSecret", session.getRawJsonObject().getAsJsonPrimitive("client_secret").getAsString());
return map;
get("/session-status", (request, response) -> {
RequestOptions options = RequestOptions.builder().build();
SessionRetrieveParams params =
SessionRetrieveParams.builder().addExpand("payment_intent").build();
Session session = Session.retrieve(request.queryParams("session_id"), params, options);
Map map = new HashMap();
map.put("status", session.getRawJsonObject().getAsJsonPrimitive("status").getAsString());
map.put("payment_status", session.getRawJsonObject().getAsJsonPrimitive("payment_status").getAsString());
map.put("payment_intent_id", session.getRawJsonObject().getAsJsonObject("payment_intent").getAsJsonPrimitive("id").getAsString());
map.put("payment_intent_status", session.getRawJsonObject().getAsJsonObject("payment_intent").getAsJsonPrimitive("status").getAsString());
return map;
}, gson::toJson);
const stripe = Stripe("<>");
const emailInput = document.getElementById("email");
const emailErrors = document.getElementById("email-errors");
const validateEmail = async (email) => {
const updateResult = await actions.updateEmail(email);
const isValid = updateResult.type !== "error";
return { isValid, message: !isValid ? updateResult.error.message : null };
};
const promise = fetch("/create-checkout-session", {
method: "POST",
headers: { "Content-Type": "application/json" },
})
.then((r) => r.json())
.then((r) => r.clientSecret);
const promise = fetch('/create.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
})
.then((r) => r.json())
.then((r) => r.clientSecret);
const appearance = {
{{APPEARANCE}}
};
checkout = stripe.initCheckout({
clientSecret: promise,
elementsOptions: { appearance },
adaptivePricing: { allowed: true },
});
checkout.on('change', (session) => {
// Handle changes to the checkout session
document.getElementById('submit').disabled = !session.canConfirm;
document.querySelector("#button-text").textContent = `Pay ${
session.total.total.amount
} now`;
});
emailInput.addEventListener("input", () => {
// Clear any validation errors
emailErrors.textContent = "";
emailInput.classList.remove("error");
});
emailInput.addEventListener("blur", async () => {
const newEmail = emailInput.value;
if (!newEmail) {
return;
}
const { isValid, message } = await validateEmail(newEmail);
if (!isValid) {
emailInput.classList.add("error");
emailErrors.textContent = message;
}
});
const paymentElement = checkout.createPaymentElement();
paymentElement.mount("#payment-element");
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount("#billing-address-element");
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount("#billing-address-element");
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount("#shipping-address-element");
const currencySelectorElement = checkout.createCurrencySelectorElement();
currencySelectorElement.mount("#currency-selector-element");
async function handleSubmit(e) {
e.preventDefault();
setLoading(true);
const email = document.getElementById("email").value;
const { isValid, message } = await validateEmail(email);
if (!isValid) {
emailInput.classList.add("error");
emailErrors.textContent = message;
showMessage(message);
setLoading(false);
return;
}
const { error } = await actions.confirm();
// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your `return_url`. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the `return_url`.
showMessage(error.message);
setLoading(false);
}
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const sessionId = urlParams.get("session_id");
if (!sessionId) {
console.log("No session ID found");
setErrorState();
return;
}
const response = await fetch(`/session-status?session_id=${sessionId}`);
const response = await fetch("/status.php", {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify({ session_id: sessionId }),
});
const session = await response.json();
setSessionDetails(session);
{
"name": "stripe-sample",
"version": "0.1.0",
"dependencies": {
"@stripe/react-stripe-js": "^5.3.0",
"@stripe/stripe-js": "^8.0.0",
"express": "^4.17.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"react-router-dom": "^6.16.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": "^5.3.0",
"@stripe/stripe-js": "^8.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"react-router-dom": "^6.16.0"
},
"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"
]
}
}
import React, { useMemo } from "react";
import {loadStripe} from '@stripe/stripe-js';
import {
CheckoutProvider
} from '@stripe/react-stripe-js/checkout';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
// This is a public sample test API key.
// Don’t submit any personally identifiable information in requests made with this key.
// Sign in to see your own test publishable API key embedded in code samples.
const stripePromise = loadStripe("<>");
const clientSecret = useMemo(() => {
return fetch('/create-checkout-session', {
method: 'POST',
})
.then((res) => res.json())
.then((data) => data.clientSecret);
}, []);
const clientSecret = useMemo(() => {
return fetch('/create.php', {
method: 'POST',
})
.then((res) => res.json())
.then((data) => data.clientSecret);
}, []);
const appearance = {
{{APPEARANCE}}
};
BillingAddressElement,
BillingAddressElement,
ShippingAddressElement,
CurrencySelectorElement,
const validateEmail = async (email, checkout) => {
const updateResult = await checkout.updateEmail(email);
const isValid = updateResult.type !== "error";
return { isValid, message: !isValid ? updateResult.error.message : null };
}
const EmailInput = ({ checkout, email, setEmail, error, setError }) => {
const handleBlur = async () => {
if (!email) {
return;
}
const { isValid, message } = await validateEmail(email, checkout);
if (!isValid) {
setError(message);
}
};
const handleChange = (e) => {
setError(null);
setEmail(e.target.value);
};
return (
<>
Email
{error && {error}
}
);
};
const [email, setEmail] = useState('');
const [emailError, setEmailError] = useState(null);
const [message, setMessage] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const checkoutState = useCheckout();
if (checkoutState.type === 'loading') {
return (
Loading...
);
}
if (checkoutState.type === 'error') {
return (
Error: {checkoutState.error.message}
);
}
const handleSubmit = async (e) => {
e.preventDefault();
const {checkout} = checkoutState;
setIsSubmitting(true);
const { isValid, message } = await validateEmail(email, checkout);
if (!isValid) {
setEmailError(message);
setMessage(message);
setIsSubmitting(false);
return;
}
const confirmResult = await checkout.confirm();
// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your `return_url`. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the `return_url`.
if (confirmResult.type === 'error') {
setMessage(confirmResult.error.message);
}
setIsSubmitting(false);
};
Billing Address
Billing Address
Shipping Address
;
const ErrorIcon =
;
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const sessionId = urlParams.get('session_id');
fetch("/status.php", {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify({ session_id: sessionId }),
})
fetch(`/session-status?session_id=${sessionId}`)
.then((res) => res.json())
.then((data) => {
setStatus(data.status);
setPaymentIntentId(data.payment_intent_id);
setPaymentStatus(data.payment_status);
setPaymentIntentStatus(data.payment_intent_status);
if (data.status === 'complete') {
setIconColor('#30B130');
setIcon(SuccessIcon);
setText('Payment succeeded');
} else {
setIconColor('#DF1B41');
setIcon(ErrorIcon);
setText('Something went wrong, please try again.');
}
});
}, []);
return (
{icon}
{text}
Payment Intent ID
{paymentIntentId}
Status
{status}
Payment Status
{paymentStatus}
Payment Intent Status
{paymentIntentStatus}
View details
Test another payment
)
\## Set Price ID
In the back end code, replace `{{PRICE_ID}}` with a Price ID (`price_xxx`) that you created.
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
~~~
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/payments/checkout/dynamically-update-line-items.md)
ユーザーが商品を追加、削除、変更するときに Checkout セッションの項目を動的に変更する方法をご紹介します。
#### [注文の処理](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components)
Webhook を設定し、支払いが成功したら注文のフルフィルメントを実行します。Webhook は、ビジネスにとって重要なイベントを処理するための最も信頼できる方法です。
#### [入金の受け取り](https://docs.stripe.com/payouts.md)
Stripe アカウントから銀行口座に売上を移動する方法をご紹介します。
#### [支払いの返金とキャンセル](https://docs.stripe.com/refunds.md)
Stripe API またはダッシュボードを使用し、返金のリクエストを処理します。
#### [顧客管理](https://docs.stripe.com/customer-management.md)
顧客が決済情報、請求書、サブスクリプションを自分で管理できるようにします。
#### [ワンクリックの決済ボタン](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components#create-and-mount)
Express Checkout Element を使用して、ワンクリックの決済手段ボタンで決済を受け付ける。