住所 Element

サンプルから開始する

実際の 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 のドキュメントをご覧ください。