サンプルから開始する
実際の Address Element を確認するには、まず、以下のいずれかのサンプルをご覧ください。
Address Element を作成する
Address Element を作成する際は、それを配送モードと請求モードのどちらで使用するかを指定します。
配送モードでは、Element には 2 つの機能があります。
- 配送先住所を収集します。
- それを請求先住所としても使用するオプションを顧客に提供します。
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const appearance = { };
const options = { mode: 'shipping' };
const elements = stripe.elements({ , appearance });
const addressElement = elements.create('address', options);
addressElement.mount('#address-element');
住所を使用する
Address Element は Payment または Express Checkout Element と自動的に連携します。購入者が住所と決済手段を指定すると、Stripe は適切なフィールドに住所を設定して、それらを 1 つの PaymentIntent に結合します。
自動の動作
Element のデフォルトの動作はモードによって異なります。
配送モードでは、住所は以下のフィールドに保存されます。
情報の組み合わせを有効にするには、この例のように、同じ Elements
オブジェクトからすべての Element を作成します。
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const appearance = { };
const options = { mode: 'shipping' };
const elements = stripe.elements({ });
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment');
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 = { };
const options = { mode: 'shipping' };
const elements = stripe.elements({ });
const linkAuthElement = elements.create('linkAuthentication');
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment');
linkAuthElement.mount('#link-auth-element');
addressElement.mount('#address-element');
paymentElement.mount('#payment-element');
デザイン
Appearance API を使用して、すべての Elements のスタイルを管理できます。テーマを選択するか、特定の詳細を更新することができます。
たとえば、「flat」のテーマを選択して、主要なテキストの色を上書きします。
テーマと変数の一覧については、Appearance API のドキュメントをご覧ください。