Address Element

Address Element を使用して詳細な請求先住所と配送先住所を収集します。

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

テーマ

サイズ

顧客の場所

電話番号

オートコンプリート

連絡先

オプション	説明
テーマ	ドロップダウンを使用してテーマを選択するか、Elements Appearance API でテーマをカスタマイズします。
デスクトップとモバイルのサイズ	ドロップダウンを使用して、Address Element のマウント先の親要素の最大ピクセル幅を設定します。750px (デスクトップ) または 320px (モバイル) を設定できます。
顧客の所在地	ドロップダウンを使用して、詳細な住所を受け付ける場所を選択します。場所を変更すると、UI 言語が地域に合わせられ、各地域に適した決済手段が表示されます。
電話番号	このオプションを有効にすると、住所フォームの拡張時または連絡先の使用時に電話番号を収集できるようになります。
オートコンプリート	このオプションを有効にすると、支払いにかかる時間が短縮され、検証エラーが減り、標準搭載の住所オートコンプリート機能によって購入完了率が向上します。Stripe は、右から左に記述する住所形式を含む、236 種類の地域固有の住所形式に対応します。
連絡先	このオプションを有効にすると、新しい住所を追加したり、既存の住所や電話番号を変更できます。

サンプルから開始する

実際の Address Element を確認するには、まず、以下のいずれかのサンプルをご覧ください。

顧客の住所を収集

Address Element を使用して住所を保存するためのコードと手順。

GitHub のサンプルアプリを複製する

HTML · React

Address Element を作成する

Address Element を作成する際は、それを配送モードと請求モードのどちらで使用するかを指定します。

配送モードでは、Element には 2 つの機能があります。

配送先住所を収集します。
それを請求先住所としても使用するオプションを顧客に提供します。

index.js
サンプル全体を表示
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = { mode: 'shipping' };
const elements = stripe.elements({clientSecret
, appearance });
const addressElement = elements.create('address', options);
addressElement.mount('#address-element');

その他のエレメントとともに住所 Element を使用する

ページに複数の Address Element (モードにつき 1 つ) を使用して、配送先住所と請求先住所の両方を収集できます。

配送先住所と請求先住所の両方を収集する必要があり、Address Element を 1 つのみ使用する場合は、配送モードで Address Element を使用し、請求先住所の収集には Payment Element を使用します。

住所 Element を他の Element とともに使用すると、PaymentIntent または SetupIntent の確定時に一部の動作を自動で実行できます。PaymentIntent または SetupIntent の確定時に住所 Element の完全性が検証され、検証エラーが発生した場合はフィールドごとにエラーが表示されます。

住所を使用する

Address Element は Payment または Express Checkout Element と自動的に連携します。購入者が住所と支払い方法を指定すると、Stripe は適切なフィールドに住所を設定して、それらを 1 つの PaymentIntent に結合します。

自動の動作

Element のデフォルトの動作はモードによって異なります。

配送モードでは、住所は以下のフィールドに保存されます。

shipping フィールドに表示されます。
顧客が請求先住所にも使用することを指定した場合は、billing_details フィールドにも表示されます。

情報の組み合わせを有効にするには、この例のように、同じ Elements オブジェクトからすべての Element を作成します。

index.js
サンプル全体を表示
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = { mode: 'shipping' };
const paymentElementOptions = { layout: 'accordion'};
const elements = stripe.elements({clientSecret
});
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment', paymentElementOptions);
addressElement.mount('#address-element');
paymentElement.mount('#payment-element');

カスタムの動作

通常は、Address Element のデフォルト動作で十分です。ただし、複雑な決済フローでは、顧客の入力に対するカスタムレスポンスの記述が必要になる場合があります。詳細については、住所の入力をリッスンするをご覧ください。

オートコンプリート

顧客が住所にサポート対象の国を選択すると、オートコンプリートオプションが表示されます。Address Element では、次の国の住所をオートコンプリートできます。

アイルランド

アメリカ

イギリス

イタリア

インド

オーストラリア

オランダ

カナダ

シンガポール

スイス

スウェーデン

スペイン

ドイツ

トルコ

ニュージーランド

ノルウェー

フィリピン

ブラジル

フランス

ベルギー

ポーランド

マレーシア

メキシコ

ロシア

南アフリカ

日本

住所要素と支払い要素を一緒に使用すると、Stripe は設定を必要とせずにオートコンプリートを有効にします。これは、Stripe が提供する Google マップ API キーを使用して行われます。

注

オートコンプリートを使用すると、Google Maps Platform 利用規定に準拠することに同意したことになります。このポリシーに違反した場合、オートコンプリートが無効になるか、必要に応じてその他の措置が講じられることがあります。

Address Element を単体で使用する場合は、Stripe アカウントとは別で管理するご自身の Google Maps API Places Library キーを使用する必要があります。キーを autocomplete.apiKey オプションに渡します。

Link を使用した自動入力

Link は、有効にしたオプションに基づいて支払い情報と配送情報を保存し、自動入力します。たとえば、Link の顧客が電話番号を保存した場合、電話番号の収集が有効になっている場合にのみ、Stripe は電話番号を自動入力します。Link のリピート顧客が認証されると、Stripe は Address Element に配送情報を自動入力します。

複数の Elements を使用して決済フォームを作成する

自動入力を有効にするには、この例のように、同じ Elements オブジェクトからすべての Element を作成します。

index.js
サンプル全体を表示
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = { mode: 'shipping' };
const paymentElementOptions = { layout: 'accordion'};
const elements = stripe.elements({clientSecret
});
const linkAuthElement = elements.create('linkAuthentication');
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment', paymentElementOptions);
linkAuthElement.mount('#link-auth-element');
addressElement.mount('#address-element');
paymentElement.mount('#payment-element');

デザイン

Appearance API を使用して、すべての Elements のスタイルを管理できます。テーマを選択するか、特定の詳細を更新することができます。

たとえば、「flat」のテーマを選択して、主要なテキストの色を上書きします。

index.js
サンプル全体を表示
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

テーマと変数の一覧については、Appearance API のドキュメントをご覧ください。