# 配送料金を請求する

顧客向けにさまざまな配送料金を作成します。

# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/advanced/charge-shipping?payment-ui=embedded-components.

配送料金を使用すると、Standard、Express、翌日配送などのさまざまな配送オプションと、より正確な配送予定を表示することができます。いくつかの Stripe プロダクトを使用して顧客に配送料金を請求します。配送料金を作成する前に、[請求先と配送先住所](https://docs.stripe.com/payments/collect-addresses.md) を徴収する方法を確認してください。

> 配送料金は、注文全体の固定金額の値のみをサポートしています。注文内の項目数に基づいて配送料金を調整することはできません。

## 配送料金を作成する [サーバー側]

配送料は、注文全体に対する一定額のみ設定できます。注文の品目数に応じて配送料を調整することはできません。

#### ダッシュボード

ダッシュボードを使用して[配送料](https://dashboard.stripe.com/test/shipping-rates)を追加するには、次の操作を実行します。

1. **配送料を作成**をクリックします。
1. 金額、説明と、必要に応じて配達予定日を入力します。
1. **保存**をクリックし、配送料 ID (`shr_123456`) をコピーします。
![](https://b.stripecdn.com/docs-statics-srv/assets/create-shipping-rate-dashboard.ddd79821d5edee523d7da9d22682be59.png)

配送料の詳細を入力する

### 配送料金を更新する

すでに配送料金に設定されている通貨の金額は更新できません。配送料金に通貨と金額を設定した後は、新しい通貨を含めるようにのみ更新できます。ダッシュボードで配送料金を更新するには、配送料金をアーカイブしてから新しい配送料金を作成する必要があります。

### 配送料金をアーカイブする

配送料金をアーカイブするには

1. [配送料金](https://dashboard.stripe.com/test/shipping-rates)タブで、該当する配送料金を選択します。
1. オーバーフローメニュー (⋯) をクリックし、**アーカイブ**を選択します。

配送料金のアーカイブを解除するには、オーバーフローメニュー ⋯ をクリックし、**配送料金のアーカイブ解除**を選択します。

#### API

> #### 動的な配送料金の更新をご希望の場合
> 
> Checkout では、顧客が指定した住所または注文金額に基づいて配送料を動的に更新できます。このプレビュー版の機能については、[配送オプションを動的にカスタマイズする](https://docs.stripe.com/payments/checkout/custom-shipping-options.md)をご覧ください。

[配送料を作成](https://docs.stripe.com/api/shipping_rates.md) します。少なくとも、`type` パラメーターと `display_name` パラメーターが必要です。次のコードサンプルでは、両方のパラメーターを `fixed_amount` と `delivery_estimate` とともに使用して配送料を作成しています。

```curl
curl https://api.stripe.com/v1/shipping_rates \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "display_name=Ground shipping" \
  -d type=fixed_amount \
  -d "fixed_amount[amount]=500" \
  -d "fixed_amount[currency]=usd" \
  -d "delivery_estimate[minimum][unit]=business_day" \
  -d "delivery_estimate[minimum][value]=5" \
  -d "delivery_estimate[maximum][unit]=business_day" \
  -d "delivery_estimate[maximum][value]=7"
```

### 配送料金を更新する

[配送料金を更新](https://docs.stripe.com/api/shipping_rates/update.md)するには、`Stripe::ShippingRate.update` を呼び出し、必要に応じてパラメーターを更新します。

## Checkout Session を作成 [サーバー側]

配送料金を含む Checkout Session を作成するには、生成された配送料金 ID を [shipping_options](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_options) パラメーターに渡します。Checkout Session と同時に配送料金を作成する必要がある場合は、`shipping_options` とともに `shipping_rate_data` パラメーターを使用します。[決済モード](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) の Checkout Sessions のみが配送オプションに対応しています。

次のコードサンプルでは、Checkout Session に 2 つの配送オプションを追加します。

- 送料無料、5 ～ 7 営業日での配達予定。
- 料金 15.00 USD の航空便での翌日配達、1 営業日での配達予定。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d billing_address_collection=required \
  -d "shipping_address_collection[allowed_countries][0]=US" \
  -d "shipping_address_collection[allowed_countries][1]=CA" \
  -d "shipping_options[0][shipping_rate_data][type]=fixed_amount" \
  -d "shipping_options[0][shipping_rate_data][fixed_amount][amount]=0" \
  -d "shipping_options[0][shipping_rate_data][fixed_amount][currency]=usd" \
  -d "shipping_options[0][shipping_rate_data][display_name]=Free shipping" \
  -d "shipping_options[0][shipping_rate_data][delivery_estimate][minimum][unit]=business_day" \
  -d "shipping_options[0][shipping_rate_data][delivery_estimate][minimum][value]=5" \
  -d "shipping_options[0][shipping_rate_data][delivery_estimate][maximum][unit]=business_day" \
  -d "shipping_options[0][shipping_rate_data][delivery_estimate][maximum][value]=7" \
  -d "shipping_options[1][shipping_rate_data][type]=fixed_amount" \
  -d "shipping_options[1][shipping_rate_data][fixed_amount][amount]=1500" \
  -d "shipping_options[1][shipping_rate_data][fixed_amount][currency]=usd" \
  -d "shipping_options[1][shipping_rate_data][display_name]=Next day air" \
  -d "shipping_options[1][shipping_rate_data][delivery_estimate][minimum][unit]=business_day" \
  -d "shipping_options[1][shipping_rate_data][delivery_estimate][minimum][value]=1" \
  -d "shipping_options[1][shipping_rate_data][delivery_estimate][maximum][unit]=business_day" \
  -d "shipping_options[1][shipping_rate_data][delivery_estimate][maximum][value]=1" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=elements \
  --data-urlencode "return_url=https://example.com/return"
```

## 顧客の配送オプションを徴収する [クライアント側]

#### HTML + JS

クライアントで [shippingOptions](https://docs.stripe.com/js/custom_checkout/session_object#custom_checkout_session_object-shippingOptions) オブジェクトを使用して、ラジオボタンリストなどで使用可能な配送オプションを表示します。顧客が配送オプションを選択したら、配送オプションの ID を指定して [updateShippingOption](https://docs.stripe.com/js/custom_checkout/update_shipping_option) を呼び出します。

```html
<div id="shipping-options"></div>
```

```javascript
actions.getSession().shippingOptions.forEach((option) => {
  const form = document.createElement('form');

  shippingOptions.forEach(option => {
    const label = document.createElement('label');
    const radio = document.createElement('input');
    radio.type = 'radio';
    radio.id = option.id;
    radio.name = 'shippingOption';
    radio.value = option.id;
    radio.addEventListener('click', () => {actions.updateShippingOption(option.id)
    })

    const labelText = document.createTextNode(option.displayName);

    label.appendChild(radio);
    label.appendChild(labelText);
    form.appendChild(label);
  });

  document.getElementById('shipping-options').appendChild(form);
});
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');
```

#### React

クライアントで [shippingOptions](https://docs.stripe.com/js/custom_checkout/session_object#custom_checkout_session_object-shippingOptions) オブジェクトを使用して、ラジオボタンリストなどで使用可能な配送オプションを表示します。顧客が配送オプションを選択したら、配送オプションの ID を指定して [updateShippingOption](https://docs.stripe.com/js/custom_checkout/update_shipping_option) を呼び出します。

```jsx
import React from 'react';
import {useCheckoutElements} from '@stripe/react-stripe-js/checkout'

const ShippingOptions = () => {
  const checkoutState = useCheckoutElements();
  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }
  const {shipping, shippingOptions, updateShippingOption} = checkoutState.checkout;

  const handleChange = (shippingOptionId) => () => {
    updateShippingOption(shippingOptionId);
  };

  return (
    <form>
      {shippingOptions.map((option) => {
        return (
          <label key={option.id}>
            <input
              type="radio"
              name="shippingOption"
              value={option.id}
              checked={shipping?.shippingOption?.id === option.id}
              onChange={handleChange(option.id)}
            />
            {option.displayName}
          </label>
        );
      })}
    </form>
  )
};
```

## Optional: 完了した取引を処理する

支払いが成功したら、[shipping_cost](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-shipping_cost) の [amount_total](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-amount_total) 属性で配送料を取得できます。`shipping_cost` の `shipping_rate` 属性を使用して、選択した配送料を取得することもできます。`shipping_cost` プロパティにアクセスするには、完了した Checkout セッションを処理する[イベントハンドラーを作成](https://docs.stripe.com/checkout/fulfillment.md#create-payment-event-handler)する必要があります。ハンドラーをテストするには、[Stripe CLI をインストール](https://docs.stripe.com/stripe-cli.md)し、`stripe listen --forward-to localhost:4242/webhook` を使用して[イベントをローカルサーバーに転送](https://docs.stripe.com/webhooks.md#test-webhook)します。次のコードサンプルでは、ハンドラーによってユーザーが `shipping_property` にアクセスできます。

#### Ruby

```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new("<<YOUR_SECRET_KEY>>")

require 'sinatra'

# You can find your endpoint's secret in your webhook settings
endpoint_secret = 'whsec_...'

post '/webhook' do
  event = nil

  # Verify webhook signature and extract the event
  # See https://stripe.com/docs/webhooks#verify-events for more information.
  begin
    sig_header = request.env['HTTP_STRIPE_SIGNATURE']
    payload = request.body.read
    event = Stripe::Webhook.construct_event(payload, sig_header, endpoint_secret)
  rescue JSON::ParserError => e
    # Invalid payload
    return status 400
  rescue Stripe::SignatureVerificationError => e
    # Invalid signature
    return status 400
  end

  if event['type'] == 'checkout.session.completed'
    checkout_session = event['data']['object']

    fulfill_order(checkout_session)
  end

  status 200
end

def fulfill_order(checkout_session)selected_shipping_rate = client.v1.shipping_rates.retrieve(checkout_session.shipping_cost.shipping_rate)
  shipping_total = checkout_session.shipping_cost.amount_total

  # TODO: Remove error and implement...
  raise NotImplementedError.new(<<~MSG)
    Given the Checkout Session "#{checkout_session.id}" load your internal order from the database then implement your own fulfillment logic.
  MSG
end
```

## Optional: 配送予定を定義する

配送料は、複数の配達予定日の組み合わせを使用して設定できます。次の表は、平易な英語での配送予定日と、それに対応する `delivery_estimate.minimum` と `delivery_estimate.maximum` の値の例を示しています。

| 配達予定日        | 最短                                                           | 最長                                                           |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 1 日          | ```es6
  {
    unit: 'day',
    value: 1,
  }
  ```          | ```es6
  {
    unit: 'day',
    value: 1,
  }
  ```          |
| 1 営業日        | ```es6
  {
    unit: 'business_day',
    value: 1,
  }
  ``` | ```es6
  {
    unit: 'business_day',
    value: 1,
  }
  ``` |
| 2 営業日以上      | ```es6
  {
    unit: 'business_day',
    value: 2,
  }
  ``` | ```es6
  null
  ```                                          |
| 3 日 ～ 7 日    | ```es6
  {
    unit: 'day',
    value: 3,
  }
  ```          | ```es6
  {
    unit: 'day',
    value: 7,
  }
  ```          |
| 4 時間 ～ 8 時間  | ```es6
  {
    unit: 'hour',
    value: 4,
  }
  ```         | ```es6
  {
    unit: 'hour',
    value: 8,
  }
  ```         |
| 4 時間 ～ 2 営業日 | ```es6
  {
    unit: 'hour',
    value: 4,
  }
  
  ```      | ```es6
  {
    unit: 'business_day',
    value: 2,
  }
  ``` |

## Optional: 配送料金に対して課税する

[Stripe Tax](https://docs.stripe.com/tax/checkout.md) を使用すると、配送料に `tax_code` と `tax_behavior` を設定することで、配送料に対する税金を自動的に計算できます。Stripe Tax は配送料が課税対象かどうかを自動的に判断し ([課税対象は州や国によって異なるため](https://docs.stripe.com/tax/products-prices-tax-codes-tax-behavior.md#shipping-tax-code))、課税対象の場合は正しい税率を適用します。

`shipping_rate_data` を指定するか、[配送料金の作成](https://docs.stripe.com/api/shipping_rates/create.md)を使用して配送料金を作成する際に、配送料金に `tax_behavior` と `tax_code` パラメーターを追加できます。

常に正しい税率で課税されるように、`tax_code` を `Shipping` (`txcd_92010001`) に設定することをお勧めします。配送料金に対して課税しない場合は、配送料金の `tax_code` を `Nontaxable` (`txcd_00000000`) に設定することもできます。

この例では、`tax_behavior` を `exclusive` に設定します (アメリカではこれが一般的な設定となります)。[税金処理](https://docs.stripe.com/tax/products-prices-tax-codes-tax-behavior.md#tax-behavior)で詳細をご覧ください。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d billing_address_collection=required \
  -d "shipping_address_collection[allowed_countries][0]=US" \
  -d "shipping_address_collection[allowed_countries][1]=CA" \
  -d "shipping_options[0][shipping_rate_data][type]=fixed_amount" \
  -d "shipping_options[0][shipping_rate_data][fixed_amount][amount]=0" \
  -d "shipping_options[0][shipping_rate_data][fixed_amount][currency]=usd" \
  -d "shipping_options[0][shipping_rate_data][display_name]=Free shipping" \
  -d "shipping_options[0][shipping_rate_data][tax_behavior]=exclusive" \
  -d "shipping_options[0][shipping_rate_data][tax_code]=txcd_92010001" \
  -d "shipping_options[0][shipping_rate_data][delivery_estimate][minimum][unit]=business_day" \
  -d "shipping_options[0][shipping_rate_data][delivery_estimate][minimum][value]=5" \
  -d "shipping_options[0][shipping_rate_data][delivery_estimate][maximum][unit]=business_day" \
  -d "shipping_options[0][shipping_rate_data][delivery_estimate][maximum][value]=7" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][price_data][tax_behavior]=exclusive" \
  -d "line_items[0][quantity]=1" \
  -d "automatic_tax[enabled]=true" \
  -d mode=payment \
  -d ui_mode=elements \
  --data-urlencode "return_url=https://example.com/return"
```


# Payment Intents API

> This is a Payment Intents API for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/advanced/charge-shipping?payment-ui=elements.

配送料金を使用すると、普通便、急送便、翌日配送などのさまざまな配送オプションと、より正確な配送予定を表示することができます。いくつかの Stripe プロダクトを使用して (一部にはコーディングが必要) 顧客に配送料金を請求します。配送料金を作成する前に、[請求先住所と配送先住所を収集](https://docs.stripe.com/payments/advanced/collect-addresses.md)する方法を確認してください。

> #### サードパーティのプラグイン
> 
> Stripe とともにサードパーティーアプリケーション ([Thrivecart](https://support.thrivecart.com/help/setting-your-physical-fulfilment-shipping-options/) や [Shopify](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/setting-up-shipping-rates) など) を使用している場合に、配送料金を調整するには、そのサービスに関するドキュメントをご覧ください。

Payment Intents API は、設定なしでの配送料金の計算や定義には対応していません。この機能が必要な場合、ご自身で構築するか [Checkout](https://docs.stripe.com/payments/checkout.md) を使用することを Stripe はお勧めします。

自分で構築することを選択すると、商品価格または合計金額に配送料金を含めることができます。この場合、カートまたは注文でアイテムの合計価格を計算する際に、配送料金を算入することになります。また、顧客は商品価格と配送料金の両方が含まれた 1 つの金額を支払うことになります。

基本的なステップの概要は以下のとおりです。

1. **配送料金を決定する**: 配送料金を決定します。配送先、重量、距離、またはビジネスに該当するその他の条件を考慮します。
1. **合計金額を計算する**: 商品価格に配送料金を加えて合計金額を計算します。
1. **Stripe Elements を実装する**: Stripe Elements を使用して、顧客の支払い情報を収集する決済フォームを作成します。
1. **合計金額を表示する**: 商品価格と配送料金を含む合計金額を、顧客の決済ページに表示します。
1. **支払いを処理する**: 顧客が支払い情報を送信したら、サーバー側のコードで支払いを処理します。