配送先または請求先の情報を収集するベータ

Address Element を使用して配送先情報または請求先情報を収集する方法をご紹介します。

プライベートプレビュー

The Custom Checkout integration is in private preview. To request access, こちらをクリックしてください。

住所収集を有効にする

Checkout セッションを作成する際に住所の収集を有効にします。

Checkout セッションを作成する際に配送先住所の収集を有効にするには、shipping_address_collection を渡します。allowed_countries プロパティに 2 文字の ISO 国コードの配列を設定して、配送先として許可する国を指定します。
Checkout セッションを作成する際に請求先住所の収集を有効にするには、billing_address_collection=required を渡します。

Address Element をレンダリングする

Address Element は詳細な住所を受け入れる埋め込み可能な UI コンポーネントです。配送先住所を収集する際や、税務上の目的などで詳細な請求先住所が必要な場合に使用してください。

ページで複数の Address Elements を使用して、配送先住所と請求先住所の両方を収集できます。

自社の住所フォームを作成する場合は、住所収集のカスタムフォームを表示できます。

Address Element をマウントするコンテナの DOM エレメントを作成します。次に、checkout.createElement を使用して、Address Element のインスタンスを作成し、CSS セレクターまたはコンテナの DOM エレメントを指定し、element.mountを呼び出してマウントします。 mode を使用して、Address Element が請求先情報と配送先情報を収集するかどうかを設定します。

index.html
<div id="shipping-address"></div>
<div id="billing-address"></div>

checkout.js
const shippingAddressElement = checkout.createElement('address', {mode: 'shipping'});
shippingAddressElement.mount('#shipping-address');

const billingAddressElement = checkout.createElement('address', {mode: 'billing'});
billingAddressElement.mount('#billing-address');

以下のオプションがサポートされています。

オプション住所を手動で更新する

updateBillingAddress または updateShippingAddress を設定することで、請求先情報または配送先情報を手動で更新できます。

カスタムの住所フォームをレンダリングしている場合は、変更するたびにこれらの関数を呼び出す必要はありません。代わりに、顧客が住所の入力を完了した後で (たとえば「保存」ボタンへの応答として)、update 関数を呼び出します。