税金の徴収

Stripe Tax を使用して、Elements とのカスタム導入で税金を計算して徴収します。

Stripe Tax: 税率やルールを定義することなく取引の税金を自動的に計算する有料プロダクトです。手数料は、税金の計算と納付を登録している勤務地を 1 カ所以上追加した後にのみ適用されます。

税金を徴収するように Checkout Session を設定する

税金の徴収を開始するには、以下を行います。

Checkout Session の作成時に automatic_tax[enabled]=true を渡します。
各項目に tax_code を指定するか、ダッシュボードで事前設定の税金コードを設定します。
ライン項目ごとに tax_behavior を指定するか、ダッシュボードでデフォルトの税金処理を設定します。

このコードは、Stripe Tax、税金コード、税金処理を使用して税金を自動計算できるようにします。次に、Stripe Taxは税金コードと税金処理を使用して税金を自動的に計算します。

税コード

税金コードは、商品を税率に関連付けます。税金コードのリストから商品に適した税金コードを選択します。商品がどの税金コードとも一致しない場合は、一般 コードのいずれかを使用できます。

税金処理

税金処理によって、顧客への税金の表示方法が決まります。

外税: 商品価格に税金を含めません。税金は独立した金額として追加されます。
内税: 商品価格に税額を含めます。

オプション支払い Element で税金を徴収する

税金住所の詳細は支払い Element で直接徴収することができます。支払い Element を使用して税金住所の詳細を収集することは、次のユースケースに適しています。

完全なアドレス回収は必要ありません。
Tax 回収目的でのみ住所回収が必要です。

この機能は、国と郵便番号の入力フィールドを Payment Element 内の各決済手段フォームに統合します。Stripe Tax 要件に基づいて税金計算に必要な最小限の住所フィールドのみが収集されます。

必要最小限の住所フィールドを使用する税率が、顧客の完全な住所の税率と異なる場合があります。地域固有の考慮事項がビジネスに適用される場合は、Address Element を使用して顧客の完全な住所を徴収し、税金を計算することをお勧めします。

Checkout Session を作成するときに、billing_address_collection=auto を設定して、請求先住所を自動的に収集します。

shipping_address_collectionパラメーターを含めないでください。このパラメーターを指定すると、Tax住所の詳細はBilling住所ではなく配送先住所に基づいて収集されます。

支払い Element を使用して税金住所の詳細を収集する場合、税金計算は、次のシナリオで次のように動作します。

fields.billingDetails.address=auto | if_required を渡すと、Payment Element は税金計算に必要な最小限の住所フィールドを収集します。
fields.billingDetails.address=never を渡す場合、請求先入力フィールドは Payment Element に表示されないため、別の方法で税金住所の詳細を徴収する必要があります。
fields.billingDetails.address.country=never を渡すと、顧客の検出された国が税金計算に使用されます。
fields.billingDetails.address.postalCode=never を渡すと、一部の国では郵便番号が必要になる可能性があるため、このメソッドはエラーを返します。
If you call action.updateBillingAddress, the method returns an error because the billing address could potentially conflict.

オプションレスポンスを確認する

各決済の計算された税金は、以下のように確認できます。

Checkout Session リソースで、total_details.amount_tax プロパティをレビューします。
ダッシュボードで、各支払いの税金結果をレビューします。

税金をレンダリングする

useCheckout フックを使用して、決済フォームに税額を表示します。

import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkoutState = useCheckout();
  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }
  const {checkout} = checkoutState;
  return (
    <div>
      <h2>Checkout Summary</h2>
      <pre>
        {JSON.stringify(checkout.lineItems, null, 2)}
      </pre>
      <h3>Totals</h3>
      <pre>
        Subtotal: {checkout.total.subtotal.amount}
        {/* Make sure you use the appropriate tax amount type (taxInclusive and/or taxExclusive) for your integration */}
        Tax: {checkout.total.taxExclusive.amount}
        Total: {checkout.total.total.amount}
      </pre>
    </div>
  )
};

注