住所 Element

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

機能には以下が含まれます。

• グローバルなサポート: 右から左に読む住所形式を含む、236 の地域の住所形式に対応します
• オートコンプリート: 標準装備の住所のオートコンプリート機能を使用して、決済にかかる時間を短縮し、検証エラーを減らし、決済のコンバージョンを向上させることができます
• 保存されている住所の事前入力: 購入者の住所がすでに保存されている場合、ページの読み込み時に住所を事前入力します
• カスタマイズされたデザイン: Appearance API を使用して、ページのデザインに合わせて Address Element をカスタマイズします
• シームレスな Elements の実装: 既存の Elements インスタンスを再利用して時間を節約し、Payment Element と Link を使用してデータを自動的に渡します
• あらゆるデバイスのサポート: ウェブのほか、iOS、Android、React Native のモバイル SDK で利用できます

サンプルから開始する

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

Address Element を作成する

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

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 を使用する

You can collect both shipping and billing addresses by using multiple Address Elements, one of each mode, on your page.

If you need to collect both shipping and billing addresses and only want to use one Address Element, use the Address Element in Shipping mode and use the Payment Element to collect only the necessary billing address details.

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

住所を使用する

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

自動の動作

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

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 では、25 カ国の住所のオートコンプリートを利用できます。顧客が住所にサポート対象の国を選択した場合に、オートコンプリートオプションが表示されます。オートコンプリートは以下の国でサポートされています。

Address Element と Payment Element を同時に使用する場合、Stripe は設定なしでオートコンプリートを有効にします。

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

Link を使用した自動入力

Link は、支払いと配送の情報を保存して自動入力します。Link のリピート顧客が認証を行うと、Stripe は Address Element に配送先情報を自動入力します。

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

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

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」のテーマを選択して、主要なテキストの色を上書きします。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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