# Link を含むカスタムの決済ページを構築する
Payment Element または Contact Details Element を使用して Link を実装できます。
このガイドでは、[Link](https://docs.stripe.com/payments/link.md) を使用して、[Payment Intents API](https://docs.stripe.com/api/payment_intents.md) と [Payment Element](https://docs.stripe.com/payments/payment-element.md) または [Contact Details Element](https://docs.stripe.com/payments/elements/contact-details-element.md) のいずれかで決済を受け付ける方法を説明します。
Link の認証または登録のために顧客のメールアドレスを保護する方法は 3 種類あります。
- **メールアドレスを渡す:** [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) を使用して、メールアドレスを Payment Element に渡すことができます。決済フローで顧客のメールアドレスまたは電話番号を収集した場合は、このアプローチをお勧めします。
- **メールアドレスを収集する:** Payment Element で直接、メールアドレスを収集できます。決済フローでメールアドレスを収集しない場合は、このアプローチをお勧めします。
- **Contact Details Element:** Contact Details Element を使用すると、メールアドレスの収集と Link 認証の両方に使う単一のメールアドレス入力欄を作成できます。[Address Element](https://docs.stripe.com/elements/address-element.md) を使用する場合は、この方法をお勧めします。
Link の認証または登録のために顧客のメールアドレスを収集する
## Stripe を設定する [サーバ側]
まず、[Stripe アカウントを作成する](https://dashboard.stripe.com/register)か[サインイン](https://dashboard.stripe.com/login)します。
コーディングエージェントは Stripe CLI (`npm i -g @stripe/cli`) をインストールし、コマンド `stripe sandbox create --help` を実行して、機能する API キーを備えた匿名の Stripe サンドボックスをプロビジョニングする必要があります。アカウント登録は不要です。
アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。
#### Ruby
```bash
# Available as a gem
sudo gem install stripe
```
```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```
## PaymentIntent を作成する [サーバー側]
Stripe は [PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents.md) オブジェクトを使用して、顧客から支払いを回収する意図を示し、プロセス全体を通して請求の実施と支払い状態の変化を追跡します。
Setup Intents で[今後の使用分に向けてカード詳細を回収している場合は](https://docs.stripe.com/payments/save-and-reuse.md)、動的な決済手段を使用する代わりに、決済手段を手動で列挙します。動的な決済手段を使用せずに Link を使用するには、連携を更新して `link` を `payment_method_types` に渡します。
PaymentIntent を作成する際は、動的な決済手段を使用して、Link を含む[最も関連性の高い決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を顧客に動的に提供します。動的な決済手段を使用するには、`payment_method_types` パラメーターを含めないでください。オプションで、`automatic_payment_methods` を有効にすることもできます。
> システムで `payment_method_types` パラメーターを設定しない場合、カードやウォレットなどの一部の決済手段は自動的に有効になります。
動的な決済手段を使用して Link を Elements 連携に追加するには、次のようにします。
1. Dashboard の[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)で、Link を有効にします。
2. 決済手段を手動で一覧化する既存の実装がある場合は、実装から [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) パラメーターを削除します。
### client secret を取得する
PaymentIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。
#### 1 ページのアプリケーション
ブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。
#### Ruby
```ruby
get '/secret' do
intent = # ... Create or retrieve the PaymentIntent
{client_secret: intent.client_secret}.to_json
end
```
その後、クライアント側で JavaScript を使用して client secret を取得します。
```javascript
(async () => {
const response = await fetch('/secret');
const {client_secret: clientSecret} = await response.json();
// Render the form using the clientSecret
})();
```
#### サーバ側のレンダリング
サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。
決済フォームに [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。
#### Ruby
```erb
```
```ruby
get '/checkout' do
@intent = # ... Fetch or create the PaymentIntent
erb :checkout
end
```
## 顧客のメールアドレスを収集する
Link は、メールアドレスを使用して顧客を認証します。決済フローに応じて、Payment Element にメールアドレスを渡す、Payment Element 内で直接収集する、または Contact Details Element を使用する、という選択肢があります。この中では、顧客のメールアドレスがある場合は、Payment Element に渡すことを Stripe は推奨しています。
#### メールアドレスを渡す
以下の「いずれか」に該当する場合:
- 顧客が支払いページに到達する前に、顧客プロフィールなどで顧客のメールアドレスを確認している場合。
- 顧客から配送先住所を収集する必要がない場合。
- 決済フォームの前に配置する自社構築のメールアドレス入力フィールドを使用する場合。
次に、顧客のメールアドレスを Payment Element に渡して、Linkを導入します。これにより、顧客が決済ステップに到達するとすぐに Link の認証フローが起動され、決済がスピーディーになります。このオプションでは、Payment Element を 1 つ実装します。
Link は収集したメールアドレスを決済フォームに自動入力して、決済をスピーディーに進められるようにします。
既存のユーザーの場合、Link が顧客に認証プロンプトを表示する
このフローでは、顧客が決済ステップに到達する_「前」_に、自社のフォームフィールドでメールアドレスの収集を管理し、そのメールアドレスを Payment Element に渡します。Payment Element は決済ステップで顧客を認証し、Link アカウントに保存されている顧客の決済情報を表示するか、カード詳細の入力後に Link アカウント作成フォームを表示します。処理の流れは次のとおりです。
Integrate Link using the Payment Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
この実装オプションでは、顧客の配送先住所は収集されません。配送先住所を収集する必要がある場合は、Contact Details Element、Address Element、および Payment Element を使用して Link を実装します。
#### メールアドレスを収集する
Payment Element で Link の認証を行うと、顧客は追加の導入作業なしに Payment Element で直接メールアドレスを入力できます。
このフローでは、顧客が購入時に Payment Element に直接メールアドレスを入力して、Link で認証するか、Link に登録します。顧客が Link に登録しておらず、Payment Element でサポートされている決済手段を選択すると、Link を使用して詳細を保存するように求められます。すでに登録している場合は、Link は決済情報を自動的に入力します。
#### Contact Details Element の使用
以下の「いずれか」に該当する場合:
- メールアドレスの回収と Link の認証が最適化された 1 つのコンポーネントを使用する場合。
- 顧客から配送先住所を収集する必要がある場合。
次に、Contact Details Element、Payment Element、および必要に応じて Address Element を実装する連携フローを使用します。
Link を有効にした決済画面では、先頭に Contact Details Element、続いて Address Element、最後に Payment Element を配置します。複数ページの決済フローでは、同じ順序でこれらを別々の画面に表示することもできます。
複数の Elements を使用して決済フォームを作成する
このシステムは以下のように動作します。
A diagram describing how to integrate Link using the Contact Details Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
## 決済フォームを設定する [クライアント側]
これで、Elements の構築済みの UI コンポーネントを使用してカスタムの決済フォームを設定できるようになりました。構築したシステムを機能させるには、決済ページのアドレスの先頭を `http://` ではなく `https://` にする必要があります。テストの際には、HTTPS を使用しなくても問題ありません。本番環境で決済を受け付ける準備が整ったら、[HTTPS を有効に](https://docs.stripe.com/security/guide.md#tls)します。
#### メールアドレスを渡す
Payment Element によって、電話番号とメールアドレスなどが事前入力された問い合わせフォームが表示されます。また、動的なフォームも表示され、顧客はここで支払い方法のタイプを選択できます。このフォームでは、顧客が選択した支払い方法のタイプに必要な支払い情報がすべて自動的に収集されます。
さらに、Payment Element は Link に保存された決済手段を認証済みの顧客に表示する処理も行います。
#### React
### Stripe Elements を設定する
次の npm パブリックレジストリーから [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) と [Stripe.js ローダー](https://www.npmjs.com/package/@stripe/stripe-js)をインストールします。
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### 支払いフォームを構築する
決済ページで、決済フォームを `Elements` コンポーネントでラップし、[client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を渡します。
その他の顧客情報がある場合は、`PaymentElement` 用の `defaultValues.billingDetails` オブジェクトに渡します。できるだけ多くの情報を事前入力することで、顧客の Link アカウントの作成や再利用を効率化できます。また、[appearance オブジェクト](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance)を渡し、サイトのデザインに合わせて Elements をカスタマイズすることもできます。
次に、決済フォームに `PaymentElement` を表示します。少なくとも顧客のメールアドレスを [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) に渡して、Link のデータを事前入力することをお勧めします。
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Stripe Elements を設定する
支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。
```html
Checkout
```
最初のパラメーターとして公開可能な [API キー](https://docs.stripe.com/keys.md)を指定して、[Stripe オブジェクト](https://docs.stripe.com/js.md#stripe-function)のインスタンスを作成します。
```javascript
// 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('<>');
```
### 決済画面にLink Elements を追加
決済ページで、Elements がレンダリングできるように、一意の ID が指定された空の DOM ノードを作成します。
```html
```
設定したフォームの読み込みが完了したら、新しい Elements グループを作成し、[client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を渡します。[appearance オブジェクト](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance)を渡して、サイトのデザインに合わせて Elements をカスタマイズすることもできます。
その他の顧客情報がある場合は、`defaultValues.billingDetails` オブジェクトを `PaymentElement` に渡します。できるだけ多くの情報を事前入力することで、顧客の Link アカウントの作成や再利用を効率化できます。
最後に、各 Element のインスタンスを作成し、対応する DOM ノードにマウントします。
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Prefill customer data using the defaultValues option. Passing in the email
// is required for this integration. The other fields are optional.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'foo@bar.com',
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### メールアドレスを収集する
Payment Element によって、電話番号とメールアドレスなどが事前入力された問い合わせフォームが表示されます。また、動的なフォームも表示され、顧客はここで支払い方法のタイプを選択できます。このフォームでは、顧客が選択した支払い方法のタイプに必要な支払い情報がすべて自動的に収集されます。
さらに、Payment Element は Link に保存された決済手段を認証済みの顧客に表示する処理も行います。この実装では、[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)で Link をオンのままにする必要があります。
#### React
### Stripe Elements を設定する
次の npm パブリックレジストリーから [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) と [Stripe.js ローダー](https://www.npmjs.com/package/@stripe/stripe-js)をインストールします。
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### 支払いフォームを構築する
決済ページで、決済フォームを `Elements` コンポーネントでラップし、[client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を渡します。
その他の顧客情報がある場合は、`PaymentElement` 用の `defaultValues.billingDetails` オブジェクトに渡します。できるだけ多くの情報を事前入力することで、顧客の Link アカウントの作成や再利用を効率化できます。また、[appearance オブジェクト](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance)を渡し、サイトのデザインに合わせて Elements をカスタマイズすることもできます。
次に、決済フォームに `PaymentElement` を表示します。少なくとも顧客のメールアドレスを [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) に渡して、Link のデータを事前入力することをお勧めします。
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Stripe Elements を設定する
支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。
```html
Checkout
```
最初のパラメーターとして公開可能な [API キー](https://docs.stripe.com/keys.md)を指定して、[Stripe オブジェクト](https://docs.stripe.com/js.md#stripe-function)のインスタンスを作成します。
```javascript
// 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('<>');
```
### 決済画面にLink Elements を追加
決済ページで、Elements がレンダリングできるように、一意の ID が指定された空の DOM ノードを作成します。
```html
```
設定したフォームの読み込みが完了したら、新しい Elements グループを作成し、[client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を渡します。[appearance オブジェクト](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance)を渡して、サイトのデザインに合わせて Elements をカスタマイズすることもできます。
その他の顧客情報がある場合は、`defaultValues.billingDetails` オブジェクトを `PaymentElement` に渡します。できるだけ多くの情報を事前入力することで、顧客の Link アカウントの作成や再利用を効率化できます。
最後に、各 Element のインスタンスを作成し、対応する DOM ノードにマウントします。
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Create the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Contact Details Element の使用
Contact Details Element は、メールアドレスの入力フィールドをレンダリングします。Link が顧客のメールアドレスを既存の Link アカウントと照合すると、認証用の安全なワンタイムコードが顧客のスマートフォンに送信されます。顧客の認証が正常に完了すると、Stripe は Link に保存されている住所と決済手段を自動的に表示し、顧客が使用できるようにします。
この実装では、Payment Element も作成されます。この Payment Element によって動的フォームが表示され、顧客は決済手段のタイプを選択できます。このフォームでは、顧客が選択した決済手段に必要な決済情報が自動的に回収されます。Payment Element は、Link に保存された決済手段を、認証済みの顧客に表示する処理も行います。
#### React
### Stripe Elements を設定する
npm パブリックレジストリーから [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) と [Stripe.js ローダー](https://www.npmjs.com/package/@stripe/stripe-js)をインストールします。
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
決済画面では、[前のステップ](https://docs.stripe.com/payments/link/add-link-elements-integration.md#web-create-intent)の [Client Secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を渡して、決済フォームを `Elements` コンポーネントでラップします。フォームの別の部分ですでに顧客のメールアドレスを収集している場合は、既存の入力欄を `ContactDetailsElement` に置き換えます。
メールアドレスを収集しない場合は、決済フローに `ContactDetailsElement` を追加します。Link が、顧客向けに Link に保存済みの情報を `ShippingAddressElement` と `PaymentElement` に自動入力できるようにするには、`ContactDetailsElement` を `ShippingAddressElement` (配送先住所を収集する場合は省略可) と `PaymentElement` の前に配置する必要があります。さらに、[appearance option](https://docs.stripe.com/elements/appearance-api.md) を渡して、サイトのデザインに合わせて Elements をカスタマイズすることもできます。
顧客のメールアドレスがある場合は、それを `defaultValues` オプションとして `ContactDetailsElement` に渡します。これにより、メールアドレスが事前入力され、Link の認証フローが開始されます。
その他の顧客情報がある場合は、`defaultValues.billingDetails` というオブジェクトを `PaymentElement` に渡します。できるだけ多くの情報を事前入力することで、顧客の Link アカウントの作成やアカウントの再利用を効率化できます。
次に、決済フォームに `ContactDetailsElement` と `PaymentElement` コンポーネントを表示します:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
ContactDetailsElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
`ContactDetailsElement`、`PaymentElement`、および `ShippingAddressElement` は、同じページに配置する必要はありません。顧客の連絡先情報、配送先情報、決済情報を別々のステップで表示するフローであれば、それぞれの Element を適切なステップまたは画面に表示できます。顧客が Link による配送先情報と決済情報の自動入力を最大限活用できるように、連絡先情報を収集するステップでは、メールアドレス入力欄として `ContactDetailsElement` を含めます。
決済フローの早い段階で Contact Details Element を使用して顧客のメールアドレスを収集した場合は、配送先住所入力画面や決済画面で再度表示する必要はありません。
### メールアドレスを取得する
`contactDetailsElement` コンポーネントの `onChange` プロパティを使用すると、メールアドレスの詳細を取得できます。ユーザーがメールアドレスフィールドを更新したとき、または保存済みの顧客のメールアドレスが自動入力されたときに、`onChange` ハンドラが実行されます。
```jsx
{
setEmail(event.value.email);
}} />
```
### 顧客のメールアドレスを事前入力する
Contact Details Element はメールアドレスを受け付けます。顧客のメールアドレスを指定すると、`defaultValues` オプションを使用して顧客が決済画面にアクセスした時点で、Link の認証フローが開始されます。
```jsx
```
#### HTML + JS
### Stripe Elements を設定する
支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。
```html
Checkout
```
最初のパラメーターとして公開可能な [API キー](https://docs.stripe.com/keys.md)を指定して、[Stripe オブジェクト](https://docs.stripe.com/js.md#stripe-function)のインスタンスを作成します。
```javascript
// 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('<>');
```
### 支払いページにLink Elements を追加する
決済ページで、Elements がレンダリングできるように、一意の ID が指定された空の DOM ノードを作成します。
```html
```
先ほど設定したフォームが読み込まれたら、[client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を渡して新しい Elements グループを作成します。決済フォームですでに顧客のメールアドレスを収集している場合は、既存の入力欄を `contactDetailsElement` に置き換えます。
メールアドレスを収集しない場合は、決済フローで `contactDetailsElement` を `shippingAddress` の前に追加します (配送先住所を収集する場合のみ任意)。`PaymentElement` を追加すると、Link に保存済みの顧客情報が Link の `shippingAddress` と `PaymentElement` に自動入力されます。また、[appearance object](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) を渡して、サイトのデザインに合わせて Elements をカスタマイズすることもできます。
顧客のメールアドレスがある場合は、それを `defaultValues` オプションで `contactDetailsElement` に渡します。これによりメールアドレスが事前入力され、Link の認証フローが開始されます。顧客の他の情報がある場合は、それを `defaultValues.billingDetails` オブジェクトで `PaymentElement` に渡します。できるだけ多くの情報を事前入力すると、顧客による Link アカウントの作成と再利用が簡単になります。
最後に、各 Element のインスタンスを作成し、対応する DOM ノードにマウントします。
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2), loader, and appearance (optional).
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const contactDetailsElement = elements.create("contactDetails");
// Passing in defaultValues is optional, but useful if you want to prefill consumer information to
// ease consumer experience.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
paymentElement.mount("#payment-element");
```
`contactDetailsElement` によってメールアドレス入力欄が表示されます。Link が顧客のメールアドレスを既存の Link アカウントと照合すると、認証のために安全なワンタイムコードが顧客の携帯電話に送信されます。顧客が正常に認証されると、Stripe は Link に保存済みの住所と決済手段を自動的に表示し、顧客はそれらを使用できます。
`PaymentElement` によって動的なフォームが表示され、顧客は決済手段タイプを選択できます。このフォームでは、顧客が選択した決済手段に必要な決済詳細のすべてが自動的に回収されます。`PaymentElement` は、Link に保存された決済手段を、認証済みの顧客に表示する処理も行います。
Contact Details Element、Payment Element、Shipping Address Element を同じページに配置する必要はありません。決済時に顧客の連絡先情報、配送先情報、決済情報を別々のステップで顧客に表示するフローがある場合は、各 Element を適切なステップまたはページに表示できます。顧客が Link による自動入力を最大限活用できるように、連絡先情報の収集ステップにはメールアドレス入力フォームとして Contact Details Element を含めます。
決済フローの早い段階で Contact Details Element を使用して顧客のメールアドレスを収集した場合は、配送先住所入力画面や決済画面で再度表示する必要はありません。
### メールアドレスを取得する
`contactDetailsElement` コンポーネントの `onChange` プロパティを使用すると、メールアドレスの詳細を取得できます。ユーザーがメールアドレスフィールドを更新したとき、または保存済みの顧客のメールアドレスが自動入力されたときに、`onChange` ハンドラが実行されます。
```javascript
contactDetailsElement.on('change', (event) => {
const email = event.value.email;
});
```
### 顧客のメールアドレスを事前入力する
Contact Details Element はメールアドレスを受け付けます。顧客のメールアドレスを指定すると、`defaultValues` オプションを使用して顧客が決済画面にアクセスした時点で、Link の認証フローが開始されます。
```javascript
// Create contactDetails element with the defaultValues option
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
```
## Optional: その他の顧客データを事前入力する [クライアント側]
顧客情報がある場合は、顧客情報を事前に入力すると、決済プロセスをさらに効率化して、手動によるデータ入力を減らすことができます。
#### メールアドレスを渡す
Payment Element は、`defaultValues.billingDetails` オブジェクトを受け取り、顧客の氏名、電話番号、メールアドレス、配送先住所を事前入力できるようにします。できるだけ多くの顧客情報を事前入力すると、Link アカウントの作成と再利用を効率化できます。
顧客のメールアドレス、電話番号、氏名を事前入力して、Link の登録プロセスを効率化する
`defaultValues.billingDetails` オブジェクトには次の値を指定できます。
| 値 | 必須 | 形式 |
| --------- | ----- | --------------------------------------------------------------------- |
| `email` | 必須 | 文字列 |
| `name` | オプション | 文字列 |
| `phone` | オプション | 文字列 |
| `address` | オプション | `postal_code` フィールドおよび `country` フィールドを持つ JSON オブジェクト。フィールドはすべて文字列です。 |
Payment Element に `defaultValues.billingDetails` を渡す手順は、情報を収集するのが Payment Element の前の専用ページか、同じページかによって変わります。
#### Payment Element の前
Payment Element の前の専用ページで情報を収集する場合、Payment Element の作成時に `defaultValues.billingDetails` を渡すことで値を事前入力できます。
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'johnd@domain.com',
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Payment Element と同じページ
Payment Element と同じページで情報を収集する場合は、Payment Element を `defaultValues.billingDetails` で更新することで値を事前入力できます。
```javascript
const paymentElement = elements.create('payment')
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
function updateValues() {
paymentElement.update({
defaultValues: {
billingDetails: {
email: document.getElementById('email').value, // Or whichever ID used for your fields
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
address: {
postal_code: document.getElementById('postal_code').value,
country: document.getElementById('country').value,
},
},
},
});
}
const yourCollectionFieldIds = [
'name',
'email',
'phone',
'country',
'postal_code',
];
// We recommend updating defaultValues only onBlur
yourCollectionFields.forEach((key) => {
document.getElementById(key).onblur = function() {updateValues()};
});
```
#### Contact Details Element にメールアドレスを渡す
Contact Details Element を使用している場合は、Payment Element に `defaultValues.billingDetails` オブジェクトを追加して、顧客の名前と電話番号、および配送先住所を事前入力できるようにします。顧客の情報を可能な限り事前入力することで、Link アカウントの作成と再利用が容易になります。
顧客のメールアドレス、電話番号、氏名を事前入力して、Link の登録プロセスを効率化する
`defaultValues.billingDetails` オブジェクトには次の値を指定できます。
| 値 | 必須 | 形式 |
| --------- | ----- | --------------------------------------------------------------------- |
| `name` | オプション | 文字列 |
| `phone` | オプション | 文字列 |
| `address` | オプション | `postal_code` フィールドおよび `country` フィールドを持つ JSON オブジェクト。フィールドはすべて文字列です。 |
すべての値が事前入力された Payment Element は、次の例のように表示されます。
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
## Optional: 配送先住所を収集する [クライアント側]
#### メールアドレスを渡す
この実装オプションでは、顧客の配送先住所を収集しません。配送先住所を収集する必要がある場合は、[Contact Details Element の使用](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping)の手順で、Contact Details Element、Address Element、Payment Element を使用して Link を実装します。
#### Contact Details Element の使用
#### React
住所を収集するには、[Address Element](https://docs.stripe.com/elements/address-element.md) を表示するための空の DOM ノードを作成します。Link が顧客の保存済み住所の詳細を自動入力できるようにするには、Address Element を Contact Details Element の後に表示する必要があります:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
ContactDetailsElement,AddressElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
`AddressElement` を `PaymentElement` の前に表示します。`PaymentElement` は `AddressElement` によって収集された住所データを動的に検出し、不要なフィールドを非表示にして、必要に応じて追加の請求先住所を収集します。
### 住所情報を取得する
顧客が支払いを送信すると `AddressElement` から配送先住所が自動的に渡されますが、`onChange` プロパティを使用してフロントエンドで住所詳細を取得することもできます。ユーザーが Address Element のフィールドを更新するか、保存された住所を選択するたびに、`onChange` ハンドラーがイベントを送信します。
```jsx
{
setAddressState(event.value);
}} />
```
### 配送先住所を事前入力する
[defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) を使用して住所情報を事前入力し、顧客の決済をスピードアップします。
```jsx
```
#### HTML + JS
[Address Element](https://docs.stripe.com/elements/address-element.md) では、配送先住所または請求先住所を収集できます。Address Element 用の空の DOM ノードを作成します。これを Contact Details Element の後に表示します。
```html
```
次に、Address Element のインスタンスを作成し、それを DOM ノードにマウントします。
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>');
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const contactDetailsElement = elements.create("contactDetails");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-element");addressElement.mount("#address-element");
paymentElement.mount("#payment-element");
```
Address Element を Payment Element の前に表示します。Payment Element は Address Element によって収集された住所データを動的に検出し、不要なフィールドが非表示にして、必要に応じて追加の請求先住所を収集します。
### 住所情報を取得する
顧客が支払いを送信すると Address Element から配送先住所が自動的に渡されますが、`change` イベントを使用してフロントエンドで住所詳細を取得することもできます。ユーザーが Address Element のフィールドを更新するか、保存された住所を選択すると常に、`change` イベントが送信されます。
```javascript
addressElement.on('change', (event: AddressChangeEvent) => {
const address = event.value;
})
```
### 配送先住所を事前入力する
[defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) を使用して住所情報を事前入力し、顧客の決済をスピードアップします。
```javascript
// Create addressElement with the defaultValues option
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',
}
}
});
// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");
```
## Optional: デザインをカスタマイズする [クライアント側]
Element をページに追加したら、他の部分のデザインに合わせて[デザイン](https://docs.stripe.com/elements/appearance-api.md#theme)をカスタマイズできます。
Elements のデザインをカスタマイズする
## Stripe に支払いを送信する [クライアント側]
[stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を使用し、さまざまな Elements フォームで顧客から収集された情報を使用して支払いを完了します。この関数に [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を指定して、支払いが完了した後に Stripe がユーザーをリダイレクトする場所を指示します。
ユーザーは、まず銀行のオーソリページなどの中間サイトにリダイレクトされ、その後 Stripe によって `return_url` にリダイレクトされる場合があります。
デフォルトのカード支払いと銀行支払いでは、決済が成功するとすぐに `return_url` にリダイレクトされます。`return_url` へのリダイレクトが不要の場合は、[if_required](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) を使用して動作を変更できます。
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
// If collecting shipping
AddressElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage =({clientSecret}) => (
);
export default function CheckoutForm() {const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
},
});
if (error) {
// handle error
}
};
return (
);
}
```
#### HTML + JS
```javascript
const stripe = Stripe('<>');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
}
});
if (error) {
// Show error to your customer (for example, payment details incomplete)
console.log(error.message);
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
});
```
`return_url` は、戻りページのレンダリング時に `PaymentIntent` の[支払いのステータス](https://docs.stripe.com/payments/payment-intents/verifying-status.md)を表示する Web サイト上のページに対応します。Stripe が顧客を `return_url` にリダイレクトするときに、以下の URL クエリパラメーターを使用して支払いのステータスを確認できます。`return_url` を指定する際は、独自のクエリパラメーターを追加することもできます。このクエリパラメーターはリダイレクトプロセス全体で存続します。
| パラメーター | 説明 |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent` | `PaymentIntent` の一意の識別子 |
| `payment_intent_client_secret` | `PaymentIntent` オブジェクトの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret)。 |
## Optional: オーソリとキャプチャーを分離する [サーバー側]
Link は[オーソリとキャプチャー](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)の分離に対応しています。オーソリされた Link による決済は、オーソリから 7 日以内にキャプチャーする必要があります。キャプチャーされなかった場合、オーソリは自動的にキャンセルされ、決済をキャプチャーできなくなります。
### オーソリのみ行うように Stripe に指示する
オーソリとキャプチャーを分離することを示すには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、顧客の決済手段で金額のオーソリのみを行うように Stripe に指示します。
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d "payment_method_types[]=link" \
-d "payment_method_types[]=card" \
-d amount=1099 \
-d currency=usd \
-d capture_method=manual
```
### 売上をキャプチャーする
オーソリが完了すると、PaymentIntent の[ステータス](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) は `requires_capture` に移行します。オーソリ済みの売上をキャプチャーするには、PaymentIntent の[キャプチャー](https://docs.stripe.com/api/payment_intents/capture.md)リクエストを作成します。デフォルトではオーソリ済みの総額がキャプチャーされます。これを超える金額をキャプチャーすることはできませんが、これより少ない金額をキャプチャーすることは可能です。
```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
-u "<>:" \
-d amount_to_capture=750
```
### (任意)オーソリをキャンセルする
オーソリをキャンセルする必要がある場合は、[PaymentIntent をキャンセル](https://docs.stripe.com/refunds.md#cancel-payment)してください。
## 支払い後のイベントを処理する [サーバー側]
支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。[Webhook を使用してこれらのイベントを受信](https://docs.stripe.com/webhooks/quickstart.md)し、顧客への注文確認メールの送信、データベースへの売上の記録、配送ワークフローの開始などのアクションを実行します。
クライアントからのコールバックを待つのではなく、こうしたイベントをリッスンするように組み込みを設定します。クライアントからのコールバックを待っているときに、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする場合もあります。非同期型のイベントをリッスンするよう組み込みを設定すると、[さまざまなタイプの支払い方法](https://stripe.com/payments/payment-methods-guide)を 1 つの組み込みで受け付けることができます。
Payment Element を使用して支払いを回収する場合は、`payment_intent.succeeded` イベント以外に重要な 2 つのイベントも処理することができます。
| イベント | 説明 | アクション |
| ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | 顧客が正常に支払いを完了したときに Stripe から送信されます。 | 顧客に注文の確定を送信し、注文の*フルフィルメント* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected)を実行します。 |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | 顧客が支払いを試み、その支払いに失敗した場合に Stripe から送信されます。 | 支払いが `processing` から `payment_failed` に変わった場合は、顧客に再度支払いを試すように促します。 |
## 構築したシステムをテストする
> *サンドボックス* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes)Linkアカウントには実際のユーザーデータを保存しないでください。これらのテストアカウントは公開可能キーに関連付けられているため、公開可能なものとして扱ってください。
現在、Link はカード、および資格を満たしたアメリカの銀行口座からの購入にのみ対応しています。Link では、[ドメインの登録](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)が必要です。
有効な任意のメールアドレスを使用して、Link のサンドボックスアカウントを作成できます。以下の表には、Stripe のサンドボックスアカウントの認証に使用できる、固定値のワンタイムパスコードが示されています。
| 値 | 結果 |
| --------------------- | -------------------- |
| 以下に記載されていない任意の 6 桁の数字 | 成功 |
| 000001 | エラー: コードが無効です |
| 000002 | エラー: コードの有効期限が切れています |
| 000003 | エラー: 最大試行回数を超えました |
特定の決済手段をテストするには、[Payment Element のテスト例](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources)をご覧ください。
### 複数の資金供給元
対応する資金供給元を Stripe が追加した場合でも、貴社で構築済みのシステムを更新する必要はありません。Stripe が自動的に対応し、カード決済や銀行口座決済の場合と同じ売上処理時間と保証が適用されます。
### カード認証と 3D セキュア
Linkは、カード決済で *3D Secure 2 (3DS2)* 認証をサポートしています。3DS2 では、顧客が決済時にカード発行会社で追加の認証ステップを完了するように要求されます。3DS を使用して認証が成功した決済は、*ライアビリティシフト* (With some 3D Secure transactions, the liability for fraudulent chargebacks (stolen or counterfeit cards) shifts from you to the card issuer)の対象になります。
サンドボックスで Link を使用して 3DS2 認証のチャレンジフローを起動するには、任意の CVC、郵便番号、および将来日付の有効期限を指定してテストカード 4000000000003220 を使用します。
サンドボックスでは、認証プロセスで認証の模擬ページが表示されます。このページでは、支払いを承認またはキャンセルできます。支払いを承認すると、認証の成功がシミュレーションされ、指定された戻り先 URL にリダイレクトされます。**Failure (失敗)** ボタンをクリックすると、認証の失敗がシミュレーションされます。
詳細については、[3D セキュア認証ページ](https://docs.stripe.com/payments/3d-secure.md)をご覧ください。
> 3DS フローのテストでは、3DS2 用のテストカードを使用している場合にのみ Link の認証が起動されます。
## Optional: 顧客の保存済みデータを表示する [サーバー側] [クライアント側]
顧客が保存した住所と決済手段を表示することに加えて、Link に保存されている住所や決済手段も表示できます。
> #### Accounts v2 API を使用した顧客の表現
>
> Accounts v2 API では、Connect ユーザーには一般提供され、その他の Stripe ユーザーには公開プレビューで提供されます。Accounts v2 プレビューの一部である場合は、コードで[プレビューバージョン](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning)を指定する必要があります。
>
> Accounts v2 プレビューへのアクセスをリクエストするには、
>
> ほとんどのユースケースでは、[Customer](https://docs.stripe.com/api/customers.md) オブジェクトを使用するのではなく、[顧客を顧客設定済みの Account オブジェクトとしてモデル化する](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md)ことをお勧めします。
顧客が複数の決済手段を保存している場合、Stripe は、Linkに保存されている決済手段に加えて、直近で使用された保存済みカード 3 件を表示します。
これを行うには、Ephemeral Key を作成し、`Account` ID (顧客設定の `Account` オブジェクトとして表される顧客の場合) または `Customer` ID (`Customer` オブジェクトとして表される顧客の場合) とともにフロントエンドに送信します。顧客に関する情報は機密性が高いため、Stripe.js 内で直接取得することはできませんが、Ephemeral Key を使用するとこのデータに一時的にアクセスできます。
#### Accounts v2
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-05-27.dahlia" \
-d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
#### Customers v1
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-05-27.dahlia" \
-d "customer"="{{CUSTOMER_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer"="{{CUSTOMER_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
クライアント側では、`clientSecret` を使用して `customerOptions` を取得します。
```jsx
(async () => {
const response = await fetch('/secret');const {clientSecret, customerOptions} = await response.json();
})
```
次に `customerOptions.ephemeralKey` と `customerOptions.customer` の値を、[Elements グループ](https://docs.stripe.com/js/elements_object/create)の `customerOptions` オプションに渡します。また、Stripe インスタンスを読み込む際に `elements_customers_beta_1` ベータフラグを渡す必要があります。
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>', {apiVersion: '2026-05-27.dahlia',
betas: ['elements_customers_beta_1'],
});
const appearance = {/* ... */};
const loader = 'auto';
const CheckoutPage =({
clientSecret,customerOptions,
}) => (
);
```
#### HTML + JS
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>', {betas: ['elements_customers_beta_1'],
});
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2) and appearance (optional).
const elements = stripe.elements({
clientSecret,
appearance,
loader,customerOptions,
});
```
## Optional: Save Link payment methods [サーバー側] [クライアント側]
Link の決済手段は、将来の*オフセッション決* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information)や*サブスクリプション* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)のために保存できますが、将来の*オンセッション決済* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method)のためには保存できません。そのためには、顧客設定の `Account` または `Customer` オブジェクトとして表される顧客に関連付ける必要があります。
> #### Accounts v2 API を使用した顧客の表現
>
> Accounts v2 API では、Connect ユーザーには一般提供され、その他の Stripe ユーザーには公開プレビューで提供されます。Accounts v2 プレビューの一部である場合は、コードで[プレビューバージョン](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning)を指定する必要があります。
>
> Accounts v2 プレビューへのアクセスをリクエストするには、
>
> ほとんどのユースケースでは、[Customer](https://docs.stripe.com/api/customers.md) オブジェクトを使用するのではなく、[顧客を顧客設定済みの Account オブジェクトとしてモデル化する](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md)ことをお勧めします。
#### Accounts v2
顧客がアカウントを作成するか、お客様のビジネスで初めて取引を行う際は、将来使用できるようにデータを保存するため、顧客設定の `Account` オブジェクトを作成します。次に、`customer_account` を指定して `PaymentIntent` を作成します。
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d setup_future_usage=off_session
```
顧客に再度請求する準備ができたら、`customer_account` ID と、生成された *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) ID を使用して、新しい `PaymentIntent` を作成します。
#### Customers v1
顧客がアカウントを作成するか、お客様のビジネスで初めて取引を行う際は、将来使用できるようにデータを保存するため、`Customer` オブジェクトを作成します。次に、`customer` を指定して `PaymentIntent` を作成します。
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d setup_future_usage=off_session
```
顧客に再度請求する準備ができたら、`customer` ID と、生成された *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) ID を使用して、新しい `PaymentIntent` を作成します。
[off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) を `true` に設定します。これにより、顧客がサイトやアプリをアクティブに使用していないときに認証が必要な場合、`PaymentIntent` はエラーを返します。
#### Accounts v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
## 顧客に Stripe を開示する
Stripe は顧客の Elements とのやり取りに関する情報を収集して、サービスを提供し、不正利用を防止し、サービスを向上します。これには、Cookie と IP アドレスを使用して、1 つの決済フローセッションで顧客に表示する Elements を特定することが含まれます。Stripe がこのような方法でデータを使用するために必要なすべての権利と同意について開示し、これらを取得することはお客様の責任です。詳細については、[プライバシーセンター](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe)をご覧ください。
## See also
- [Linkの概要](https://docs.stripe.com/payments/link.md)
- [Link と Elements](https://docs.stripe.com/payments/link/elements-link.md)
- [Payment Element での Link](https://docs.stripe.com/payments/link/payment-element-link.md)
- [Contact Details Element の詳細を見る](https://docs.stripe.com/payments/link/contact-details-element.md)
- [さまざまな決済導入での Link](https://docs.stripe.com/payments/link/link-payment-integrations.md)