コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する
Elements を使用したカスタム統合の構築
対面決済
決済手段
決済シナリオ
決済以外の機能

メモ

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

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

1 回限りの決済フロー内で住所と電話番号を収集する方法をご紹介します。

請求先または配送先の詳細な住所を収集するには、Address Element を使用します。詳細な住所の収集は、税金の計算に使用される場合などに必要になります。Payment Element は、支払いを完了するために必要な請求先住所情報のみを収集しますが、他の請求詳細を収集するように設定することもできます。

Address Element を使用するその他の理由は次のとおりです。

Stripe は、収集した住所情報と決済手段を組み合わせて、PaymentIntent を作成します。

テーマ
サイズ
顧客の場所

Stripe を設定する
サーバ側

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

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

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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

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

Stripe.js を設定

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

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></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'
);

Address 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>

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

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

checkout.js
const options = {
  // Fully customizable with the 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 の 確定 時に、Address Element が自動的に配送先または請求先情報を渡します。

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

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

ニーズに合わせて 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 キーが使用できない場合にのみ使用されます。

メモ

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

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

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

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

Address Element をページに追加した後、ページの他の部分のデザインに合わせて外観をカスタマイズできます。詳細については、Appearance API のページを参照してください。

参照情報