# Payment Element の Link

Payment Element の Link で顧客がスピーディーに決済できるようにします。

顧客が [Payment Element](https://docs.stripe.com/payments/payment-element.md) で [Link](https://docs.stripe.com/payments/link.md) を使用してスピーディーに購入できるようにします。Link をすでに使用しているログイン中の顧客の情報は、顧客が最初に別のビジネスで Link に情報を保存したかどうかに関係なく、自動入力できます。デフォルトの Payment Element の実装では、カードフォームに Link プロンプトが表示されます。Payment Element で Link を管理するには、 [決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)に移動します。
![購入時に Payment Element で直接 Link を認証または登録する](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Link の認証または登録のために顧客のメールアドレスを回収する

## 導入オプション

Payment Element を使用して Link を導入する方法は 2 つあります。中でも、Stripe は、利用可能な場合、Payment Element に顧客のメールアドレスを渡す方法を推奨しています。これらのオプションから決定する際は、必ず貴社の決済フローの仕組みを考慮してください。

| 導入オプション                                        | 決済フロー                                                                            | 説明                                                                                                                |
| ---------------------------------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| Payment Element に顧客のメールアドレスを渡します (Recommended) | - 顧客は、購入ページを開く前に (以前のアカウント作成ステップなどで) メールアドレスを入力します。
  - 自社のメールアドレス入力フィールドを使用したい。 | 顧客のメールアドレスを Payment Element にプログラムで渡します。このシナリオでは、顧客は別の UI コンポーネントではなく、決済フォームで直接 Link の認証を行います。                    |
| Payment Element で顧客のメールアドレスを収集する               | - 顧客は、決済時に Payment Element で直接、メールアドレスを入力して認証するか、Link に登録できます。
  - コード変更が不要です。   | 顧客が Link に登録しておらず、Payment Element で対応している決済手段を選択すると、Link を使用して詳細を保存するように求められます。すでに登録している場合は、Link が決済情報を自動的に入力します。 |

[defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) を使用して、顧客のメールアドレスを Payment Element に渡します。

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      email: 'foo@bar.com',
    }
  },
  // Other options
});
```

詳細については、Link を含むカスタム決済画面を[構築する方法をご覧ください](https://docs.stripe.com/payments/link/add-link-elements-integration.md)。

## 決済プロセスを高速化

[defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) を使用して顧客情報を事前入力すると、Linkでの決済がユーザーにとってより迅速になります。[defaultValues.billingDetails](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues-billingDetails) を介して顧客のメールアドレスを Payment Element に渡します。

```javascript
// Pass in defaultValues to prefill consumer information
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      name: 'John Doe',
      email: 'john.doe@example.com',
      address: {
        city: 'New York',
        country: 'US',
        line1: '123 Main St',
        postal_code: '10001',
        state: 'NY'
      }
    },
}});
```

## 顧客の Link に自動的に事前入力する

顧客が決済ページのどこかですでに詳細情報を入力済みの場合、Linkへの再登録やログインの際に詳細情報を再入力する手間を省けます。Linkには、メールアドレスや電話番号などの顧客情報を決済フローで検出し、対応する Link フィールドに自動的に入力する事前入力ツールが含まれています。この利便性により、顧客が Link の利用を促進し、決済完了率が向上することが実証されています。顧客が Link の登録を完了するまで、事前入力された値は保管されません。

Link が有効になっている Element と同じ決済ページで顧客がメールアドレス、電話番号、氏名などの情報を入力した場合に、Linkの事前入力ツールで行えることは以下のとおりです。

- Link 登録フォームに顧客のメールアドレス、電話番号、または氏名を入力します。顧客はアカウントを作成するために Link 登録を完了する必要があります。
- 顧客がすでに Link アカウントを持っている場合、Linkのログイン情報に顧客のメールアドレスを入力します。そのため、顧客はワンタイムパスワードを入力するだけで済みます。

### スピーディーな登録プロセスを有効にする

デフォルトで顧客の決済情報を Link に保存するようにオプトインすると、Linkの登録率を向上できます。Linkに決済情報を保存している顧客は、お客様のビジネスで支払う際に決済の詳細を再入力することなく決済できます。

この設定により Link の登録フィールドが自動的に拡張され、顧客が登録できるように、メールアドレスや電話番号などの情報を事前入力できます。

この機能はデフォルトで有効になっています。設定ページ (**設定** > **決済手段** > **Link**) から、または連結アカウントの設定で機能を設定できます。この機能を使用できるかどうかは、顧客の国によって異なります。データプライバシーに関する法律は管轄区域によって異なるため、現地の規制によって禁止されている場合、Linkはこの機能を無効にするか、制限します。また、顧客はいつでもオプトアウトできます。

### 事前入力ツールを有効にする

Link の事前入力ツールでは、既存の導入を変更する必要はありません。Linkを有効にすると、事前入力ツールはデフォルトで有効になります。事前入力ツールは、ダッシュボードの [Link の設定](https://dashboard.stripe.com/settings/link#features)でいつでも無効にできます。

#### 仕組みについて

顧客が、Linkを有効にした Element を含むページを読み込むと、`defaultValue` パラメーターによって Stripe の顧客データがまだ提供されていない場合、システムが周辺の決済ページを分析して、Linkの登録フィールドまたはログインフィールドに一致する詳細が含まれる入力フィールドを特定します。Linkは、Linkアカウントの作成または再利用に該当する情報のみを探します。

Stripe では、このようなデータフィールドを検出した場合、その値を使用して Link のログイン情報にメールを事前入力したり、登録フィールドに Link アカウントの作成に必要な顧客情報を事前入力したりします。事前入力された値は、クッキーやローカルストレージ、その他のサービスを使用してブラウザに保存されることはありません。値は、セッションのコンテキストで使用する目的で、一時的にローカルメモリに保持されるだけです。

現在の Link ユーザーの場合、事前入力された情報を使用して Link へのログインがトリガーされ、ページの情報は保存されません。

Link アカウントをまだ作成していない顧客は、事前入力された情報を使用して Link に登録するかどうかを選択できます。Stripe は、顧客が操作を実行し、Linkアカウントを作成することに同意した場合にのみ、事前入力された情報を保存します。

## 実装内容をテストする

> *サンドボックス* (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                | エラー: 最大試行回数を超えました    |

### 複数の資金供給元

対応する資金供給元を Stripe が追加した場合でも、貴社で構築済みのシステムを更新する必要はありません。Stripe が自動的に対応し、カード決済や銀行口座決済の場合と同じ売上処理時間と保証が適用されます。

## See also

- [Stripe Web Elements](https://docs.stripe.com/payments/elements.md)
- [Payment Element](https://docs.stripe.com/payments/payment-element.md)
- [Address Element](https://docs.stripe.com/elements/address-element.md)