住所の入力をリッスンする

イベントリスナーを使用して、カスタマイズされた方法で使用できるように住所を収集します。

ページをコピー

テーマ

サイズ

顧客の場所

電話番号

オートコンプリート

連絡先

住所 Element を使用すると、顧客から国内および国外の配送先住所や請求先住所を収集できます。

Stripe を設定する
サーバ側

まず、Stripe アカウントを作成するかサインインします。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

住所の詳細を収集する
クライアント側

住所 Element を使用して、クライアントに関する住所の詳細を収集する準備が整いました。

Stripe.js を設定する

住所 Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にこれを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Stripe インスタンスを作成する

購入ページで Stripe のインスタンスを作成します。

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

住所 Element をページに追加する

ページに住所 Element を配置する場所が必要です。フォームで一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

checkout.html
<form id="address-form">
  <h3>Address</h3>
  <div id="address-element">
    <!-- Elements will create form elements here -->
  </div>
</form>

このフォームが読み込まれたら、住所 Element のインスタンスを作成し、住所のモードを指定して、それをコンテナーの DOM ノードにマウントします。

すでに Elements インスタンスを作成している場合は、同じインスタンスを使用して住所 Element を作成できます。それ以外の場合は、まず新しい Elements インスタンスを作成します。

checkout.js
const options = {
  // Fully customizable with appearance API.
  appearance: { /* ... */ }
};

// Only need to create this if no elements group exist yet.
// Create a new Elements instance if needed, passing the
// optional appearance object.
const elements = stripe.elements(options);

// Create and mount the Address Element in shipping mode
const addressElement = elements.create("address", {
  mode: "shipping",
});
addressElement.mount("#address-element");

住所の詳細を取得する
クライアント側

change イベントをリッスンして、住所の詳細を取得できます。Element のいずれかのフィールドをユーザーが更新すると、change イベントが発生します。

addressElement.on('change', (event) => {
  if (event.complete){
    // Extract potentially complete address
    const address = event.value.address;
  }
})

あるいは、getValue を使用できます。

checkout.js
const handleNextStep = async () => {
  const addressElement = elements.getElement('address');

  const {complete, value} = await addressElement.getValue();

  if (complete) {
    // Allow user to proceed to the next step
    // Optionally, use value to store the address details
  }
};

Payment Element を使用したシングルページの決済フローでは、PaymentIntent または SetupIntent の確定時に、住所 Element が自動的に配送先または請求先情報を渡します。

複数ページの決済フローでは、次のステップに移動する前に、手動で PaymentIntent を更新するか Customer オブジェクトを更新し、change イベントや getValue メソッドで受け取った住所の詳細を設定できます。

Address Element を設定する
クライアント側

ニーズに合わせて住所 Element を設定できます。

オートコンプリート

住所 Element には、Google Maps API Places Library を使用する住所のオートコンプリート機能が組み込まれています。デフォルトでは、以下のいずれかの条件が満たされると、Stripe が提供する Google Maps API キーを使用したオートコンプリートが有効になります。

Payment Element が住所 Element と同じ Elements グループにマウントされているシングルページの決済フロー。
有効な Link セッションで住所 Element を使用する決済フロー。

その他すべてのシナリオでAddress Element のオートコンプリートを有効にするには、mode を google_maps_api に設定して autocomplete (オートコンプリート) オプションを使用します。apiKey に、Place API の使用を許可するように設定された、お客様独自の Google Maps API キーを設定します。この Google Maps API キーは、Stripe が提供する Google Maps API キーを利用できない場合にのみ使用されます。

注

CSP をデプロイし、独自の Google Maps API キーを使用したオートコンプリートを有効にする場合は、connect-src および script-src ディレクティブに https://maps.googleapis.com を含めます。最新の CSP 要件については、Google Maps API 公式ガイドをご覧ください。

const addressElement = elements.create("address", {
  mode: "shipping",
  autocomplete: {
    mode: "google_maps_api",
    apiKey: "{YOUR_GOOGLE_MAPS_API_KEY}",
  },
});

住所フォームを事前入力する

Address Element は、defaultValues を受け付けます。これにより、ページの読み込み時に住所フォームに事前入力できます。すべての値が事前入力された Address Element は、次のように表示されます。

const addressElement = elements.create("address", {
  mode: "shipping",
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    },
  },
});

その他のオプション

オプションの詳細なリストについては、Stripe.js をご覧ください。

// Sample of a options object
const addressElement = elements.create("address", {
  mode: 'shipping',
  allowedCountries: ['US'],
  blockPoBox: true,
  fields: {
    phone: 'always',
  },
  validation: {
    phone: {
      required: 'never',
    },
  },
});

住所の詳細を検証する
クライアント側

Stripe は、住所の完全性を検証して、個々の不完全な住所フィールドに「フィールドが未入力です」などのエラーを表示するいくつかの方法を用意しています。

Payment Intent や Setup Intent とともに Address Element を使用している場合は、それぞれ stripe.confirmPayment または stripe.confirmSetup を使用して支払いを完了すると、検証エラーがある場合に Address Element に表示されます。

複数ページの決済フローなど、その他のユースケースでは、getValue を使用して検証エラーを Address Element に表示します。

注

住所の入力をリッスンする

イベントリスナーを使用して、カスタマイズされた方法で使用できるように住所を収集します。

Stripe を設定するサーバ側

住所の詳細を収集するクライアント側

Stripe.js を設定する

Stripe インスタンスを作成する

住所 Element をページに追加する

住所の詳細を取得するクライアント側

Address Element を設定するクライアント側

オートコンプリート

注

住所フォームを事前入力する

その他のオプション

住所の詳細を検証するクライアント側

オプションデザインをカスタマイズするクライアント側

Stripe を設定する
サーバ側

住所の詳細を収集する
クライアント側

住所の詳細を取得する
クライアント側

Address Element を設定する
クライアント側

住所の詳細を検証する
クライアント側

オプションデザインをカスタマイズする
クライアント側