コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要決済を受け付ける構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つける
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 ノードにマウントします。

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

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

Checkout Session を確定することで住所を検証できます。Checkout Session では、Address Element が自動的に検証され、検証エラーがある場合には表示されます。

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

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

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

ページで複数の Address Elements を使用すると配送先住所と請求先住所の両方を収集できます。

配送先住所と請求書住所の両方を収集する必要があり、使用する Address Element が 1 つの場合は、Shipping Address Element とPayment Element を使用します。これは請求に必要な住所のみを収集します。

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

Sync billing and shipping addresses

When you use both a Billing Address Element and Shipping Address Element, you can show a checkbox that lets customers sync their billing and shipping addresses.

Pass the syncAddressCheckbox option in elementsOptions when initializing Checkout to configure which Address Element shows the checkbox.

checkout.js
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    syncAddressCheckbox: 'shipping',
  },
});

Set the value to 'billing' or 'shipping' to choose which Address Element shows the checkbox. Set it to 'none' to hide the checkbox.

参照情報