コンテンツにスキップ
アカウントを作成またはサインイン
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'
);

let checkout;
initialize();
async function initialize() {
  const promise = fetch("/create-checkout-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
  })
    .then((r) => r.json())
    .then((r) => r.clientSecret);

  const appearance = {
    theme: 'stripe',
  };
  checkout = stripe.initCheckout({
    clientSecret: promise,
    elementsOptions: { appearance },
  });
}

Address Element をページに追加する

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

checkout.html
<form id="address-form">
  <h4>Billing Address</h4>
  <div id="billing-address-element">
    <!--Stripe.js injects the Address Element-->
  </div>
  <h4>Shipping Address</h4>
  <div id="shipping-address-element">
    <!--Stripe.js injects the Address Element-->
  </div>
</form>

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

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

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

const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount("#billing-address-element");
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount("#shipping-address-element");

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

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

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

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

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

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

オートコンプリート

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

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

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

updateBillingAddress または updateShippingAddress を使用して、住所を事前入力できます。

actions.updateBillingAddress({
  name: 'Jenny Rosen',
  address: {
    line1: '27 Fredrick Ave',
    city: 'Brothers',
    state: 'OR',
    postal_code: '97712',
    country: 'US',
  }
});

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

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

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

複数ページの決済フローなど、その他のユースケースでは、Checkout Session を確定することで住所を検証できます。Checkout Session では、Address Element が自動的に検証され、検証エラーが表示されます。

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

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

Address Element を他の Elements とともに使用する

ページで複数の Address Elements (各モード 1 つずつ) を使用して、配送先住所と請求先住所の両方を収集できます。

配送先住所と請求先住所を両方収集する必要があり、Address Element を 1 つだけ使用する場合は、配送モードで Address Element を使用し、Payment Element を使用して必要な請求先住所の詳細のみを収集します。

Address Element を他の Element とともに使用すると、PaymentIntent または SetupIntent の確定時に一部の動作を自動で実行できます。PaymentIntent または SetupIntent の確定時に Address Element の完全性が検証され、検証エラーが発生した場合はフィールドごとにエラーが表示されます。

参照情報

このページはお役に立ちましたか。
はいいいえ