住所と電話番号を収集する

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

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

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

change イベントをリッスンすることで、住所の詳細を取得できます。顧客が Element のフィールドを更新するたびに、change イベントがトリガーされます。

または、getValue を使用することもできます。

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

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

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

オートコンプリート

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

• Payment Element が Address Element と同じ Elements グループにマウントされた単一ページの決済フロー。
• アクティブな Link セッションで Address Element を使用する決済フロー。

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

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

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

その他のオプション

詳細なオプションの一覧については、Stripe.js を参照してください。

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

PaymentIntent または SetupIntent で Address Element を使用する場合は、それぞれ stripe.confirmPayment または stripe.confirmSetup を使用して Intent を完了します。検証エラーがある場合は、Address Element に表示されます。

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