# Card Element の Link

Card Element で Link を使用した購入を有効にします。

> Stripe は、現在では Web Elements の導入に Card Element を使用することを推奨していません。Linkを導入するには、推奨される Elements ([Link Authentication Element](https://docs.stripe.com/payments/link/link-authentication-element.md)、[Express Checkout Element](https://docs.stripe.com/payments/link/express-checkout-element-link.md)、[Payment Element](https://docs.stripe.com/payments/link/payment-element-link.md)) のいずれかを使用します。

Card Element の [Link](https://docs.stripe.com/payments/link.md) を使用すると、顧客の決済情報を保存して自動入力できます。これにより、顧客が決済の詳細を手動で入力する必要がなくなります。

Card Element では 2 種類のフォームとして、単一行の [Card Element](https://docs.stripe.com/js/element/other_element?type=card)、または分割 Element ([Card Number](https://docs.stripe.com/js/element/other_element?type=cardNumber)、[Expiry](https://docs.stripe.com/js/element/other_element?type=cardExpiry)、[CVC](https://docs.stripe.com/js/element/other_element?type=cardCvc) など) を使用できます。Card Element の説明において、以下の情報はどちらのフォームにも適用されます。

## Linkフロー

#### 単一行の Card Element

Link が有効になっている場合、クレジットカード入力フォームに **Link** ボタンが表示されます。認証された顧客がこのボタンをクリックすると、決済の詳細が自動入力されます。Link対応ビジネスでは、顧客は 90 日に 1 回、アカウントを認証するだけですみます。
![Link が顧客の支払いの詳細を自動入力する](https://b.stripecdn.com/docs-statics-srv/assets/link-single-ce-returning-user.e50d94e96551810ac4f95c2fabfd33b9.png)

Link が顧客の決済の詳細を自動入力する

顧客が Link に登録していない場合に **Link** ボタンをクリックすると、メールアドレス、電話番号、決済手段を追加するように求められます。顧客は、最初に Card Element にカードの詳細を入力して、そのクレジットカードを Link アカウントに保存することもできます。
![顧客が Link に登録する](https://b.stripecdn.com/docs-statics-srv/assets/link-single-ce-new-user.b8495f2e5258b8cf04b5d43e3a290ec0.png)

顧客が Link に登録する

Link のリピート顧客が **Link** ボタンをクリックすると、認証が必要な場合には、Link が SMS またはメールのコードで認証するよう求められます。顧客が認証した後、Linkは、すでに保存されている決済の詳細を読み込み、顧客がスピーディーに購入できるようにします。
![Link が顧客を認証する](https://b.stripecdn.com/docs-statics-srv/assets/link-in-ce-dialog.ec3340f0aaa847f610249e7dcc3fb7ad.png)

Linkの顧客認証

Stripe では、購入完了率向上に向けて Link を継続的に最適化しており、決済時に顧客にとって最もメリットがある場合に Link を選択して表示することができます。いつどのように Link が表示されるかを含め、変更は徐々に行われる予定です。

#### 分割 Element

Link が有効になっている場合、クレジットカード入力フォームに **Link** ボタンが表示されます。認証された顧客がこのボタンをクリックすると、決済の詳細が自動入力されます。Link対応ビジネスでは、顧客は 90 日に 1 回、アカウントを認証するだけですみます。

顧客が Link に登録していない場合に **Link** ボタンをクリックすると、メールアドレス、電話番号、決済手段を追加するように求められます。顧客は、最初に Card Element にカードの詳細を入力して、そのクレジットカードを Link アカウントに保存することもできます。

Link のリピート顧客が **Link** ボタンをクリックすると、認証が必要な場合には、Link が SMS またはメールのコードで認証するよう求められます。顧客が認証した後、Linkは、すでに保存されている決済の詳細を読み込み、顧客がスピーディーに購入できるようにします。

Stripe では、購入完了率向上に向けて Link を継続的に最適化しており、決済時に顧客にとって最もメリットがある場合に Link を選択して表示することができます。いつどのように Link が表示されるかを含め、変更は徐々に行われる予定です。

## Link の有効化

[Card Element](https://docs.stripe.com/js/element/other_element?type=card) は、アクセスが許可されているすべての企業に対して Link をグローバルにサポートしており (詳細は下記の注を参照)、追加料金もコード変更も必要ありません。Linkは、カード決済の他の機能と完全な互換性があります。

Stripe は、Card Element で Link を自動的に有効にします。[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)で、Card Element のすべてのインスタンスに対して Link を無効にできます。Linkセクションで、Link行の横にあるオーバーフローメニュー (⋯) をクリックし、**Card Element で Link** を無効にします。この設定は、Card Element の両方の形式に適用されます。また、[disableLink](https://docs.stripe.com/js/elements_object/create_element?type=card#elements_create-options-disableLink) パラメーターを `true` に設定して、Card Element で Link を無効にすることもできます。Card Element で Link を非表示にするには、これらのコントロールの 1 つを使用するだけで済みます。

次の場合、Linkは Card Element で表示_されません_。

- Link ボタンを表示するには、Card Element がマウントされている親コンテナーの高さまたは幅が不足しています。通常、幅は 350px、高さは 28px 以上でなければなりません。ただし、フォントサイズ、ロケール、プレースホルダーテキスト、カードアイコンの表示などの他の要素も、これらの要件に影響する場合があります。

- Card Element が、ポップアップに対応していないブラウザー (アプリ内のブラウザーを含む) に表示されている。[サポート対象のブラウザー](https://docs.stripe.com/payments/link/card-element-link.md#test-link-in-the-card-element)に関する情報を表示してください。

- [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) は `same-origin` に設定されています。Linkポップアップは、それを開いたページと通信する必要があるため、Card Element のLinkは、この通信をブロックする設定と互換性がありません。

> Card Element の Link は段階的にリリースされています。[シングルライン Card Element](https://docs.stripe.com/js/element/other_element?type=card) の Link は 2023 年にリリースされ、[分割 Elements](https://docs.stripe.com/js/element/other_element?type=cardNumber) の Link は 2023 年後半から 2024 年初頭にリリースされました。アクセスが許可されたアカウントのみが、[決済手段設定](https://dashboard.stripe.com/settings/link)で Card Element の Link を表示したり、本番環境またはサンドボックスで Link を使用したりすることができます。Linkは現在、インドを拠点とする Stripe アカウントには対応していません。

## Card Element と支払いリクエストボタンを使用する

[決済リクエストボタン](https://docs.stripe.com/payments/link/payment-request-button-link.md)では Link を使用することもできます。Card Element の Link は、決済リクエストボタンの Link とは独立して動作します。決済リクエストボタンと Card Element の両方を使用する場合、決済時に Link が両方に表示されることがあります。決済リクエストボタンに Link が表示されるタイミングの詳細については、[決済リクエストボタン](https://docs.stripe.com/payments/link/payment-request-button-link.md)の Link をご覧ください。

## Link と Connect プラットフォーム

Linkは、Connect 導入を介して Card Element にアクセスするすべての連結アカウントで自動的に利用できます。導入によっては、連結アカウントがダッシュボードで独自のLink設定をカスタマイズできるようにすることもできます。

### 連結されたプラットフォームの対象要件

プラットフォームが次の条件をすべて満たす場合、連結アカウントはダッシュボードで直接、Link設定を管理できます。

- [ダイレクト支払い](https://docs.stripe.com/connect/direct-charges.md)を使用します。

- 連結アカウントの支払い方法を作成して請求します。

- 連結アカウントは Stripe ダッシュボードの全機能を利用できます。

プラットフォーム上のすべての連結アカウントに対してデフォルト状態を設定するには、以下の手順を実行します。

1. [支払い方法の設定](https://dashboard.stripe.com/settings/connect/payment_methods)画面で、**連結アカウント**の**設定の編集**をクリックします。

1. Link セクションで、**Card Element の Link** に移動します。

### 対象外の連結されたプラットフォーム

次の場合、Linkはプラットフォームアカウントの設定で管理されるため、連結アカウントは、プラットフォームを通じて処理される決済の Link 設定をカスタマイズできません。

- プラットフォームで支払い方法を作成し、連結アカウントに[支払い方法を複製](https://docs.stripe.com/connect/direct-charges-multiple-accounts.md#clone-and-create-direct-charges)する

- [デスティネーション支払い](https://docs.stripe.com/connect/destination-charges.md)または[支払いと送金別方式](https://docs.stripe.com/connect/separate-charges-and-transfers.md)を使用する。

- 連結アカウントは Stripe ダッシュボードの一部の機能を利用できない。

プラットフォームのアカウント設定を管理するには、以下の手順を実行します。

1. [支払い方法の設定](https://dashboard.stripe.com/settings/connect/payment_methods)画面で、**お客様のアカウント**の**設定の編集**をクリックします。

1. Link セクションで、**Card Element の Link** に移動します。特定の連結アカウントに対してのみ Link を無効にする場合は、[disableLink](https://docs.stripe.com/js/elements_object/create_element?type=card#elements_create-options-disableLink) パラメーターを使用できます。

### 連結アカウントの支払い処理

- プラットフォームでの決済のLink設定をカスタマイズできる場合は、[決済手段設定](https://dashboard.stripe.com/settings/payment_methods)内の Card Element 設定で、ページ上部のドロップダウンメニューからプラットフォームを選択して、Linkを管理できます。

- 利用しているプラットフォームが設定のカスタマイズ機能を提供できない場合、プラットフォームは自身のプラットフォームで処理するすべての取引に対して Link を使用できるようにするかどうかを決定します。ダッシュボードには、プラットフォームでの決済を管理する設定はありません。

- プラットフォームを利用せずに処理する決済の場合は、[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)でページ上部にあるドロップダウンメニューから「プラットフォームなし」を選択することで、Linkを管理できます。

## Card Element でLinkをテストする

> Don’t store real user data in *sandbox* (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 accounts. Treat them as if they’re publicly available, because these test accounts are associated with your publishable key.

Link は、以下のブラウザで動作します。

- Chrome、Chromeモバイル、Microsoft Edge。

- デスクトップおよび iOS の Safari (最新の 3 つのメジャーバージョン)。

Link は、本番環境とサンドボックスの両方で利用できます。有効なメールアドレスを使用してサンドボックス Link アカウントを作成できます。次の表に記載されているのは、Linkサンドボックスのアカウント認証に使用できる、固定値のワンタイムパスコードです。

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

サンドボックスでLinkを有効にすると、[有効化要件](https://docs.stripe.com/payments/link/card-element-link.md#enable-link)を満たすすべての Card Element サンドボックスセッションでLinkが表示されます。本番環境では、各決済セッションでLinkのコンバージョン率を最大化するために、Linkの表示範囲が異なる場合があります。

## See also

- [Stripe Web Elements](https://docs.stripe.com/payments/elements.md)
- [Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md)
- [Payment Element](https://docs.stripe.com/payments/payment-element.md)