住所を収集する

請求先住所を収集する

デフォルトでは、Checkout セッションは Payment Element を通じて支払いに必要な最小限の請求情報を収集します。

Billing Address Element を使用する

Billing Address Element を使用して、完全な請求先住所を収集できます。

まず、Checkout セッションの作成時に billing_address_collection=required を渡します。

<div id="billing-address"></div>

const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');

カスタムフォームを使用する

請求先住所を収集するためのカスタムフォームを作成できます。

• 決済ページで確認前に個別の住所収集ステップがある場合は、顧客が住所を送信したときに updateBillingAddress を呼び出します。
• それ以外の場合は、billingAddress を confirm に渡すことで、顧客が「支払う」ボタンをクリックしたときに住所を送信できます。

請求先住所の一部を収集する

国と郵便番号のみなど、請求先住所の一部を収集するには、billing_address_collection=auto を渡します。

請求先住所の一部を収集する場合は、手動で住所を収集する必要があります。デフォルトでは、Payment Element が支払いに必要な最小限の請求情報を自動的に収集します。請求情報が二重に収集されないようにするため、Payment Element の作成時に fields.billingDetails=never を渡します。請求情報の一部 (顧客の名前など) のみを収集する場合は、自分で収集する予定のフィールドにのみ never を渡します。

配送先住所を収集する

顧客の配送先住所を収集するには、Checkout セッションの作成時に shipping_address_collection パラメーターを渡します。

配送先住所を収集するときは、配送先の国も指定する必要があります。2 文字の ISO 国コードの配列を含む allowed_countries プロパティを設定します。

Shipping Address Element の使用方法

Shipping Address Element を使用して、完全な配送先住所を収集できます。

<div id="shipping-address"></div>

const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');

Checkout Session の変更をリッスンする

住所関連の変更を処理するイベントリスナーを追加して、Checkout Session への変更をリッスンできます。

<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>

stripe.initCheckout({clientSecret}).then((checkout) => {
  const subtotal = document.getElementById('subtotal');
  const shipping = document.getElementById('shipping');
  const total = document.getElementById('total');

  checkout.on('change', (session) => {
    subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`;
    shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`;
    total.textContent = `Total: ${session.total.total.amount}`;
  })
})

カスタムフォームを使用する

配送先住所を収集するためのカスタムフォームを作成できます。

• 決済ページで確認前に個別の住所収集ステップがある場合は、顧客が住所を送信したときに updateShippingAddress を呼び出します。
• それ以外の場合は、shippingAddress を confirm に渡すことで、顧客が「支払う」ボタンをクリックしたときに住所を送信できます。