# 商品画像を追加

顧客が購するものを視覚的に表示します。

コンバージョン率を高めるために、商品に画像と説明を追加することをお勧めします。決済画面の各ライン項目の横に、商品の画像と説明が表示されます。

# ホスト型ページ

> This is a ホスト型ページ for when payment-ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/checkout/customization/product-images?payment-ui=stripe-hosted.

ダッシュボードまたは Checkout Sessions API を使用して、画像と説明を追加できます。

#### ダッシュボード

ダッシュボードで商品を作成する際に画像を追加するには、次のようにします。

1. [商品](https://dashboard.stripe.com/products?active=true)ページに移動します。
1. **+ 商品を作成** をクリック。
1. **説明** を追加。
1. **Image (画像)** セクションで :upload: **Upload (アップロード)** をクリックして、画像をアップロードします。

ダッシュボードで既存の商品に画像や説明を追加するには、次のようにします。

1. [商品](https://dashboard.stripe.com/products?active=true)ページに移動します。
1. 商品のオーバーフローメニュー (⋯) をクリックし、**編集** を選択します。
1. **説明** を追加。
1. **Image (画像)** セクションで :upload: **Upload (アップロード)** をクリックして、画像をアップロードします。

#### API

API を使用して商品を作成するときは、[images](https://docs.stripe.com/api/products/create.md#create_product-images) パラメーターを使用して商品画像を指定できます。[product_data](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items-price_data-product_data) を使用して Checkout Session を作成するときに、インラインで画像を追加することもできます。

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "name=Premium T-Shirt" \
  -d "description=Comfortable cotton t-shirt" \
  --data-urlencode "images[]=https://example.com/t-shirt.png" \
  -d "default_price_data[unit_amount]=1000" \
  -d "default_price_data[currency]=usd"
```

作成した商品を参照する [Checkout Session を作成](https://docs.stripe.com/api/checkout/sessions/create.md)するには、[price](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items-price) ID を指定します。Checkout では画像が自動的に表示されます。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "success_url=https://example.com/success"
```

## インライン商品データを使用

[product_data](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items-price_data-product_data) パラメーターを使用して、Checkout Session で直接画像を指定し、商品を作成することもできます。これは、商品データが動的または一時的な場合に便利です。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][unit_amount]=1000" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=Premium T-Shirt" \
  -d "line_items[0][price_data][product_data][description]=Comfortable cotton t-shirt" \
  --data-urlencode "line_items[0][price_data][product_data][images][0]=https://example.com/t-shirt.png" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "success_url=https://example.com/success"
```

## See also

- [Checkout のデザインをカスタマイズ](https://docs.stripe.com/payments/checkout/customization/appearance.md)
- [商品と価格](https://docs.stripe.com/products-prices/how-products-and-prices-work.md)
- [商品カタログ](https://docs.stripe.com/payments/checkout/product-catalog.md)


# 埋め込み型ページ

> This is a 埋め込み型ページ for when payment-ui is embedded-form. View the full page at https://docs.stripe.com/payments/checkout/customization/product-images?payment-ui=embedded-form.

ダッシュボードまたは Checkout Sessions API を使用して、画像と説明を追加できます。

#### ダッシュボード

ダッシュボードで商品を作成する際に画像を追加するには、次のようにします。

1. [商品](https://dashboard.stripe.com/products?active=true)ページに移動します。
1. **+ 商品を作成** をクリック。
1. **説明** を追加。
1. **Image (画像)** セクションで :upload: **Upload (アップロード)** をクリックして、画像をアップロードします。

ダッシュボードで既存の商品に画像や説明を追加するには、次のようにします。

1. [商品](https://dashboard.stripe.com/products?active=true)ページに移動します。
1. 商品のオーバーフローメニュー (⋯) をクリックし、**編集** を選択します。
1. **説明** を追加。
1. **Image (画像)** セクションで :upload: **Upload (アップロード)** をクリックして、画像をアップロードします。

#### API

API を使用して商品を作成するときは、[images](https://docs.stripe.com/api/products/create.md#create_product-images) パラメーターを使用して商品画像を指定できます。[product_data](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items-price_data-product_data) を使用して Checkout Session を作成するときに、インラインで画像を追加することもできます。

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "name=Premium T-Shirt" \
  -d "description=Comfortable cotton t-shirt" \
  --data-urlencode "images[]=https://example.com/t-shirt.png" \
  -d "default_price_data[unit_amount]=1000" \
  -d "default_price_data[currency]=usd"
```

作成した商品を参照する [Checkout Session を作成](https://docs.stripe.com/api/checkout/sessions/create.md)するには、[price](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items-price) ID を指定します。Checkout では画像が自動的に表示されます。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return"
```

## インライン商品データを使用

[product_data](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items-price_data-product_data) パラメーターを使用して、Checkout Session で直接画像を指定し、商品を作成することもできます。これは、商品データが動的または一時的な場合に便利です。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][unit_amount]=1000" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=Premium T-Shirt" \
  -d "line_items[0][price_data][product_data][description]=Comfortable cotton t-shirt" \
  --data-urlencode "line_items[0][price_data][product_data][images][0]=https://example.com/t-shirt.png" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return"
```

## See also

- [Checkout のデザインをカスタマイズ](https://docs.stripe.com/payments/checkout/customization/appearance.md)
- [商品と価格](https://docs.stripe.com/products-prices/how-products-and-prices-work.md)
- [商品カタログ](https://docs.stripe.com/payments/checkout/product-catalog.md)