# Elements と Link を使用して以降の支払いを設定する

Link の顧客の詳細を保存し、後で請求します。

このガイドでは、[Link](https://docs.stripe.com/payments/link.md) を使用して、[Setup Intents API](https://docs.stripe.com/api/setup_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) を使用する場合は、この方法をお勧めします。
![購入時に Payment Element で直接 Link を認証または登録する](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

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'
```

## 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 のプレビューに参加するには、ダッシュボードの [Account previews and features](https://dashboard.stripe.com/settings/previews) に移動して、**Global Payouts の再利用可能な決済手段**を有効にします。
> 
> ほとんどのユースケースでは、[Customer](https://docs.stripe.com/api/customers.md) オブジェクトを使用するのではなく、[顧客を顧客設定済みの Account オブジェクトとしてモデル化する](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md)ことをお勧めします。

#### Accounts v2

将来の決済に備えて決済手段を設定するには、顧客が設定した [Account](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) (アカウント) に関連付ける必要があります。顧客が自社のビジネスでアカウントを作成するときに、`Account` オブジェクトを作成します。

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-04-22.preview" \
  --json '{
    "contact_email": "jenny.rosen@example.com",
    "display_name": "Jenny Rosen",
    "identity": {
        "country": "us",
        "individual": {
            "given_name": "Jenny Rosen"
        }
    },
    "configuration": {
        "customer": {
            "capabilities": {
                "automatic_indirect_tax": {
                    "requested": true
                }
            }
        }
    },
    "include": [
        "configuration.customer",
        "identity"
    ]
  }'
```

#### Customers v1

今後の決済に備えて決済手段を設定するには、その決済手段を*顧客* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)に関連付ける必要があります。顧客が自社のビジネスでアカウントを作成するときに、`Customer` オブジェクトを作成します。

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "name=Jenny Rosen"
```

## SetupIntent を作成する [サーバー側]

> 最初に SetupIntent を作成せずに Payment Element をレンダリングする場合は、[インテントを作成する前に支払いの詳細を収集する](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=setup)をご覧ください。

[SetupIntent (支払い方法設定インテント)](https://docs.stripe.com/api/setup_intents.md) は、セッション中に将来の決済に備えて顧客の支払い方法を設定するという意図を示すオブジェクトであり、セッションのステータスを追跡します。SetupIntent は、`link` と、サポートするその他の支払い方法を指定して、サーバーで作成します。

#### Accounts v2

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "automatic_payment_methods[enabled]=true"
```

#### Customers v1

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "automatic_payment_methods[enabled]=true"
```

その他の支払い方法の設定方法については、[将来の支払いを設定する](https://docs.stripe.com/payments/save-and-reuse.md)ガイドをご覧ください。

### client secret を取得する

SetupIntent には、*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 SetupIntent
  {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/setup_intents/object.md#setup_intent_object-client_secret) を追加します。サーバー側のコードで、SetupIntent から client secret を取得します。

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the SetupIntent
  erb :checkout
end
```

## 顧客のメールアドレスを収集する

Link は、メールアドレスを使用して顧客を認証します。決済フローに応じて、Payment Element にメールアドレスを渡す、Payment Element 内で直接収集する、または Contact Details Element を使用する、という選択肢があります。この中では、顧客のメールアドレスがある場合は、Payment Element に渡すことを Stripe は推奨しています。

#### メールアドレスを渡す

以下の「いずれか」に該当する場合:

- 顧客が支払いページに到達する前に、顧客プロフィールなどで顧客のメールアドレスを確認している場合。
- 顧客から配送先住所を収集する必要がない場合。
- 決済フォームの前に配置する自社構築のメールアドレス入力フィールドを使用する場合。

次に、顧客のメールアドレスを Payment Element に渡して、Linkを導入します。これにより、顧客が決済ステップに到達するとすぐに Link の認証フローが起動され、決済がスピーディーになります。このオプションでは、Payment Element を 1 つ実装します。
![Payment Element の Link を使用した未登録ユーザーのプレビュー](https://b.stripecdn.com/docs-statics-srv/assets/lape-unregistered-user.293e19b8cc97c58e2c7dc22f8ef8f75b.png)

Link は収集したメールアドレスを決済フォームに自動入力して、決済をスピーディーに進められるようにします。
![Payment Element の Link を使用した登録ユーザーのプレビュー](https://b.stripecdn.com/docs-statics-srv/assets/collect-email-before-returning-user.d6dee1a891e3068b1c1892edefa9c01f.png)

既存のユーザーの場合、Link が顧客に認証プロンプトを表示する

このフローでは、顧客が決済ステップに到達する_「前」_に、自社のフォームフィールドでメールアドレスの収集を管理し、そのメールアドレスを Payment Element に渡します。Payment Element は決済ステップで顧客を認証し、Link アカウントに保存されている顧客の決済情報を表示するか、カード詳細の入力後に Link アカウント作成フォームを表示します。処理の流れは次のとおりです。

Integrate Link using the Payment Element (See full diagram at https://docs.stripe.com/payments/link/save-and-reuse)

```text
[クライアント側] -- 顧客のメールアドレスを Payment Element に渡す --> [Stripe]
[Stripe] -- 顧客がLinkへの認証を行う --> [Link]
[Link] -- Payment Element が、Linkに保存された決済情報を Stripe の決済画面に表示する --> [顧客]
[顧客] -- 顧客が支払う --> [Stripe]
[Stripe] -- payment_method_type=link で支払う --> [加盟店]
```

この実装オプションでは、顧客の配送先住所は収集されません。配送先住所を収集する必要がある場合は、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 を使用して決済フォームを作成する](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.d52f05825c982aaf84a4ad1e9bb422f3.png)

複数の Elements を使用して決済フォームを作成する

このシステムは以下のように動作します。

A diagram describing how to integrate Link using the Contact Details Element (See full diagram at https://docs.stripe.com/payments/link/save-and-reuse)

```text
[顧客] -- 顧客が Contact Details Element にメールアドレスを入力する --> [Stripe]
[Stripe] -- 顧客がLinkへの認証を行う --> [Link]
[Link] -- Payment Element が、Linkに保存された決済情報を Stripe の決済画面に表示する --> [顧客]
[顧客] -- 顧客が支払う --> [Stripe]
[Stripe] -- payment_method_type=link で支払う --> [加盟店]
```

## 決済フォームを設定する [クライアント側]

これで、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('<<YOUR_PUBLISHABLE_KEY>>');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Payment</h3>

      // Prefill customer data using the defaultValues option. Passing in the email
      // is required for this integration. The other fields are optional.
      <PaymentElement
        options={{
          defaultValues: {
            billingDetails: {
              email: 'foo@bar.com',
              name: 'John Doe',
              phone: '888-888-8888',
            }
          }
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

#### HTML + JS

### Stripe Elements を設定する

支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

最初のパラメーターとして公開可能な [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('<<YOUR_PUBLISHABLE_KEY>>');
```

### 決済画面にLink Elements を追加

決済ページで、Elements がレンダリングできるように、一意の ID が指定された空の DOM ノードを作成します。

```html
<form id="payment-form">
  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit">Submit</button>
</form>
```

設定したフォームの読み込みが完了したら、新しい 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('<<YOUR_PUBLISHABLE_KEY>>');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Payment</h3>

      // Create the Payment Element
      <PaymentElement/>
      <button type="submit">Submit</button>
    </form>
  );
}
```

#### HTML + JS

### Stripe Elements を設定する

支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

最初のパラメーターとして公開可能な [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('<<YOUR_PUBLISHABLE_KEY>>');
```

### 決済画面にLink Elements を追加

決済ページで、Elements がレンダリングできるように、一意の ID が指定された空の DOM ノードを作成します。

```html
<form id="payment-form">
  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit">Submit</button>
</form>
```

設定したフォームの読み込みが完了したら、新しい 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/save-and-reuse.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('<<YOUR_PUBLISHABLE_KEY>>');

// 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}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Contact info</h3>
      <ContactDetailsElement
        // Optional prop for prefilling customer information
        options={{
          defaultValues: {
            email: 'foo@bar.com',
          },
        }}
      />
      <h3>Payment</h3>
      <PaymentElement
        // Optional prop for prefilling customer information
        options={{
          defaultValues: {
            billingDetails: {
              name: 'John Doe',
              phone: '888-888-8888',
            },
          },
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

`ContactDetailsElement`、`PaymentElement`、および `ShippingAddressElement` は、同じページに配置する必要はありません。顧客の連絡先情報、配送先情報、決済情報を別々のステップで表示するフローであれば、それぞれの Element を適切なステップまたは画面に表示できます。顧客が Link による配送先情報と決済情報の自動入力を最大限活用できるように、連絡先情報を収集するステップでは、メールアドレス入力欄として `ContactDetailsElement` を含めます。

決済フローの早い段階で Contact Details Element を使用して顧客のメールアドレスを収集した場合は、配送先住所入力画面や決済画面で再度表示する必要はありません。

### メールアドレスを取得する

`contactDetailsElement` コンポーネントの `onChange` プロパティを使用すると、メールアドレスの詳細を取得できます。ユーザーがメールアドレスフィールドを更新したとき、または保存済みの顧客のメールアドレスが自動入力されたときに、`onChange` ハンドラが実行されます。

```jsx
<ContactDetailsElement onChange={(event) => {
  setEmail(event.value.email);
}} />
```

### 顧客のメールアドレスを事前入力する

Contact Details Element はメールアドレスを受け付けます。顧客のメールアドレスを指定すると、`defaultValues` オプションを使用して顧客が決済画面にアクセスした時点で、Link の認証フローが開始されます。

```jsx
<ContactDetailsElement options={{defaultValues: {email: 'foo@bar.com'}}}/>
```

#### HTML + JS

### Stripe Elements を設定する

支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

最初のパラメーターとして公開可能な [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('<<YOUR_PUBLISHABLE_KEY>>');
```

### 支払いページにLink Elements を追加する

決済ページで、Elements がレンダリングできるように、一意の ID が指定された空の DOM ノードを作成します。

```html
<form id="payment-form">
  <h3>Contact info</h3>
  <div id="contact-details-element"></div>

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit">Submit</button>
</form>
```

先ほど設定したフォームが読み込まれたら、[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 のオプトインフォームに事前入力された情報。](https://b.stripecdn.com/docs-statics-srv/assets/link-prefill-pe-new-user.aad0d37d3e3698f1aab307d020b95f90.png)

顧客のメールアドレス、電話番号、氏名を事前入力して、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
  <PaymentElement
    options={{
      defaultValues: {
        billingDetails: {
          email: 'johnd@domain.com',
          name: 'John Doe',
          phone: '888-888-8888',
          address: {
            postal_code: '10001',
            country: 'US',
          }
        },
      },
    }}
  />;
```

#### 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.brand_name %} オプトインフォームに事前入力された情報。](https://b.stripecdn.com/docs-statics-srv/assets/link-prefill-cde-new-user.aa6e5022c718b22857f543fcaad20705.png)

顧客のメールアドレス、電話番号、氏名を事前入力して、Link の登録プロセスを効率化する

`defaultValues.billingDetails` オブジェクトには次の値を指定できます。

| 値 | 必須 | 形式 |
| --- | --- | --- |
| `name` | オプション | 文字列 |
| `phone` | オプション | 文字列 |
| `address` | オプション | `postal_code` フィールドおよび `country` フィールドを持つ JSON オブジェクト。フィールドはすべて文字列です。 |

すべての値が事前入力された Payment Element は、次の例のように表示されます。

#### React

```jsx
<PaymentElement
  options={{
    defaultValues: {
      billingDetails: {
        name: 'John Doe',
        phone: '888-888-8888',
        address: {
          postal_code: '10001',
          country: 'US',
        }
      },
    },
  }}
/>;
```

#### 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('<<YOUR_PUBLISHABLE_KEY>>');

// 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}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Contact info</h3>
      <ContactDetailsElement />
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />
      <button type="submit">Submit</button>
    </form>
  );
}
```

`AddressElement` を `PaymentElement` の前に表示します。`PaymentElement` は `AddressElement` によって収集された住所データを動的に検出し、不要なフィールドを非表示にして、必要に応じて追加の請求先住所を収集します。

### 住所情報を取得する

顧客が支払いを送信すると `AddressElement` から配送先住所が自動的に渡されますが、`onChange` プロパティを使用してフロントエンドで住所詳細を取得することもできます。ユーザーが Address Element のフィールドを更新するか、保存された住所を選択するたびに、`onChange` ハンドラーがイベントを送信します。

```jsx
<AddressElement onChange={(event) => {
  setAddressState(event.value);
}} />
```

### 配送先住所を事前入力する

[defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) を使用して住所情報を事前入力し、顧客の決済をスピードアップします。

```jsx
<AddressElement options={{
  mode: 'shipping',
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    }
  }
}}>
```

#### HTML + JS

[Address Element](https://docs.stripe.com/elements/address-element.md) では、配送先住所または請求先住所を収集できます。Address Element 用の空の DOM ノードを作成します。これを Contact Details Element の後に表示します。

```html
<form id="payment-form">
  <h3>Contact info</h3>
  <div id="contact-details-element"></div>

  <h3>Shipping</h3>
  <div id="address-element"></div>

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button type="submit">Submit</button>
</form>
```

次に、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('<<YOUR_PUBLISHABLE_KEY>>');

// 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 のデザインをカスタマイズする](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png)

Elements のデザインをカスタマイズする

## SetupIntent を送信する [クライアント側]

収集した詳細を指定し、[stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) を使用して設定を完了します。ユーザーが設定を完了した後に Stripe がユーザーをリダイレクトできるように、この関数に [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) を指定します。決済が成功すると、Stripe は直ちに Link とカード決済を `return_url` にリダイレクトします。

#### 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('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    const {error} = await stripe.confirmSetup({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (error) {
      // handle error
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}
```

#### HTML + JS

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmSetup({
    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`.
  }
});
```

## 保存された支払い方法に後で請求する [サーバー側]

#### Accounts v2

顧客に請求する準備ができたら、`Account` ID と `PaymentMethod` ID を使用して、`PaymentIntent` を作成します。

まず、顧客に関連付けられている決済手段を一覧表示し、その中から使用する決済手段を選択します。

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d type=link
```

#### Customers v1

顧客に請求する準備ができたら、`Customer` ID と `PaymentMethod` ID を使用して、`PaymentIntent` を作成します。

まず、顧客に関連付けられている決済手段を一覧表示し、その中から使用する決済手段を選択します。

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d type=link
```

次に、これらのパラメータを指定して `PaymentIntent` を作成します。

- 決済に応じて、[amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) と [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) を設定します。
- [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) を true に設定すると、`PaymentIntent` の作成時にすぐに確定が行われます。
- [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) を `PaymentMethod` の ID に設定します。
- [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) を `Account` の ID に設定するか、[customer](https://docs.stripe.com/api.md#create_payment_intent-customer) を `Customer` の ID に設定します。
- [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 "<<YOUR_SECRET_KEY>>:" \
  -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 "<<YOUR_SECRET_KEY>>:" \
  -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
```

## 実装をテストする

> *サンドボックス* (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 supports credit cards, debit cards, and qualified US bank account purchases.

有効な任意のメールアドレスを使用して、Link のサンドボックスアカウントを作成できます。以下の表には、Stripe のサンドボックスアカウントの認証に使用できる、固定値のワンタイムパスコードが示されています。

| 値 | 結果 |
| --- | --- |
| 以下に記載されていない任意の 6 桁の数字 | 成功 |
| 000001 | エラー: コードが無効です |
| 000002 | エラー: コードの有効期限が切れています |
| 000003 | エラー: 最大試行回数を超えました |

特定の決済手段をテストするには、[Payment Element のテスト例](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources)をご覧ください。

### 複数の資金供給元

Stripe automatically supports additional funding sources without changes to your integration. They use the same transaction settlement time and processing behavior as card and bank account payments.

### カード認証と 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 の認証が起動されます。

## 顧客に 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

- [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)