# Link を含むカスタムの決済ページを構築する
Payment Element または Link Authentication 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) または [Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md) のいずれかを通じて、決済を受け付ける方法について説明します。
Link の認証または登録のために顧客のメールアドレスを保護する方法は 3 種類あります。
- **メールアドレスを渡す:** [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) を使用して、メールアドレスを Payment Element に渡すことができます。決済フローで顧客のメールアドレスまたは電話番号を収集した場合は、このアプローチをお勧めします。
- **メールアドレスを収集する:** Payment Element で直接、メールアドレスを収集できます。決済フローでメールアドレスを収集しない場合は、このアプローチをお勧めします。
- **Link Authentication Element:** Link Authentication Element を使用して、1 つでメールアドレスの回収と 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 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 を有効にします。
1. 決済手段を手動で一覧化する既存の実装がある場合は、実装から [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 内で直接メールアドレスを収集する」、または「Link Authentication Element を使用する」というオプションがあります。これらのうち可能であれば、顧客のメールアドレスを Payment Element に渡す方法をおすすめします。
#### メールアドレスを渡す
以下の「いずれか」に該当する場合:
- 顧客が支払いページに到達する前に、顧客プロフィールなどで顧客のメールアドレスを確認している場合。
- 顧客から配送先住所を収集する必要がない場合。
- 決済フォームの前に配置する自社構築のメールアドレス入力フィールドを使用する場合。
次に、顧客のメールアドレスを Payment Element に渡して、Linkを導入します。これにより、顧客が決済ステップに到達するとすぐに Link の認証フローが起動され、決済がスピーディーになります。このオプションでは、Payment Element を 1 つ実装します。
Link は収集したメールアドレスを決済フォームに自動入力して、決済をスピーディーに進められるようにします
Linkが既存の顧客に認証プロンプトを表示する
このフローでは、顧客が決済ステップに到達する_「前」_に、自社のフォームフィールドでメールアドレスの収集を管理し、そのメールアドレスを Payment Element に渡します。Payment Element は決済ステップで顧客を認証し、Link アカウントに保存されている顧客の決済情報を表示するか、カード詳細の入力後に Link アカウント作成フォームを表示します。処理の流れは次のとおりです。
Integrate Link using the Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
この導入オプションでは顧客の配送先住所を収集しません。配送先住所の収集が必要な場合は、Link Authentication Element、Address Element、Payment Element を使用して Link を導入します。
#### メールアドレスを収集する
Payment Element で Link の認証を行うと、顧客は追加の導入作業なしに Payment Element で直接メールアドレスを入力できます。
このフローでは、顧客が購入時に Payment Element に直接メールアドレスを入力して、Link で認証するか、Link に登録します。顧客が Link に登録しておらず、Payment Element でサポートされている決済手段を選択すると、Link を使用して詳細を保存するように求められます。すでに登録している場合は、Link は決済情報を自動的に入力します。
#### Link Authentication Element を使用する
以下の「いずれか」に該当する場合:
- メールアドレスの回収と Link の認証が最適化された 1 つのコンポーネントを使用する場合。
- 顧客から配送先住所を収集する必要がある場合。
その場合、Link Authentication Element、Payment Element、必要に応じて Address Element を実装する導入フローを使用します。
Link 対応の決済画面では、最初に Link Authentication Element があり、その次に Address Element が続き、最後に Payment Element となります。決済フローが複数ページにわたる場合、Link Authentication Element を各ページに同じ順序で表示することもできます。
複数の Elements を使用して決済フォームを作成する
このシステムは以下のように動作します。
A diagram describing how to integrate Link using the Link Authentication 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");
```
#### Link Authentication Element を使用する
Link Authentication 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
```
決済ページで、決済フォームを `Elements` コンポーネントでラップし、[前のステップ](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) を渡します。フォームの別の部分で顧客のメールアドレスをすでに収集している場合には、既存の入力を `linkAuthenticationElement` に置き換えます。
メールアドレスを収集しない場合、決済フローに `linkAuthenticationElement` を追加します。Link の `linkAuthenticationElement` を `ShippingAddressElement` (配送先住所を収集する場合は任意) と `PaymentElement` の前に配置する必要があります。これにより、Link は `ShippingAddressElement` および `PaymentElement` で顧客の保存済みの詳細を自動入力します。また、サイトのデザインに合わせて Elements をカスタマイズする [appearance option](https://docs.stripe.com/elements/appearance-api.md) を渡して、配置前にカスタマイズできます。
顧客のメールアドレスを把握している場合は、それを `defaultValues` オプションで `linkAuthenticationElement` に渡します。これによりメールアドレスが事前入力され、Link の認証プロセスが開始されます。
その他の顧客情報がある場合は、`defaultValues.billingDetails` というオブジェクトを `PaymentElement` に渡します。できるだけ多くの情報を事前入力することで、顧客の Link アカウントの作成やアカウントの再利用を効率化できます。
次に、`linkAuthenticationElement` と `PaymentElement` の各コンポーネントを決済フォームにレンダリングします。
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,
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 (
);
}
```
`linkAuthenticationElement`、`PaymentElement`、`ShippingAddressElement` は同じページになくてもかまいません。顧客の連絡先情報、配送先の詳細、決済の詳細をそれぞれ別のステップで顧客に表示するプロセスがある場合、適切なステップまたはページで各 Element を表示できます。Link が提供している配送先と決済の自動入力機能を顧客が最大限に活用できるように、連絡先情報回収ステップにメール入力フォームとして `linkAuthenticationElement` を含めてください。
決済フローの早い段階で Link Authentication Element を使用して顧客のメールアドレスを回収している場合、配送ページや決済画面でそれを再び表示する必要はありません。
### メールアドレスを取得する
`linkAuthenticationElement` コンポーネントの `onChange` プロパティを使用してメールアドレスの詳細を取得できます。ユーザーがメールアドレスフィールドを更新するか、保存された顧客のメールアドレスが自動入力されると、`onChange` ハンドラーが起動します。
```jsx
{
setEmail(event.value.email);
}} />
```
### 顧客のメールアドレスを事前入力する
Link Authentication 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 グループを作成します。支払いフォームで顧客のメールアドレスをすでに収集している場合には、既存の入力を `linkAuthenticationElement` に置き換えます。
メールアドレスを収集しない場合は、決済フローの `shippingAddress` (配送先住所を収集する場合は任意) の前に `linkAuthenticationElement` を追加します。Link は Link に保存された詳細を顧客の `shippingAddress` と `PaymentElement` に自動入力するには `PaymentElement` を追加します。また、[appearance オブジェクト](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance)を渡して、サイトのデザインに合わせて Elements をカスタマイズできます。
顧客のメールアドレスを把握している場合は、それを `linkAuthenticationElement` の `defaultValues` オプションに渡します。こうすると、メールアドレスが事前入力され、Link の認証プロセスが開始されます。その他の顧客情報も把握している場合は、それを `PaymentElement` の `defaultValues.billingDetails` オブジェクトに渡します。できるだけ多くの情報を事前入力することで、顧客の 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 linkAuthenticationElement = elements.create("linkAuthentication");
// 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
linkAuthenticationElement.mount("#link-authentication-element");
paymentElement.mount("#payment-element");
```
`linkAuthenticationElement` によってメールアドレス入力が表示されます。Linkで、顧客のメールアドレスと既存の Link アカウントが一致すると、その顧客の携帯電話に認証用の安全なワンタイムコードが送信されます。顧客が認証に成功すると、Stripe は、Linkに保存された住所と決済手段を自動的に表示し、顧客が使用できるようにします。
`PaymentElement` によって動的なフォームが表示され、顧客は決済手段タイプを選択できます。このフォームでは、顧客が選択した決済手段に必要な決済詳細のすべてが自動的に回収されます。`PaymentElement` は、Link に保存された決済手段を、認証済みの顧客に表示する処理も行います。
LinkAuthentication,、Payment、Shipping Address の各 Element は同じページになくてもかまいません。購入時のプロセスで顧客の連絡先情報、配送先情報、支払いの詳細がそれぞれステップごとに顧客に表示される場合、適切なステップまたはページに各 Element を表示できます。顧客が Link が提供する自動入力機能を最大限に活用できるようにするため、連絡先情報収集ステップにメールアドレス入力フォームとして Link認証 Element を含めてください。
決済フローの早い段階で Link Authentication Element を使用して顧客のメールアドレスを回収している場合、配送ページや決済画面でそれを再び表示する必要はありません。
### メールアドレスを取得する
`linkAuthenticationElement` コンポーネントの `onChange` プロパティを使用してメールアドレスの詳細を取得できます。ユーザーがメールアドレスフィールドを更新するか、保存された顧客のメールアドレスが自動入力されると、`onChange` ハンドラーが起動します。
```javascript
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
});
```
### 顧客のメールアドレスを事前入力する
Link Authentication Element はメールアドレスを受け付けます。顧客のメールアドレスを指定すると、顧客が `defaultValues` オプションを使用して決済画面に到達するとすぐに Link の認証フローが開始されます。
```javascript
// Create linkAuthentication element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-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()};
});
```
#### Link Authentication Element にメールアドレスを渡す
Link Authentication Element を使用している場合、`defaultValues.billingDetails` オブジェクトを Payment Element に追加して、顧客の名前、電話番号、配送先住所を事前入力できます。できるだけ多くの顧客の情報を事前入力すると、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: 配送先住所を収集する [クライアント側]
#### メールアドレスを渡す
この導入オプションでは、顧客の配送先住所は収集されません。配送先住所を収集する必要がある場合は、[Link Authentication Element の使用](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping)ステップで Link Authentication Element、Address Element、Payment Element を使用して Link を導入します。
#### Link Authentication Element を使用する
#### React
住所を回収するには、[Address Element](https://docs.stripe.com/elements/address-element.md) を表示する空の DOM ノードを作成します。保存されている顧客の住所の詳細を Link が自動入力できるようにするには、Address Element を Link Authentication Element の後に表示する必要があります。
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,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 ノードを作成して、Link Authentication 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 linkAuthenticationElement = elements.create("linkAuthentication");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-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 プレビューへのアクセスをリクエストするには、
>
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.
顧客が複数の決済手段を保存している場合、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-04-22.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-04-22.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-04-22.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 プレビューへのアクセスをリクエストするには、
>
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.
#### 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)
- [Link Authentication Element の詳細を見る](https://docs.stripe.com/payments/link/link-authentication-element.md)
- [さまざまな決済導入での Link](https://docs.stripe.com/payments/link/link-payment-integrations.md)